你如何使用 esbuild 填充 react-pdf？

Question

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

我在使用 vite 时确实找到了一个 conversation around how to swap this，但我很好奇是否其他人为 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

在我确认这是端到端工作后的更多内容

Answer 1

我能够使用 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)

你如何使用 esbuild 填充 react-pdf？

How do you shim react-pdf with esbuild?

react-pdf

esbuild