Sublime Text中npm安装React依赖后JS脚本失效无报错如何解决

浏览器原生不支持CommonJS规范的require()模块语法，也无法直接识别JSX语法。你通过npm安装的React是面向构建工具的源码版本，不是可直接在浏览器运行的预编译产物，直接在HTML中引用写了require()和JSX的脚本文件时，代码会在解析阶段直接中断，部分场景下控制台不会抛出显性报错。
你之前用CDN引入React时能正常运行，是因为CDN提供的是预打包的UMD格式产物，会自动将React、ReactDOM挂载到全局变量，不需要手动处理模块引入和编译。

你之前尝试的两个操作完全不解决核心问题：

• 把文件名改成index.pack.js没有任何实际作用，浏览器不会自动帮你打包、解析npm依赖
• Sublime Text安装React相关插件仅能提供代码高亮、语法提示功能，不会参与代码编译，和脚本能不能运行没有关系

你可以根据自己的需求选以下两种方案：

方案1：零构建快速跑通（仅适合本地练手） #

不需要配置复杂的构建工具，直接使用React和Babel的预编译UMD产物即可：

1. 从本地node_modules目录中找到对应包的UMD文件，复制到你的静态js目录：
   • React的UMD文件路径：node_modules/react/umd/react.development.js（开发调试用，带完整报错提示）
   • ReactDOM的UMD文件路径：node_modules/react-dom/umd/react-dom.development.js
   • 先执行npm install @babel/standalone安装Babel的浏览器端编译包，将node_modules/@babel/standalone/babel.min.js也复制到js目录
2. 修改index.html，按顺序引入依赖，注意给你自己的业务脚本加Babel编译标记：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
    <div id="root"></div>
    <!-- 按依赖顺序引入预编译产物 -->
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
    <!-- 加type="text/babel"标记，让babel识别并编译JSX -->
    <script type="text/babel" src="js/index.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

3. 修改index.js，删掉所有require/import引入语句——UMD版本的React已经把相关变量挂载到全局了，可以直接使用：

const element = <h1 className="header">This is JSX</h1>
console.log(element)

ReactDOM.render(
    element,
    document.getElementById("root")
)

注意：这个方案是在浏览器端实时编译JSX，性能很差，绝对不能用于生产环境。

方案2：规范工程化方案（推荐，适合正式开发） #

正规的React开发必须借助构建工具完成模块解析、JSX编译、代码打包等工作，新手推荐用Vite做构建工具，配置零成本：

1. 在项目根目录执行命令初始化Vite React项目（如果已有写好的文件请提前备份）：

npm create vite@latest . -- --template react

2. 按照终端提示执行npm install完成依赖安装
3. 把你写的业务代码放到src目录下，项目入口文件为src/main.jsx，CSS、静态图片等资源按Vite规范存放即可，不需要手动复制React、Babel的依赖文件
4. 执行npm run dev启动开发服务器，按照终端提示的本地地址访问页面即可正常运行，Vite会自动处理热更新、语法编译、依赖解析等所有工程化问题。

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