如何调试 Babel 源码？
提示
本章内容基于《Babel 插件通关秘籍》整理。
这节我们来调试下 Babel 源码，很多疑问大家就可以自己 debug 源码来解决了。
我们知道，Babel 的 API 是这样用的：
const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const generate = require('@babel/generator').default;
const source = `
(async function() {
console.log('hello guangguang');
})();
`;
const ast = parser.parse(source);
traverse(ast, {
StringLiteral(path) {
path.node.value = path.node.value.replace('guangguang', 'dongdong')
}
});
const { code, map} = generate(ast, {
sourceMaps: true
});
console.log(code);
console.log(JSON.stringify(map));parse、traverse、generate 三个步骤。
traverse 过程中要声明对什么 AST 做什么修改， AST 可以在 astexplorer.net 来查看。
比如可以看到这部分是 StringLiteral 字符串字面量，修改它的 value 即可。
我们安装依赖之后跑一下：
可以看到打印了修改以后的代码和 sourcemap。
我们的目标不是学怎么用 Babel 的 api，而是学怎么调试它的源码。
接下来我们创建个调试配置：
点击这里快速创建 launch.json 调试配置文件：
点击 add configuration 创建一个 nodejs 的调试配置：
设置 console 为内置的 terminal：
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"console": "integratedTerminal",
"program": "${workspaceFolder}/index.js"
}这样日志是输出在集成的 Terminal 里的，不然输出在 Debug Console，颜色之类的信息就都没了。
打几个断点，然后跑调试：
可以看到 parse 之后的 AST，遍历修改时的节点，生成的目标代码。
然后我们进入这几个包内部看下源码。
你会发现调试的是这几个包编译之后的代码：
如果有 generator、async await 之类的，调试编译后的代码根本绕不明白。
怎么调试最初的源码呢？
sourcemap！
但是你去 node_modules 下看下这些包，会发现它们已经有 sourcemap 了，而且也关联了：
那为什么调试的时候调试的不是源码呢？
这是因为 VSCode 的一个默认配置导致 sourcemap 不会生效。
resolveSourceMapLocations 是配置去哪里查找 sourcemap，VSCode Node Debugger 默认不会查找 node_modules 下的 sourcemap。
所以就算 babel 的包里带了 sourcemap 也不会生效。
把它去掉之后再跑一下：
你会发现现在调试的就是 babel 的 ts 源码了。
直接调试可读性更强的 ts 源码，理清它的实现逻辑就简单很多了。
而且，你还可以更进一步，调试 babel 源码的时候让 VSCode 直接定位到源码的目录：
这个只要 sourcemap 到的文件路径在当前 workspace 下就行。
看下现在的路径：
虽然调试的是源码的 ts 了，但是路径是 node_modules 包下的。
我们可以把 babel 项目下下来和测试项目放在一个 workspace 下：
然后去 node_modules 下手动替换下 sourcemap 的 sources 路径：
我这里是把 ../src/ 替换成了 /Users/guang/code/babel-debug/babel/packages/babel-parser/src/
然后在新的 workspace 创建个调试配置，这时目录改了，要指定下 cwd：
再跑调试：
你就会发现现在 sourcemap 到的路径直接是 babel 源码下的文件路径了，然后调试的时候 VSCode 也会直接打开对应文件。
更重要的是，现在你可以直接在 babel 源码里打断点了，代码执行到那里就会断住：
至此，我们就能愉快的调试 babel 源码了。
我们调试了 @babel/parser 包的源码，其余的包也是一样的方式。
总结
这节我们调试了 Babel 的源码。
Babel 分为 parse、traverse（或者叫 transform）、generate 三个阶段，分别对应 @babel/parser、@babel/traverse、@babel/generator 的包。
可以用 VSCode Debugger 来调试它。
直接断点调试会发现调试的是编译后的代码，但是 node_modules 下的这几个包都是有 sourcemap 的。
这是因为默认 resolveSourceMapLocations 排除了 node_modules 下的 sourcemap，去掉它重新跑调试，就可以直接调试 ts 源码了。
如果想调试的时候直接调试 babel 源码目录的文件，可以把测试项目和 babel 项目放到一个 workspace，然后改下 sourcemap 文件里的 sources 路径就可以了。这样就可以直接在 babel 源码里打断点。
当你对 babel 某部分功能的实现感兴趣的时候，就可以自己调试源码了！