TypeScript NPM模块在Create React App中Source Map不生效，如何解决？

我之前在开发本地TS模块并通过npm link关联到Create React App项目时，也碰到过source map无法被调试工具识别的问题。核心原因其实是CRA默认的Webpack配置会忽略node_modules目录下的source map处理，而npm link的模块会被视为node_modules的一部分，所以需要针对性调整。下面是几个亲测有效的解决方案：

方案一：通过Craco修改CRA的Webpack配置 #

CRA默认不允许直接修改Webpack配置，我们可以用craco（Create React App Configuration Override）来扩展配置，让它处理本地link模块的source map：

1. 首先安装依赖：

npm install --save-dev @craco/craco

2. 在CRA项目根目录创建craco.config.js文件，添加以下配置（替换your-module-name为你的TS模块名称）：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 确保TypeScript loader开启source map支持
      const tsLoaderRule = webpackConfig.module.rules.find(
        rule => rule.test && rule.test.test('.tsx')
      );
      if (tsLoaderRule) {
        tsLoaderRule.use.forEach(loader => {
          if (loader.loader.includes('babel-loader') || loader.loader.includes('ts-loader')) {
            loader.options.sourceMap = true;
          }
        });
      }

      // 修改devtool配置，确保能加载外部source map文件
      webpackConfig.devtool = 'source-map';

      // 让Webpack处理我们的本地模块（排除其他node_modules包）
      webpackConfig.module.rules.forEach(rule => {
        if (Array.isArray(rule.exclude)) {
          rule.exclude = rule.exclude.filter(excl => excl !== /node_modules/);
          rule.exclude.push(/node_modules\/(?!your-module-name)/);
        }
      });

      return webpackConfig;
    }
  }
};

3. 修改package.json中的启动脚本，替换默认的react-scripts为craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

4. 重启CRA开发服务器，并清除缓存：

npm start -- --reset-cache

方案二：在TS模块中生成内嵌Source Map #

这个方法更简单，不需要修改CRA的配置，直接让你的TS模块把source map内嵌到编译后的JS文件中：

1. 修改你的TS模块的tsconfig.json：

{
  "compilerOptions": {
    "sourceMap": false,
    "inlineSourceMap": true,
    "inlineSources": true,
    "module": "commonjs",
    // 保留其他原有配置
  }
}

2. 重新编译你的TS模块（比如执行tsc或者你配置的编译脚本），然后在CRA项目中重启开发服务器。

内嵌的source map会直接包含在JS文件里，CRA的调试工具能直接读取，不需要额外处理。

方案三：用Yalc替代npm link #

npm link的符号链接可能导致CRA的Webpack配置误判模块来源，而yalc会把本地模块复制到CRA项目的node_modules中，像普通npm包一样被处理：

1. 全局安装yalc：

npm install -g yalc

2. 在你的TS模块目录执行发布命令：

yalc publish

3. 在CRA项目目录添加该模块：

yalc add your-module-name

4. 每次修改TS模块后，执行yalc push就能自动同步到CRA项目，无需手动重新link。

额外注意事项 #

• 确保你的TS模块的package.json中main字段指向正确的编译后JS文件（比如dist/index.js），并且编译后.map文件和JS文件在同一目录下。
• 检查浏览器开发者工具的设置：Chrome中确保Sources面板的Enable JavaScript source maps选项是开启的。
• 若仍有问题，尝试删除CRA项目的node_modules/.cache目录，彻底清除缓存后重启。

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