我正在尝试做一个简单的事情-我想将我的Javascript代码（使用vuejs）与node_modules中的vue库捆绑在一起（以便浏览器仅加载一个js文件）
这些文件在下面，我的问题是-为什么捆绑的js文件在基于cdn的脚本src链接使用相同代码时不起作用？我是否在汇总中缺少某些内容？
这是我的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.jsimport 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(),],
};
感谢您的帮助
最佳答案
我解决了，但是我不确定这是否是最好的方法
这是我的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-resolverollup-plugin-node-resolve非常适合在node_modules/<lib>/dist/目录中没有多个版本的库关于javascript - 如何使用汇总将vuejs库与我的代码捆绑在一起，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48724742/