在汇总 ESM 库中导入 uuid 会在输出文件中为 "crypto" 创建导入语句

Question

编辑：添加插件配置更清晰

我在汇总项目中使用 uuid 包。起初我收到外部依赖性 crypto 的警告。所以我在汇总配置中添加了 external 和 output.globals：

export default [{
  input: '/path/to/input.js',
  external: ['crypto'],
  output: {
    file: '/path/to/output.esm.js',
    format: 'esm',
    ...
    globals: {
      crypto: 'crypto'
    }
  },
  plugins: [
    resolve({
      customResolveOptions: {
        moduleDirectory: 'node_modules'
      },
      preferBuiltins: true
    }),
    commonjs({
      namedExports: {
        uuid: ['v4']
      }
    })
  ]
}];

警告消失了，但现在我的输出文件中有一个导入语句：

output.esm.js

import crypto from 'crypto';
...

我的问题是，如果我在浏览器中包含 output.esm.js，这是否有效？

<script type="module" src="/path/to/output.esm.js"></script>

Answer 1

At first I was getting a warning for external dependency crypto

这是因为 Rollup 不知道你是想使用 node 的内置 crypto 还是外部包。 @rollup/plugin-node-resolve 的 preferBuiltins 用于在这些选项之间进行选择。

So I added external and output.globals in my rollup configuration

这些选项与 preferBuiltins: true 一起告诉 Rollup 使用节点的内置 crypto 而无需捆绑它（因此 import 语句仍然存在于输出文件中）。

然而，如果您的目标环境是浏览器，您应该使用 uuid 提供的 browser alternative 依赖于 Web Crypto API 而不是节点的 crypto。为此，以下 Rollup 配置应该足够了：

// rollup.config.js

export default [{
  input: ...,
  output: {
    file: ...,
    format: 'esm',
  },
  plugins: [
    resolve({
        browser: true, // This instructs the plugin to use
                       // the "browser" property in package.json
    }),
    commonjs(),
  ],
}];

出于好奇：

My question is will this work if I include output.esm.js in browser?

<script type="module" src="/path/to/output.esm.js"></script>

不，不会；主要是因为浏览器不理解裸模块说明符（import crypto from 'crypto' 而不是 './path/to/crypto.js'）。此外，根据您的 Rollup 配置，crypto 被视为内置的 nodejs，除非捆绑 :)

，否则在浏览器中不可用

在汇总 ESM 库中导入 uuid 会在输出文件中为 "crypto" 创建导入语句

Importing uuid in rollup ESM library creates an import statement for "crypto" in output file

uuid

dependencies

guid

rollup

cryptojs