在开发前端项目时，我们经常需要使用ES6及以上的新特性进行开发，但是这些新特性并不是所有浏览器都支持的。在这种情况下，我们就需要通过工具将这些新特性的代码转换为ES5代码，以便在低版本浏览器上运行。npm包build-esnext就是一款能够帮助我们做这件事情的工具。
什么是build-esnext？
build-esnext是一个用于将ES6+代码转换为ES5代码的npm包。它是基于Babel构建的，支持JavaScript、TypeScript和JSX等多种语言。同时，它还支持Tree Shaking等优化功能，能够在保证代码稳定性的情况下，有效减小文件体积。
如何使用build-esnext？
安装
在使用build-esnext之前，我们需要先安装它。在命令行中执行以下命令即可：
npm install build-esnext --save-dev
配置文件
接着，我们需要在项目根目录下创建一个名为.babelrc的配置文件，并且配置babel-preset-build-esnext：
{
"presets": [
"build-esnext"
]
}上述示例中，我们将build-esnext添加到了presets中，这样Babel就会自动按照build-esnext的规则将我们的代码转换为ES5代码。
使用命令行
安装完成并配置好了之后，我们就可以使用build-esnext进行代码转换了。在命令行中，我们需要执行以下命令：
build-esnext src -d lib
其中，src是我们需要转换的源代码目录，lib是转换后的代码目录。build-esnext会将src目录下的所有代码转换为ES5代码，并输出到lib目录下。
使用Webpack
在Webpack中使用build-esnext也十分简单，我们只需要在Webpack配置文件中添加以下代码即可：
-- -------------------- ---- -------
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ----------------
-
-
-
-
-上述示例中，我们给Webpack配置添加了一个Babel Loader，并在options中配置了build-esnext，这样Webpack就会自动将我们的代码转换为ES5代码了。
结语
通过这篇文章，我们了解到了build-esnext这个npm包的基本用法。使用它可以帮助我们快速将ES6及以上的代码转换为ES5代码，并且在转换过程中还能进行优化。希望这篇文章能够帮助到正在学习前端的你，同时也希望在实际的开发过程中能够更加深入地了解build-esnext和Babel的更多功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8cccdc64669dde54ab