Question

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

文件在下面，我的问题是 - 为什么捆绑的js文件不起作用，而相同的代码与基于cdn的脚本src链接一起工作？我错过了汇总的内容吗？

以下是我body的{{1}}部分的内容

html

这是我的<body> <div id="app">  {{ message }} </div>  <script type="text/javascript" src="bundle.js"></script> </body>文件（汇总创建了bundle.js）

main.js

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

rollup.config.js

感谢您的帮助

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/目录中没有多个版本的库

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

1 个答案: