Node.js core modules polyfill

[nighca]

Problem

Automatic Node.js polyfill is removed in Webpack v5. See details here. These solutions is recommended:

1. Try to use frontend-compatible modules whenever possible.
2. It's possible to manually add a polyfill for a Node.js core module. An error message will give a hint on how to achieve that.
3. Package authors: Use the browser field in package.json to make a package frontend-compatible. Provide alternative implementations/dependencies for the browser.

If you use webpack directly, you can do the 2nd thing like this:

// webpack config
module.exports = {
  resolve: {
    fallback: {
      "crypto": require.resolve("crypto-browserify"),
      "stream": require.resolve("stream-browserify"),
      // ...
    }
  },
}

However there is no way to specify resolve.fallback when using builder. Which means, currently there is no way to do Node.js core module polyfill for builder users. This is the problem.

Proposal

We can add a field in build config optimization:

{
  "optimization": {
    "addNodePolyfill": ["crypto"]
  }
}

No module will be polyfilled by default. If you specify module names in the list, builder will find the proper polyfill and do the resolve fallback work.

Notice that it is not easy to do the above work, cause the proper polyfill packages is a messy and there are hacks in resolve fallback configuration, such as

require.resolve("assert/")

instead of

require.resolve("assert"),

There is a plugin doing these for us, we can implement polyfillNode based on it.

Related links

• https://webpack.js.org/blog/2020-10-10-webpack-5-release/#automatic-nodejs-polyfills-removed
• https://github.com/Richienb/node-polyfill-webpack-plugin
• https://juejin.cn/post/6918195987869761549
• https://stackoverflow.com/questions/64557638/how-to-polyfill-node-core-modules-in-webpack-5

[liaoyu]

我有一个想法是将 resolveFallback 或者 resolveAlias 暴露出来，好处是这些依赖也交由使用方自己维护，builder 不需要安装相关的 polyfill，但由于我们的配置是 json 格式的路径查找比较受限，比如可以配置成类似下面这样，builder 内部使用 require.resolve 包一下值

{
  "optimization": {
    "resolveFallback": {
      "buffer": "buffer",
      "path": "path-browserify"
    }
  }
}

相关链接
https://webpack.js.org/configuration/resolve/#resolvefallback
webpack/webpack@a68426e

[nighca]

Partly solved by #158