Блог

Главная - Вопросы по программированию - Накопительный пакет Vue собран min.js файл не работает

Накопительный пакет Vue собран min.js файл не работает

#vue.js #vuejs2 #rollup #iife #transpiler

Вопрос:

Я использовал официальную конфигурацию накопительного пакета в соответствии с Vue.js сайт

https://vuejs.org/v2/cookbook/packaging-sfc-for-npm.html

Сборка выполнена правильно, однако, когда я импортирую min.js файл, я не могу заставить компонент работать.

Конфигурация сборки

rollup.config.js

 import commonjs from "@rollup/plugin-commonjs"; // Convert CommonJS modules to ES6
import vue from "rollup-plugin-vue"; // Handle .vue SFC files
import buble from "@rollup/plugin-buble"; // Transpile/polyfill with reasonable browser support

export default {
  input: "src/wrapper.js", // Path relative to package.json
  output: {
    name: "MyComponent",
    exports: "named",
  },
  plugins: [
    vue({
      compileTemplate: true, // Explicitly convert template to render function
    }),
    commonjs(),
    buble({
      exclude: "node_modules/**",
    }), // Transpile to ES5
  ],
};

мой-компонент.vue

 <template>
  <h1>Hello</h1>
</template>

<script>
export default {
  name: "my-component",
};
</script>

пакет.json

 {
  "scripts": {
    "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/my-component.min.js"
  },
  "devDependencies": {
    "@rollup/plugin-buble": "^0.21.3",
    "@rollup/plugin-commonjs": "^19.0.0",
    "rollup": "^2.48.0",
    "rollup-plugin-vue": "^6.0.0",
    "vue-template-compiler": "^2.6.12"
  }
}

Использование встроенного файла

index.html

 <body>
  <div class="" id="app">
    <my-component></my-component>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./dist/my-component.min.js"></script>
  <script>
    const vue = new Vue({
      el: "#app",
    });
  </script>
</body>

When I do that I get an error about vue not being defined and my-component component is just not rendered despite the build configuration being succesfull. I am new at rollup and I followed the Vue guides so I don’t know what am doing wrong.

Метки: