使用 Rollup 定制对 ES 或 CJS 的依赖

Question

我有一个 NPM 包（私有），它可以在浏览器和 Node 环境中运行。

这是通过 Rollup 为 ES 和 CJS 创建单独的包来完成的，因此输出如下：

dist/ejs/index.js // Import this for your browswer environments
dist/cjs/index.js // Use this for Node environments

相当标准。现在我要为此添加一个依赖项，它遵循相同的捆绑模式。

我可以像这样导入库：

import { externalLibrary } from "@external/ejs/externalLibrary";

在浏览器环境下一切正常。但是现在这在 Node 环境中不起作用，因为我导入的不是 CJS。

我可以将库导入 require 的方式更改为 cjs 包：

const { externalLibrary } = require("@external/cjs/externalLibrary");

虽然这在两种环境中都适用，但我认为它不是最佳选择。

有更好的方法吗？导出 CJS 包时我可以指定的一些配置？

module.exports = {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
    // Behaviour here for @external/cjs/externalLibrary ?
  }
};

Answer 1

我忽略了 package.json 配置。您可以在此处根据构建指定不同的入口文件：

{
  ...
  "main": "dist/cjs/index.js",
  "module": "dist/ejs/index.js",
  ...
}

然后我删除了 EJS 文件的隐式导入，并只针对包：

// Before:
import { externalLibrary } from "@external/dist/ejs/externalLibrary";

// After:
import { externalLibrary } from "@external";

这将确保使用 CJS 或 ES 构建，具体取决于使用包的环境。

Answer 2

看起来您已经找到了解决方案，但即使使用旧的导入样式

import { externalLibrary } from "@external/dist/ejs/externalLibrary";

您应该能够为 cjs 与 esm 定位适当的格式。使用汇总，您必须将 output 配置配置为具有适当格式集的对象数组。例如：

module.exports = {
    input: 'src/main.js',
    output: [{ file: 'dist/index.cjs.js', format: 'cjs' }, 
             { file: 'dist/index.esm.js', format: 'es'  }],
}

此外，作为 klap 的作者，我建议您尝试一下，因为默认情况下它会带来许多其他优化。

使用 Rollup 定制对 ES 或 CJS 的依赖

Tailor dependencies to ES or CJS with Rollup

javascript

node.js

rollup