0

如果您今天使用 esbuild 为浏览器捆绑 react-pdf，您将遇到提示您为 platform=node 构建的错误，因为 zlib 和流在浏览器环境中不可用。

我确实找到了一个关于如何在使用 vite 时交换它的对话，但我很好奇其他人是否为 esbuild 创建了一个 shim，它提供了等效的东西

process: "process/browser",
stream: "vite-compatible-readable-stream",
zlib: "browserify-zlib"

我今天使用的版本：@react-pdf/renderer": "^2.0.21"

编辑

恰好为 esbuild 存在一个节点模块 polyfill，您应该能够将其配置为插件

https://github.com/remorses/esbuild-plugins#readme

npm i -D @esbuild-plugins/node-globals-polyfill

然后使用 esbuild 你可以像这样传递它

https://esbuild.github.io/plugins/#using-plugins

更多在我确认这是端到端工作之后

4

1 回答 1

0

我能够使用 esbuild v0.14.10 和 2 个插件来实现这一点

npm i -D @esbuild-plugins/node-modules-polyfill
npm i -D @esbuild-plugins/node-globals-polyfill

使用这样的构建配置

const esbuild = require('esbuild')
const globalsPlugin = require('@esbuild-plugins/node-globals-polyfill')
const modulesPlugin = require('@esbuild-plugins/node-modules-polyfill')

const args = process.argv.slice(2)
const deploy = args.includes('--deploy')

const loader = {
  // Add loaders for images/fonts/etc, e.g. { '.svg': 'file' }
}

const plugins = [
  globalsPlugin.NodeGlobalsPolyfillPlugin({
      process: true,
      buffer: true,
      define: { 'process.env.NODE_ENV': deploy ? '"production"' : '"development"' },
  }),
  modulesPlugin.NodeModulesPolyfillPlugin(),
]

let opts = {
  entryPoints: ['js/app.js'],
  bundle: true,
  target: 'es2017',
  outdir: '../priv/static/assets',
  logLevel: 'info',
  inject: ['./react-shim.js'],
  loader,
  plugins
}

if (deploy) {
  opts = {
    ...opts,
    minify: true
  }
}

const promise = esbuild.build(opts)
于 2022-01-03T14:21:42.527 回答