如何搭建React第三方类库本地开发环境？

我明白你现在的困扰——直接改node_modules里的代码根本不生效，想调试自己的修改却看不到效果。别着急，咱们一步步搭建靠谱的本地开发环境：

为什么直接改node_modules没用？ #

首先得搞清楚核心原因：大多数React类库发布到npm的是编译后的生产代码，不是源码；而且像create-react-app这类工具会把依赖包的代码提前打包到构建产物里，不会实时监听node_modules里的文件变化。所以你改的要么是已经编译过的文件（改了也不会被重新执行），要么改了之后没有触发重新构建，自然看不到效果。

搭建本地开发环境的步骤 #

1. 把类库源码克隆到本地 #

别再盯着node_modules了，直接把目标类库的源码克隆到电脑上的独立目录（比如和你的测试项目同级的文件夹）。比如针对Reactstrap，你可以用git把仓库源码拉到本地。

2. 配置类库的本地开发环境 #

进入克隆好的类库目录，先执行npm install安装所有依赖。然后打开类库的package.json，找scripts字段里的开发相关命令——通常会有类似start、build:watch或者dev的脚本，这类命令会启动实时监听编译：当你修改源码时，工具会自动重新构建类库，生成可调试的版本。

比如Reactstrap的脚本里应该有专门用于开发的watch命令，执行它之后，你的源码修改会实时反映到构建产物里。

3. 把本地类库链接到测试项目 #

这一步是关键，让你的测试项目用本地的类库源码，而不是npm下载的版本：

• 在类库的本地目录里执行npm link，这会把这个类库注册到你的全局npm链接列表中。
• 回到你用create-react-app创建的测试项目目录，执行npm link reactstrap（把reactstrap换成你要开发的类库名称）。

4. 调试你的修改 #

现在你可以放心修改本地克隆的类库源码了——比如在Tooltip.js里加console.log，保存后，类库的实时编译脚本会自动重新构建。然后启动测试项目的开发服务器（npm start），当你在项目里使用Tooltip组件时，控制台就能看到你加的日志了！

额外注意事项 #

• 有些类库可能需要先执行一次初始构建（比如npm run build），再启动watch模式，不然链接过去的可能是空的构建产物。
• 如果遇到create-react-app缓存导致修改不生效的问题，可以删除项目里的node_modules/.cache目录，或者重启开发服务器。
• 开发完成后，记得取消链接：在测试项目里执行npm unlink reactstrap，在类库目录执行npm unlink，避免影响后续的依赖安装。

内容的提问来源于stack exchange，提问作者RonE