为什么说 90% 的前端不会调试 Ant Design 源码？

yarn create react-app antd-react-test
复制代码

创建成功后，进入到项目里，把 dev server 跑起来。

浏览器访问可以看到渲染出的页面：

然后我们安装 antd，在入口组件里引入样式和 Button 组件：

页面会显示这个 Button：

指定调试的 URL，然后启动调试。

在组件里打个断点，代码会在这里断住：

可以看到调用栈中上一帧是 renderWithHooks，这就是 react 源码里调用函数组件的地方。

点击那个调用栈，你就会看到：

输入断住的条件：

当组件名字包含 Button 的时候才断住。

然后刷新：

你会发现这确实是 Button 组件的源码，但却是被编译后的，比如 jsx 都被编译成了 React.createElement：

git clone --depth=1 --single-branch git@github.com:ant-design/ant-design.git
复制代码

你会发现默认的构建就是会生成 sourcemap 的，其实你去那个 react 测试项目里看下，从 npm 下载的 antd 包也带了 sourcemap：

那直接用 dist 入口的代码就能调试源码了么？

我们试一下：

现在是这样：

也就是没了 babel runtime 的代码，这明显是源码了。

但是你往后看：

之前是这样的：

现在是这样： 

搜一下 ts-loader，你就会看到这段配置：

确实就像我们分析的，tsx 会经过 ts-loader 和 babel-loader 的处理。

搜一下 devtool，你会发现它的配置是 source-map：

ts也同样要生成 sourcemap，不过那个是在根目录的 tsconfig.json里改：

改完这三点之后，再重新跑 npm run dist。

dist 目录下会生成新的 antd.js 和 antd.js.map。

把它复制到 react 项目的 node_modules/antd/dist 下，覆盖之前的。

清一下 babel-loader 的缓存：

重新跑 dev server。

注意，这里要用 dist 下的代码：

然后再跑到断点的位置，进入组件源码，你会进入一个新世界：

ts 类型、jsx 的语法，熟悉的感觉又回来了，这不就是 antd 组件的源码么！