Как использовать накопительный пакет для объединения библиотеки vuejs с моим кодом

Я пытаюсь сделать простую вещь - я хочу связать свой код Javascript (который использует vuejs) с библиотекой vue из node_modules (чтобы браузер загружал только один файл js)

Файлы ниже, у меня вопрос - почему связанный файл js не работает, в то время как тот же код работает со ссылками src сценария на основе cdn? Мне что-то не хватает в сводном пакете?

Вот как выглядит body раздел моего html

  <body>
    <div id="app">
      <!-- VUE WILL BE INJECTED HERE -->
      {{ message }}
    </div>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
    <script type="text/javascript" src="bundle.js"></script>
  </body>

и вот мой main.js файл (из которого bundle.js создается с помощью свертки)

import Vue from 'vue';
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello VueREX!',
  },
});

а вот и мой rollup.config.js

import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';

export default {
  input: 'main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs',
  },
  plugins: [commonjs({ include: ['./main.js', './node_modules/*.*'] }),
            resolve(),],
};

Спасибо за помощь


javascript rollupjs bundling-and-minification
person Mortz    schedule 10.02.2018    source источник
comment
Вы получаете конкретную ошибку?   -  person philngo    schedule 10.02.2018
comment
Нет. Пакет успешно создан. Когда я открываю файл bundle.js, я вижу весь код Vuejs над своим трехстрочным кодом. Но когда я открываю html-файл, я вижу {{ message }} вместо «Hello VueREX».   -  person Mortz    schedule 10.02.2018
comment
Вы используете какой-нибудь шаблонизатор, например twig? Попробуйте сделать <p v-text="message"></p> вместо {{ message }}.   -  person Stark    schedule 10.02.2018
comment
Нет. Нет шаблонизатора. Я устал от v-текста вместо {{}}, но ничего. Если это может помочь, когда я проверяю vue-devtools в своем браузере, он вообще не обнаруживает vue.   -  person Mortz    schedule 10.02.2018

Ответы (1)


arrow_upward
2
arrow_downward

Я решил это, но не уверен, что это лучший способ

Вот как сейчас выглядит мой rollup.config.js -

import alias from 'rollup-plugin-alias';
import commonjs from 'rollup-plugin-commonjs';
import replace from 'rollup-plugin-replace';

export default {
  input: 'index.js',
  output: {
    file: 'bundle.js',
    format: 'cjs',
  },
  plugins: [commonjs(),
            replace({'process.env.NODE_ENV': JSON.stringify('development')}),
            alias({resolve: ['.js'], vue: __dirname + '/node_modules/vue/dist/vue'})
          ]
}

Файл main.js остается как есть.

По сути, я полагаюсь на rollup-plugin-alias вместо rollup-plugin-node-resolve

rollup-plugin-node-resolve хорошо работает с библиотеками, у которых нет нескольких версий в каталоге node_modules/<lib>/dist/.

person Mortz    schedule 14.02.2018