Front End

[FE] React 初窥门径(二):构建过程

2021-10-25  本文已影响0人  何幻

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 插件

业务逻辑概览:


参考

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

上一篇 下一篇

猜你喜欢

热点阅读