第七章：揭秘“构建”过程——代码转换、打包与压缩

第七章：揭秘“构建”过程——代码转换、打包与压缩

摘要: 在前面的章节，我们已经能熟练地使用 require 语法在 Node.js 环境中构建应用。但一个核心问题悬而未决：我们写的这些 Node.js 代码，能直接在浏览器里运行吗？如果我们想使用一些前沿的 JavaScript 新特性，如何保证它在旧环境中也能正常工作？本章，我们将聚焦于解决这些问题的“构建”过程。我们将以 weather-cli 项目为蓝本，探索代码转换、打包和压缩这三大核心任务，理解现代构建工具是如何将我们的“源码”打造成能在任何地方高效运行的“成品”的。

7.1. 我们的目标：让 weather-cli 跑在浏览器上

让我们从一个清晰的目标开始：将我们在前面章节中创建的多文件、使用 CommonJS (require) 语法的 weather-cli Node.js 项目，改造为一个 可以在浏览器 index.html 中引用的、单一的、优化过的 bundle.min.js 文件。

重要信息: 这一章节我们采用手动打包的形式，在前端的发展史中，都是这些小的程序去构建出了一个大的程序，在以后，webpack，以及现在前端最潮流的 vite 打包工具，都能为我们一键操作多个流程

要达成这个目标，我们的源码必须经历一次“进化”，完成三个环节的转换

7.2. 环节一：代码转换

7.2.1. 理论解析

场景: 假设我们想用 ES2020 的新语法——可选链操作符 (?.) 来简化 weather-cli 的代码，以避免因数据结构层级过深而导致的运行时错误。

升级前 (安全但繁琐):

1
2
const cityInfo = response.data.cityInfo;
const city = cityInfo && cityInfo.city ? cityInfo.city : '未知';

升级后 (简洁但有兼容风险):

1
const city = response.data.cityInfo?.city || '未知';

这段简洁的代码，在旧版本的浏览器中会直接导致语法错误。为了解决这个问题，我们需要 Babel 这样的“代码翻译官”，将高版本的 JavaScript 语法，转换为功能等价、兼容性更好的旧版语法。

同时，对于新的 函数或方法（如 Array.prototype.flat()），我们还需要 Polyfill（垫片） 来在旧环境中“模拟”出这些 API。

7.2.2. 动手实践：配置并运行 Babel

第一步：安装 Babel 核心依赖

1
pnpm add @babel/core @babel/cli @babel/preset-env -D
  • @babel/core: Babel 的核心引擎。
  • @babel/cli: 提供了从命令行使用 Babel 的能力。
  • @babel/preset-env: 一个智能的“预设包”，能根据目标环境自动确定需要转换哪些新语法。

第二步：配置 Babel
在项目根目录创建 babel.config.js 文件。
文件路径: weather-cli/babel.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
    presets: [
      [
        '@babel/preset-env',
        {
          targets: { // 我们的目标浏览器
            "chrome": "88",
          },
          modules: "cjs", // 强制转换为 CommonJS 模块
        },
      ],
    ],
  };

第三步：组织源码并执行转译
为了规范，新建一个 src 目录，并将 index.js 移动进去。在 package.json 中添加 build:babel 脚本：

1
2
3
"scripts": {
  "build:babel": "babel src --out-dir dist"
}

babel src --out-dir dist 命令意为：将 src 目录下的所有 JS 文件进行转译，输出到 dist 目录。

执行它：

1
npm run build:babel

执行后，项目下会生成一个 dist 目录，里面的 .js 文件就是被 Babel 转换过后的兼容性代码。

7.3. 环节二：模块打包

7.3.1. 理论解析

经过 Babel 处理后，dist 目录里的代码虽然语法兼容了，但它们依然是两个独立的文件，并且保留着 require 和 module.exports 语句。浏览器既不认识这种模块语法，也无法接受我们让它发起多个 HTTP 请求去加载这些零散的文件。

打包器 的工作就是解决这个问题。它会从一个入口文件出发，分析 require 语句，绘制出一张“依赖图”，最终将所有必需的模块合并成一个浏览器可执行的大文件 bundle.js。

7.3.2. 动手实践：使用 Browserify 打包

第一步：安装 Browserify
Browserify 是一个专注于将 CommonJS 模块打包成浏览器代码的工具，非常适合我们当前的场景。

1
pnpm add browserify -D

第二步：添加打包脚本
在 package.json 的 scripts 中添加 build:bundle 脚本：

1
2
3
4
"scripts": {
  "build:babel": "babel src --out-dir dist",
  "build:bundle": "browserify dist/index.js --outfile bundle.js"
}

此命令意为：从 dist/index.js 入口开始，分析依赖，然后将它们全部打包进 bundle.js 文件。

重要信息: 注意，由于最新版的 axios 已经完全抛弃了 es5 的语法，我们的需要测试这些底层工具需要手动降级 axios，通过 npm uninstall axios 和 npm install axios@0.27.2 先下载一个旧版本我们才能测试通过

执行它：

1
npm run build:bundle

执行后，项目根目录会生成一个 bundle.js 文件。这个文件已经包含了我们所有的代码，并且可以在浏览器中运行。

7.4. 环节三：代码压缩

7.4.1. 理论解析

我们的 bundle.js 文件虽然功能完备，但其中包含了大量的空格、换行和注释，体积较大，会影响线上用户的加载速度。代码压缩 (Minification) 就是构建流程中必不可少的“瘦身”工序。

压缩前:

1
2
3
4
5
// 获取城市代码，如果找不到则返回默认值
function getCityCode(city) {
  const cityMap = require('./cities.js');
  return cityMap[city] || '101281001'; // 默认潮州
}

压缩后:

1
function getCityCode(c){return require("./cities.js")[c]||"101281001"}

7.4.2. 动手实践：使用 Terser 压缩

第一步：安装 Terser
Terser 是一个高效的 JavaScript 压缩器。

1
pnpm add terser -D

第二步：添加压缩脚本
在 package.json 中添加 build:minify 脚本：

1
2
3
4
5
"scripts": {
  "build:babel": "babel src --out-dir dist",
  "build:bundle": "browserify dist/index.js --outfile bundle.js",
  "build:minify": "terser bundle.js --output bundle.min.js --compress --mangle"
}

此命令意为：读取 bundle.js，进行压缩和变量名混淆，然后输出到 bundle.min.js 文件。

执行它：

1
npm run build:minify

现在，你得到了最终的产物：bundle.min.js。

最后一步：在浏览器中验证
创建一个 index.html 文件来加载我们亲手构建出的 bundle.min.js。
文件路径: weather-cli/index.html

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
  <title>Weather App</title>
</head>
<body>
  <h1>查看浏览器控制台输出</h1>
  <script src="./bundle.min.js"></script>
</body>
</html>

用浏览器打开这个 index.html 文件，然后打开开发者工具的控制台（按 F12），你将看到 weather-cli 成功打印出了天气信息！

恭喜！你已经不再是一个只会“使用”工具的开发者了。你亲手搭建了一个虽然简单但五脏俱全的构建流水线，你现在深刻地理解了那些看似神奇的“黑盒”工具（如 Webpack, Vite）背后，最核心的工作原理。

7.5. 本章核心速查总结

分类关键工具/概念核心描述
理论概念Transpiling (转译)将 新语法 转换为向后兼容的 JS 语法。
实践工具@babel/cli提供了 babel 命令，用于执行语法转译。
理论概念Bundling (打包)将多个模块文件根据依赖关系合并成一个或少数几个文件。
实践工具browserify用于将 CommonJS 模块打包成单个浏览器可执行文件。
理论概念Minification (压缩)移除多余字符和混淆变量名，将代码体积压缩到极致。
实践工具terser高效的 JS 压缩器，用于生成生产环境代码。

7.6. 高频面试题与陷阱

面试官深度追问
2025-08-31
面

你能解释一下在一个典型的前端构建流程中，“转译(Transpiling)”和“打包(Bundling)”这两个步骤各自解决了什么问题吗？

我
我

当然。“转译”主要解决的是 语言兼容性 问题，它通过像 Babel 这样的工具，将开发者使用的高级语法（如 ESNext）转换为绝大多数浏览器都能理解的旧版 JavaScript 语法，但它不处理文件间的依赖关系。而“打包”主要解决的是 模块化和性能 问题，它通过像 Browserify 或 Webpack 这样的工具，解析 require 或 import 语句，将我们拆分成多个文件的项目源码，合并成一个或少数几个文件，以减少浏览器的 HTTP 请求次数，提升加载性能。