我正在尝试做一件简单的事情 - 我想将我的 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 文件(由 rollup 创建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(),],
};
感谢您的帮助
最佳答案
我解决了它，但我发现不确定这是否是最好的方法
这是我的 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/ 中没有多个版本的库。目录
关于javascript - 如何使用 rollup 将 vuejs 库与我的代码捆绑在一起，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48724742/