生产环境中使用的代码与开发代码不同。在生产环境中，您需要构建运行速度快的软件包、管理依赖项、自动化任务、加载外部模块等等。使开发代码能够转化为生产代码的 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 具有广泛的支持和可定制性，因此开发人员更喜欢使用 Webpack 而不是 Parcel。
Parcel 的未来： Parcel 非常易于使用，如果您测量捆绑和构建时间，它比 Webpack 更快，并且它还提供了更好的开发人员体验。Parcel 没有被广泛采用的原因可能在于它仍然相对较新。Parcel 在前端构建工具生态系统中拥有非常光明的未来，并且它将在一段时间内存在。
Rollup
Rollup 是一个 JavaScript 模块打包工具，它将小块代码编译成更大、更复杂的东西，例如库或应用程序。建议在构建第三方导入最少的库时使用 Rollup。
Rollup 的未来： Rollup 超级酷，并且正在被迅速采用。它具有强大的功能，并且将在很长一段时间内成为前端工具生态系统的一部分。
了解更多
JavaScript 工具生态系统充满活力且竞争激烈，只有最好的工具才能生存。未来，我们将看到需要更少（或无需）配置、更好的可定制性、更强的可扩展性和更高的速度的工具。
您用于应用程序前端的工具是一个个人决定，您需要根据项目的要求做出决定。选择最适合您的工具，并且大多数时候，都需要权衡取舍。
有关更多信息，请参见
本文最初出现在 Shedrack Akintayo 的博客上，并已获得他的许可转载。
4 条评论