JavaScript前端工具的生态系统充满了波动和竞争，只有最好的工具才能生存。生产中使用的代码与开发中使用的代码不同。在生产环境中，我们需要构建运行速度足够快的包、管理各种依赖、自动化任务、加载外部模块等。而那些将开发中的代码转化为生产代码的JavaScript工具称为构建工具。我们可以通过各种构建步骤及其重要性来解释为什么需要“构建”前端代码。前端代码构建步骤前端代码的构建包括以下四个步骤：1.Transpiling通过transpiling，开发者可以使用最新最流行的语言更新和扩展，并保持浏览器兼容性。下面是一个使用Babel的例子：//Arrowfunctionsyntaxinarraymapconstdouble=[1,2,3].map((num)=>num*2);//翻译后的constdouble=[1,2,3].map(function(num){returnnum*2;});2.BundlingBundling是处理所有import和require语句的过程；找到匹配的JavaScript代码片段、包和库；这些被添加到适当的字段；然后将它们打包成一个大的JavaScript文件。常用的打包器包括Browserify、Webpack和Parcel。3.压缩CompressionMinifing是通过删除空白和代码注释来减小最终文件的大小。我们还可以更进一步，在缩小过程中添加代码混淆步骤。混淆改变了变量名和方法名，使代码被混淆，以至于代码一旦交付给客户端，就不是那么容易阅读了。这是一个使用Grunt的例子：//beforecompressionconstdouble=[1,2,3].map(function(num){returnnum*2;});//压缩后constdouble=[1,2,3].map(function(num){returnnum*2;});4.打包完成以上所有步骤后，我们需要将这些兼容、分包、压缩/混淆后的文件放在某个地方。打包打包就是这样一个过程，它将上述步骤的结果放在开发人员指定的位置，这通常是通过打包器完成的。前端构建工具前端工具和构建工具可以分为以下几类：包管理：NPM、Yarn翻译器：Babel等打包器：Webpack、Parcel、Browserify压缩混淆：UglifyJS、Packer、Minify等。有各种不同的构建工具可供使用，包括：Grunt和BowerGrunt是作为命令行工具引入的，它只提供一个脚本来指定和配置相关的构建任务。作为包管理器，Bower提供了客户端包管理方法，紧随其后。这两者，再加上NPM，经常一起使用，它们似乎可以满足大部分的自动化需求，但是Grunt的问题在于它没有为开发者提供配置更复杂任务的自由，而Bower则让开发者管理两倍的包像往常一样，因为它将前端和后端包分开（例如，Bower组件与Node模块）。Grunt和Bower的未来：Grunt和Bower正在离开JavaScript工具生态系统，但还有其他选择。Gulp和BrowserifyGulp比Grunt晚了一年半。但是Gulp让大家感觉很自然很舒服。用JavaScript编写构建脚本比用JSON编写它们给你更多的自由。你可以在Gulp的构建脚本中编写函数，即时创建变量，到处使用条件语句——但是这些，不能说让我们感到特别自然和舒服，只能说这只是其中一种可能性的原因.Browserify和Gulp可以一起使用。Browserify允许将NPM包（用于后端Node服务器）直接带到前端。这直接让Bower落伍了。而正是这种使用包管理器来处理前后端包的方式，让人感觉更自然、更好。Gulp的未来：Gulp可能会得到改进以匹配当前流行的构建工具，但这完全取决于创建者。Gulp仍在使用，只是不像以前那么流行了。Webpack和NPM/YarnscriptsWebpack是现代前端开发工具中最炙手可热的宠儿，它是一个开源的JavaScript模块打包器。Webpack最初是为了处理JavaScript而创建的，但如果包含相应的加载器，它也可以转换前端资产，例如HTML、CSS和图像。使用Webpack，你还可以像Gulp一样编写构建脚本，并通过NPM/Yarn执行它们。Webpack的未来：Webpack是目前JavaScript工具生态系统中最热门的工具，现在几乎每个JavaScript库都在使用React和Webpack。Webpack目前是版本4，不会很快消失。（LCTT译注：Webpack现已发布第五个版本，还在热更新中）ParcelParcel是一个Web应用程序打包器，于2018年推出，因其开发者体验而独树一帜。Parcel可以利用处理器的多核能力，以零配置提供极快的打包性能。但是Parcel还是一颗新星，对于一些大型应用来说，它的采用率并不高。相比之下，开发人员更喜欢使用Webpack，因为它具有更广泛的支持和可定制性。Parcel的未来：Parcel非常易于使用，如果算上打包和构建时间，它比Webpack更快，而且它还提供了更好的开发人员体验。也许Parcel没有被大量采用的原因是它仍然相对较新。在前端构建工具的生态系统中，Parcel的未来是非常光明的，还会存在一段时间。RollupRollup是JavaScript的模块包装器，可将一小段代码编译成更大、更复杂的库或应用程序。Rollup通常被推荐用于构建JavaScript库，尤其是那些对第三方库的导入和依赖较少的库。Rollups的未来：Rollups很酷并且正在被迅速采用。它具有许多强大的功能，将作为前端工具生态系统中不可或缺的一部分长期存在。了解更多JavaScript前端工具的生态系统充满了波动和竞争，只有最好的工具才能生存。在不久的将来，我们的构建工具将具有更少（或没有）配置、更容易定制、更好的可扩展性和更快的构建速度。你的前端项目使用什么样的构建工具，需要根据具体的项目需求来决定。至于选择哪种工具，最适合自己。很多时候，我们需要自己做出选择。
