这篇文章将为大家详细讲解有关JavaScript 构建工具有哪些，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：空间域名、网络空间、营销软件、网站建设、襄阳网站维护、网站推广。

1、转译

通过转译Transpiling，开发者可以使用到语言最新、最热门的更新和扩展，并保持浏览器的兼容性等。下面是使用 Babel 的一个例子:

// 数组映射中的箭头函数语法const double = [1, 2, 3].map((num) => num * 2);// 转译后const double = [1, 2, 3].map(function(num) {  return num * 2;});

2、分包

分包Bundling是处理所有 import 与require 语句的过程；找到相匹配的 JavaScript 代码片段、包和库；将它们添加到适当的域中；然后将它们打包到一个大的 JavaScript 文件中。常用的分包器包括 Browserify、Webpack 与 Parcel。

3、压缩

压缩Minifing是通过删除空白和代码注释来减少最终的文件大小。在压缩过程中，我们还可以更进一步添加代码混淆步骤，混淆会更改变量名和方法名，使代码变得晦涩难懂，因此一旦代码交付到客户端，它就不是那么容易能让人读懂。下面是一个使用 Grunt 的例子:

// 压缩前const double = [1, 2, 3].map(function(num) {  return num * 2;});// 压缩后const double=[1,2,3].map(function(num){return num*2;});

4、打包

完成上面的所有步骤之后, 我们需要将这些具有兼容性、且经过分包、压缩/混淆过的文件放置到某个地方。打包Packaging正是这样一个过程，它将上述步骤所产生的结果放置到开发者指定的某个位置上，这通常是通过打包器完成的。

前端构建工具

前端工具及构建工具可以分为以下几类:

• 包管理: NPM、Yarn

• 转译器: Babel 等

• 打包器: Webpack、Parcel、Browserify

• 压缩混淆: UglifyJS、Packer、Minify 等

JavaScript 生态系统中有各种各样的构建工具可以使用，包括下面的这些：

Grunt 和 Bower

Grunt 是作为命令行工具引入的，它仅提供一个脚本来指定和配置相关构建任务。Bower 作为包管理器，提供了一种客户端包的管理方法而紧追其后。这两者，再加上  NPM，它们经常在一起使用，它们看上去似乎可以满足大多数的自动化需求，但 Grunt 的问题在于它无法提供给开发者配置更复杂任务的自由，而  Bower 使开发者管理的程序包是平常的两倍，因为它将前端包、后台包分开了（例如，Bower 组件与 Node 模块）。

Grunt 与 Bower 的未来： Grunt 与 Bower 正在退出 JavaScript 工具生态，但是还有一些替代品。

Gulp 和 Browserify

Gulp 是在  Grunt 发布一年半之后才发布的。但 Gulp 却让大家感到很自然、舒服。用 JavaScript 来写构建脚本与用 JSON  来写相比更自由。你可以在 Gulp 的构建脚本中编写函数、即时创建变量、在任何地方使用条件语句 ——  但就这些，并不能说让我们的感觉变得特别自然和舒适，只能说这只是其中的一个可能的原因。Browserify 和 Gulp 可以配合使用，Browserify 允许 NPM 包（用于后端 Node 服务器）被直接带入到前端，就这一点已经直接让 Bower 废了。而正是这种用一个包管理器来处理前后端包的方式让人感到更自然和更好。

Gulp 的未来： Gulp 可能会被改进，以便匹配当前流行的构建工具，但这完全取决于创造者的意愿。Gulp 仍在使用中，只是不再像以前那么流行了。

Webpack 和 NPM/Yarn 脚本

Webpack 是现代前端开发工具中最热门的宠儿，它是一个开源的  JavaScript 模块打包器。Webpack 主要是为处理 JavaScript 而创造的，但如果包含相应的加载器，它也可以转换  HTML、CSS 和图片等前端资源。通过 Webpack，你也可以像 Gulp 一样编写构建脚本，并通过 NPM/Yarn 来执行它们。

Webpack 的未来： Webpack 是目前 JavaScript  工具生态系统中最热门的工具，最近几乎所有的 JavaScript 库都在使用 React 和 Webpack。Webpack  目前处于第四个版本，不会很快消失。（LCTT 译注：Webpack 目前已经发布了第五个版本了，且还在火热更新中）

Parcel

Parcel 是一个  Web 应用打包器，于 2018 年推出，因其开发者体验而与众不同。Parcel 能利用处理器多核功能提供极快的打包性能，且还零配置。但  Parcel 还是一个新星，对于一些大型应用，其采用率并不高。相比之下，开发人员更喜欢使用 Webpack，因为 Webpack  有更广泛的支持和可定制性。

Parcel 的未来： Parcel 非常容易使用，如果你统计打包和构建时间，它会比 Webpack 更快，而且它还提供了更好的开发者体验。Parcel 没有被大量采用的原因可能是它仍然比较新。在前端构建工具的生态系统中，Parcel 的前景会非常光明，它将会存在一段时间。

Rollup

Rollup 是 JavaScript 的一个模块分包器，它可将一小段代码编译为更大更复杂的库或应用。Rollup 一般建议用来构建 JavaScript 库，特别是那种导入和依赖的第三方库较少的那种库。

Rollup 的未来： Rollup 很酷，且正在被迅速采用。它有很多强大的功能，将在很长一段时间内作为前端工具生态系统的一个组成部分而存在。

关于JavaScript 构建工具有哪些就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

当前文章：JavaScript构建工具有哪些
分享路径：http://chengdu.cdxwcx.cn/article/jgjeis.html