你如何用 esbuild 填充 react-pdf？答案

【问题标题】：How do you shim react-pdf with esbuild?你如何用 esbuild 填充 react-pdf？
【发布时间】：2022-01-01 14:03:16
【问题描述】：

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

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

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

【问题讨论】：

标签： react-pdf esbuild

【解决方案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)

【讨论】：