在前端开发中，我们经常要处理不同浏览器对 JavaScript 的支持情况。由于历史原因，旧版的浏览器对 JavaScript 的支持往往不尽如人意，而现代浏览器对新版 JavaScript 的支持却又越来越好。这就导致了我们需要为不同浏览器提供不同版本的 JavaScript，以保证网站的兼容性。
Polyfill（填充）技术就是一种解决这个问题的方案。它通过在旧版浏览器中注入一些额外的代码，来实现对新版 JavaScript 特性的支持。针对不同的新特性，也有不同的 polyfill 库可供选择。
在本文中，我们将介绍一种名为 @next/polyfill-nomodule 的 npm 包，它可以为所有不支持 ES6 的浏览器提供 ES6 的代码支持。
安装
在使用 @next/polyfill-nomodule 之前，我们需要先安装它。可以使用 npm 来完成安装：
npm install @next/polyfill-nomodule --save
使用
安装完成后，我们就可以开始使用 @next/polyfill-nomodule 了。
1. 在 webpack 中使用
在 webpack 中使用 @next/polyfill-nomodule 最简单的方式是在 entry 中添加：
entry: [ '@next/polyfill-nomodule', // 添加此行 './src/index.js' ]
这样，webpack 就会在打包时自动引入相应的 polyfill 代码。
2. 在 HTML 中使用
如果我们的代码不是通过 webpack 打包的，那么我们也可以在 HTML 中手动引入 polyfill：
<script src="node_modules/@next/polyfill-nomodule/polyfill-nomodule.js"></script>
这样，polyfill 代码就可以被浏览器正确加载并执行了。
注意事项
虽然 @next/polyfill-nomodule 可以为所有不支持 ES6 的浏览器提供 ES6 的代码支持，但它并不完全等同于 ES6 的原生支持。例如它并不能使用 ES6 的模块化语法。
同时，我们也要注意选择正确的 polyfill 库，以应对不同的兼容性需求。
示例代码
以下示例代码可以帮助我们更好地理解如何使用 @next/polyfill-nomodule：
const arr = [1, 2, 3];
if (arr.includes(2)) {
console.log('2 is included');
} else {
console.log('2 is not included');
}这段代码中使用了 ES6 的数组方法 includes，而浏览器的兼容性可能会比较差。在添加了 @next/polyfill-nomodule 后，我们就可以放心地使用这个方法了。
总结
@next/polyfill-nomodule 是一种帮助我们解决兼容性问题的 polyfill 库。它可以为不支持 ES6 的浏览器提供近似 ES6 的代码支持，使用起来也非常简单。但我们还需要注意兼容性问题，并选择正确的 polyfill 库，以保证最佳的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedca45b5cbfe1ea06123c7