Question

我正在尝试创建一个组件库wie rollup和Vue，当其他人将其导入时，它们可以被树摇晃。我的设置如下：

package.json的相关摘录

{
  "name": "red-components-with-rollup",
  "version": "1.0.0",
  "sideEffects": false,
  "main": "dist/lib.cjs.js",
  "module": "dist/lib.esm.js",
  "browser": "dist/lib.umd.js",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w"
  },
  "devDependencies": {
    /* ... */
}

这是我的整个rollup.config.js

import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import vue from "rollup-plugin-vue";
import pkg from "./package.json";

export default {
  input: "lib/index.js",
  output: [
    {
      file: pkg.browser,
      format: "umd",
      name: "red-components"
    },
    { file: pkg.main, format: "cjs" },
    { file: pkg.module, format: "es" }
  ],
  plugins: [resolve(), commonjs(), vue()]
};

我有一个相当简单的项目结构，其中包含一个index.js文件和2个Vue组件：

root
 ∟ lib
    ∟ index.js
    ∟ components
       ∟ Anchor.vue
       ∟ Button.vue
 ∟ package.json
 ∟ rollup.config.js

我的index.js导入Vue文件并导出它们：

export { default as Anchor } from "./components/Anchor.vue";
export { default as Button } from "./components/Button.vue";

export default undefined;

如果我不执行export default undefined;，那么以任何方式导入我的库的应用都找不到任何导出。很奇怪。

现在，当我创建另一个应用程序并像这样导入red-components-with-rollup时：

import { Anchor } from "red-components-with-rollup";

然后从我的应用程序中打开捆绑软件，我还将在捆绑软件中找到Button.vue的源代码，但尚未将其删除为无效代码。

我在做什么错了？

Answer 1

this文章涵盖了您可能感兴趣的晃动树木的有趣陷阱。

除此之外-您的消费者应用程序构建工具是否支持纯es模块并具有摇树功能？如果是这样，那么我将确保您导出的文件没有发生任何可能使汇总混淆的“副作用”事情。

为了安全起见，我将为您的每个组件提供直接导入，并为导出它们提供一个主要的index.js。至少您给那些偏执于运送未使用代码的人一个选择，即-

h2 = { url = "jdbc:h2:mem:test1" driver = org.h2.Driver connectionPool = disabled keepAliveConnection = true } sqlite = { url = "jdbc:sqlite::memory:" driver = org.sqlite.JDBC connectionPool = disabled keepAliveConnection = true }

使用汇总创建树可摇晃的库

1 个答案: