React源码调试上-生成sourcemap

下载源码

git clone https://github.com/facebook/react.git 
// 或者
git clone git@github.com:facebook/react.git

// 如果上面的比较慢,加上一个gitclone.com的前缀
git clone https://gitclone.com/github.com/facebook/react.git

代码下载下来后切换到指定的tag

// 用最新的代码可能无法生成map
git checkout v18.2.0

为什么要切换版本, 我clone下来最新的代码之后发现生成的map文件是空的

{
    "version":3,
    "file":"react.development.js",
    "sources":[],
    "sourcesContent":[],
    "names":[],
    "mappings":";;;;;;..."//省略若干个;
}

而实际上应该是这样子的

安装依赖

yarn

可能出现的问题

报错: electron error

yarn config set electron_mirror https://npmmirror.com/mirrors/electron/

设置成功之后 可使用yarn config list确认一遍

可设置就可以删除, 如果设置错误了想删除, 使用命令yarn config delete electron_mirror 设置之后再次安装依赖

报错: getaddrinfo ENOENT raw.githubusercontent.com

系统的hosts文件中配置raw.githubusercontent.com 的映射查询地址的连接为githubusercontent

DNS Records下面随便选择一个配置到hosts文件中

报错 node版本不匹配

查看当前node版本 nvm ls

可以看到为v18.17.1

切换node版本为17.9.1

nvm use 17.9.1

切换成功之后重新执行依赖安装

生成sourcemap

1, 确定package.json的build命令为

2, 修改scripts\rollup\build.js文件, 设置sourcemap为true, 默认为false

3, 注释掉报错的插件, 一共5个地方

3.1 用来删除 use strict 字符串

3.2 消除或缩小dead code

3.3 未使用的模块导入

3.4 添加必要的空白

3.5 许可证,标题,顶级if块

执行

yarn build

看到build目录下密密麻麻的map文件, 说明文件生成成功了