如何配置 Rollup 以允许多个入口点以及 CJS 和 EJS 编译？

Question

我希望能够导入具有多个入口点的库（例如 ABC/X、ABC/Y、ABC/Z）。我已经能够在 'rollup-plugin-multi-input' 插件的帮助下做同样的事情。

但现在我也想在 ECMA 和 CommonJS 中编译它。我找不到任何相关文档，我得到的大多数结果都是从库中导入的（比如 import {x} from "abc"）。没有 CJS 编译在 React 测试中给我带来麻烦。

如何在ECMA和CommonJS中同时提供多个入口点进行编译？

Answer 1

我在为节点和浏览器环境捆绑的几个项目中都有这个。

或者，首先，在您的 package.json 中，确保您有 main 和 module 设置如下：

{
    "main": "package-cjs.js",
    "module": "package-esm.js"
}

这将用于命名捆绑包，并且是对名称进行硬编码的更好替代方法。

然后，在您的 rollup.config.js 中，它应该如下所示（请注意，我不知道您输入的内容如何，所以如果不同，您可以保持原样）。

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

export default {
    input: "./src/index.ts",
    external: [],
    plugins: [
        commonjs(),
    ],
    output: [{
        file: pkg.main,
        format: "cjs",
        exports: 'default'
    }, {
        file: pkg.module,
        format: "esm",
    }],
};

请注意，在每个导出的 file 属性中，我们使用 package.json 中的名称。如果您不想执行该步骤，也可以将其设置为字符串。

现在，当您运行构建 Rollup 时，您应该会看到主模块和模块的捆绑包。

如何配置 Rollup 以允许多个入口点以及 CJS 和 EJS 编译？

How to configure Rollup to allow multiple entry points as well as CJS and EJS compilation?

javascript

rollup

reactjs