Question

我有一个NPM包（专用），可以在浏览器和Node环境中使用。

这是通过Rollup for 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的作者，我建议您尝试一下，因为默认情况下会带来很多其他优化。

通过汇总量身定制对ES或CJS的依赖项

2 个答案: