[FE] React 初窥门径（二）：构建过程

1. 调试 build 过程

React 源码工程，添加 .vscode/launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Build",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "runtimeExecutable": "npm",
      "runtimeArgs": [
        "run-script",
        "debug-build"
      ],
      "port": 5858,
    }
  ]
}

修改 package.json，添加 debug-build npm scripts

"debug-build": "node --inspect-brk=5858 ./scripts/rollup/build.js",

按 F5 进行调试

2. 构建逻辑

可以看这里，github: react-tour
将该仓库 v17.0.2 分支的 .tour/ 拷贝到 React 源码目录（tag 为 v17.0.2）即可。

需要 VSCode 安装 Code Tour 插件

业务逻辑概览：

• 根据用户传入的参数，来决定对哪些模块以什么方式进行打包
• 当前（React v17.0.2）总共包含 52 个模块，这些模块通过 createBundle 循环处理
• 每一个模块生成相应的 rollup 构建配置
• 每个模块构建完并生成构建产物之后，进行一些拷贝操作，把 package.json 和 readme.md 都复制到构建产物目录

---

参考

Node.js debugging in VS Code
VSCode: Code Tour
github: thzt/react-tour