如何使用 rollup 将 vuejs 库与我的代码捆绑在一起

Question

我正在尝试做一件简单的事情 - 我想将我的 Javascript 代码（使用 vuejs）与来自 node_modules 的 vue 库捆绑在一起（以便浏览器只加载一个 js 文件)

文件在下面，我的问题是 - 为什么捆绑的 js 文件不起作用，而相同的代码适用于基于 cdn 的脚本 src 链接？我在汇总中遗漏了什么吗？

这是我的 html 的 body 部分的样子

  <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(),],
};

感谢您的帮助

Answer 1

我解决了，但我不确定这是否是最好的方法

这是我的 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/ 目录

中没有多个版本的库

如何使用 rollup 将 vuejs 库与我的代码捆绑在一起

How to use rollup to bundle the vuejs library with my code

javascript

bundling-and-minification

rollupjs