生产环境中使用的代码与开发代码不同。在生产环境中，您需要构建运行速度快、管理依赖项、自动化任务、加载外部模块等的软件包。使将开发代码转换为生产代码成为可能的 JavaScript 工具称为构建工具。
前端代码需要“构建”的原因可以通过查看各种构建步骤及其重要性来解释。
构建前端代码的步骤
构建前端代码涉及四个步骤
1. 转译
转译使开发人员能够利用语言和扩展的最新、最热门的更新，并保持浏览器兼容性。这是一个使用 Babel 的示例
// arrow function syntax in array map
const double = [1, 2, 3].map((num) => num * 2);
// after being transpiled
const double = [1, 2, 3].map(function(num) {
return num * 2;
});2. 打包
打包是获取所有“import”或“require”语句的过程；查找匹配的 JavaScript 代码片段、软件包和库；将它们添加到适当的作用域；并将所有内容打包到一个大的 JavaScript 文件中。常用的打包器包括 Browserify、Webpack 和 Parcel。
3. 压缩
压缩通过删除空格和代码注释来减小最终文件大小。您可以更进一步添加混淆步骤，该步骤会更改变量名和方法名，从而使代码模糊不清，使其在交付给客户端后更难以阅读。这是一个使用 Grunt 的示例
// before minifying
const double = [1, 2, 3].map(function(num) {
return num * 2;
});
// after minifying
const double = [1, 2, 3].map(function(num) {
return num * 2;
});4. 封装
完成上述所有步骤后，必须将兼容、打包、压缩/混淆的文件放在某个位置。封装是将上述步骤的结果放在开发人员指定的某个位置的过程。这通常由打包器完成。
前端构建工具
前端工具和构建工具可以分为以下几类
- 包管理器：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 发布一年半后发布。它感觉很自然。与 JSON 相比，用 JavaScript 编写构建脚本给予了自由。您可以编写函数，动态创建变量，在任何地方使用条件语句——并不是说这会使构建脚本特别好看，但这确实是可能的。Browserify 和 Gulp 可以串联使用。Browserify 允许将 NPM 软件包（用于后端 Node 服务器）引入前端，从而使 Bower 过时。它看起来和感觉也更好，前端和后端只有一个包管理器。
Gulp 的未来： Gulp 可以改进以匹配当前流行的构建工具，但这完全取决于创建者。它仍然在使用，但不如以前流行。
Webpack 和 NPM/Yarn 脚本
Webpack 是现代前端开发工具中最热门的新秀。Webpack 是一个开源 JavaScript 模块打包器。它主要用于 JavaScript，但如果包含相应的加载器，它可以转换前端资源，如 HTML、CSS 和图像。使用 Webpack，您还可以编写像 Gulp 这样的脚本，并使用 NPM/Yarn 执行它们。
Webpack 的未来： Webpack 目前是 JavaScript 工具生态系统中最热门的东西，现在所有 JS 酷孩子都在使用 React 和 Webpack。它目前是第 4 版，并且在短期内不会消失。
Parcel
Parcel 是一个 Web 应用程序打包器，于 2018 年推出，其特点是开发人员体验。它利用多核处理提供闪电般快速的性能，并且需要零配置。Parcel 也是一个新秀，但采用速度并不快，尤其是对于大型应用程序。开发人员更喜欢使用 Webpack 而不是 Parcel，因为前者具有广泛的支持和可定制性。
Parcel 的未来： Parcel 非常易于使用，如果您测量捆绑和构建时间，它比 Webpack 更快，并且它还提供了更好的开发人员体验。Parcel 没有被广泛采用的原因可能是因为它仍然相对较新。Parcel 在前端构建工具生态系统中拥有非常光明的未来，并且它将在一段时间内存在。
Rollup
Rollup 是一个 JavaScript 模块打包器，它将小的代码片段编译成更大、更复杂的东西，例如库或应用程序。在构建具有最少第三方导入的库时，建议使用 Rollup。
Rollup 的未来： Rollup 超级酷，并且正在被快速采用。它具有强大的功能，并且将在前端工具生态系统中存在很长时间。
了解更多
JavaScript 工具生态系统是动态且竞争激烈的，只有最好的工具才能生存。在未来，我们将看到需要更少（或无需）配置、更好的可定制性、更强的可扩展性和更高速度的工具。
您为应用程序前端使用的工具是您需要根据项目需求做出的个人决定。选择最适合您的工具，并且在大多数情况下，都会有权衡。
有关更多信息，请参阅
本文最初发表于 Shedrack Akintayo 的博客，并经其许可转载。
4 条评论