不再为 Node.js 模块自动引入 Polyfills

前端精髓

2021-01-16 21:02


在早期,webpack 的目的是为了让大多数的 Node.js 模块运行在浏览器中,但如今模块的格局已经发生了变化,现在许多模块主要是为前端而编写。webpack <= 4 的版本中提供了许多 Node.js 核心模块的 polyfills,一旦某个模块引用了任何一个核心模块(如 cypto 模块),webpack 就会自动引入这些 polyfills。


比如下面这个签名的函数使用到了 crypto 模块,因为在浏览器环境下是没有 crypto 这个东西的,所以要引入 polyfills 做兼容处理。


const crypto = require('crypto');
// 将值通过私钥签名,由.分割原值和签名function sign (val, secret) { return val + '.' + crypto .createHmac('sha256', secret) .update(val) .digest('base64') .replace(/\=+$/, '');};
module.exports = sign;


怎么防止打包的时候把 crypto 模块打进去了,其实我们可以在 package.json 里面配置 browser 字段,然后设置值 false 就可以。这样代码就只能在 node 环境下运行了。


{  "name": "webpack4",  "version": "1.0.0",  "description": "",  "main": "index.js",  "browser": {    "crypto": false  },  "scripts": {    "webpck": "npx webpack"  },  "keywords": [],  "author": "",  "license": "ISC",  "dependencies": {    "webpack": "^4.35.3",    "webpack-cli": "^3.1.0"  }}


从 webpack 5 开始不再自动填充这些 polyfills,而会专注于前端模块兼容。node 的模块也不属于前端模块,所以之后不会为 Node.js 模块引入 polyfills 做兼容了。


尽量使用前端兼容的模块。比如 axios 这样的库,即可以在浏览器中运行,也可以在 node 环境中运行。


可以手动为 Node.js 核心模块添加 polyfill。错误提示会告诉你如何实现。


Package 作者:在 package.json 中添加 browser 字段,使用 package 与前端兼容。

浏览 32
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报