React中CJS与UMD的区别及调试相关问题咨询

为什么UMD文件的断点未触发？ #

你的项目实际加载的是CJS版本的React，而非UMD版本。React在不同环境下会自动选择对应的模块格式：

• 在Node.js或Webpack/Rollup等打包工具驱动的项目（包括CRA）中，会优先读取package.json里main或module字段指向的CJS文件，不会加载UMD版本。
• UMD版本仅在直接通过<script>标签引入的无打包工具场景下才会被加载。

React中CJS与UMD的区别 #

CJS（CommonJS） #

• 遵循Node.js模块规范，使用require()导入、module.exports导出。
• 加载逻辑同步，体积相对紧凑，适合Node.js环境或支持CJS的打包工具。
• 主要为服务器端渲染、现代前端打包场景设计。

UMD（Universal Module Definition） #

• 兼容多种环境的通用模块格式，同时支持CJS、AMD和全局变量（window.React）。
• 体积更大，因为包含环境检测代码，能在浏览器（直接script引入）、Node.js、AMD加载器等多种环境运行。
• 针对无需打包的前端项目或需要兼容多模块系统的场景。

CRA是否阻止调试node_modules中的包？ #

是的，CRA默认配置会阻碍node_modules代码的调试：

• CRA的webpack配置默认对node_modules内的代码进行压缩、转译，且不生成对应的sourcemap，导致你添加的debugger无法映射到原始文件，断点无法触发。
• 非CRA项目可自定义webpack配置，通常会保留node_modules的调试信息或未开启代码压缩，因此能正常调试。

解决方法 #

• 执行npm run eject暴露webpack配置，修改webpack.config.js：关闭对node_modules的压缩，设置devtool: 'source-map'以生成完整的sourcemap。
• 使用react-app-rewired等工具，无需eject即可修改配置，添加对node_modules的调试支持。

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