如何从 RollupJS 的 treeshaking 中排除 ES6 模块（VueJS）？（我应该吗？）

Question

现在我拉入所有我自己的 es6 模块并使用 Rollup 创建一个包。

最近我开始使用 VueJS，它现在有一个 ES6 模块，可以像我自己的模块一样被拉入。 Rollup 对其进行了一些 treeshaking，但我不知道这是否是个好主意？我不知道它在做什么，所以我宁愿它什么都不做！

相反，我只是在 HTML:

的末尾添加 vue

<script src="dist/bundle.js"></script>

我喜欢将所有内容作为一个捆绑文件的便利，但是我真的应该对整个 Vue 应用程序进行 treeshake，Rollup 中是否有一个命令我不能只对这个模块进行 treeshake？

编辑

我找到了 --external 选项，这看起来不错，因为它只会为 vue 保留 import 并将其余部分捆绑在一起，但它似乎不起作用！

当我使用 rollup --format=iife --external=../node_modules/vue/dist/vue.esm.browser.js --file=dist/bundle.js -- src/main.js 时，它显示 Error: Could not resolve '../node_modules/vue/dist/vue.esm.browser.js' from src/app.js。

在我的 main.js 中，它有 import Vue from '../node_modules/vue/dist/vue.esm.browser.js; 这对应用程序来说很好用。我想把Vue做成外部的，但是不行！

Answer 1

为了防止 Rollup 对特定模块进行 treeshaking，您可以简单地盲目导入它（而不是导入它的一部分），这样 Rollup 就会认为该模块会产生一些副作用：

import 'vue'

当然你仍然可以并行导入一些位，这样你就可以重命名默认导出例如：

import 'vue'
import Vue from 'vue'

至于您的 --external 选项，您可能只需要用引号将路径值括起来：

--external='../node_modules/vue/dist/vue.esm.browser.js'

请注意，您可能应该切换到 Rollup 配置文件（而不是 CLI 选项）以使您的生活更轻松。您还可以使用汇总插件，例如rollup-plugin-alias 管理您要使用的 Vue 文件的确切位置。

如何从 RollupJS 的 treeshaking 中排除 ES6 模块（VueJS）？（我应该吗？）

How can I exclude an ES6 module (VueJS) from treeshaking in RollupJS? (and should I?)

javascript

vue.js

rollupjs

如何从 RollupJS 的 treeshaking 中排除 ES6 模块（VueJS）？ （我应该吗？）

How can I exclude an ES6 module (VueJS) from treeshaking in RollupJS? (and should I?)

javascript

vue.js

rollupjs

如何从 RollupJS 的 treeshaking 中排除 ES6 模块（VueJS）？（我应该吗？）