不再為 Node.js 模塊自動(dòng)引入 Polyfills

在早期，webpack 的目的是為了讓大多數(shù)的 Node.js 模塊運(yùn)行在瀏覽器中，但如今模塊的格局已經(jīng)發(fā)生了變化，現(xiàn)在許多模塊主要是為前端而編寫。webpack <= 4 的版本中提供了許多 Node.js 核心模塊的 polyfills，一旦某個(gè)模塊引用了任何一個(gè)核心模塊（如 cypto 模塊），webpack 就會(huì)自動(dòng)引入這些 polyfills。

比如下面這個(gè)簽名的函數(shù)使用到了 crypto 模塊，因?yàn)樵跒g覽器環(huán)境下是沒有 crypto 這個(gè)東西的，所以要引入 polyfills 做兼容處理。

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

怎么防止打包的時(shí)候把 crypto 模塊打進(jìn)去了，其實(shí)我們可以在 package.json 里面配置 browser 字段，然后設(shè)置值 false 就可以。這樣代碼就只能在 node 環(huán)境下運(yùn)行了。

{  "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 開始不再自動(dòng)填充這些 polyfills，而會(huì)專注于前端模塊兼容。node 的模塊也不屬于前端模塊，所以之后不會(huì)為 Node.js 模塊引入 polyfills 做兼容了。

盡量使用前端兼容的模塊。比如 axios 這樣的庫，即可以在瀏覽器中運(yùn)行，也可以在 node 環(huán)境中運(yùn)行。

可以手動(dòng)為 Node.js 核心模塊添加 polyfill。錯(cuò)誤提示會(huì)告訴你如何實(shí)現(xiàn)。

Package 作者：在 package.json 中添加 browser 字段，使用 package 與前端兼容。