不使用create-react-app搭建离线React应用遇live-server无输出问题求助

我想要创建一款可用于离线开发的React应用，且不使用create-react-app工具。已安装Node.js，在VSCode终端执行npm install live-server react react-dom完成依赖安装。index.html和index.js代码如下：

index.html代码：

<html lang="en">
<head>
</head>
<body>
    <div id="root"></div>   
    <script src="index.js" type="text/babel"></script>
</body>
</html>

index.js代码：

import React from "react"
import ReactDOM from "react-dom"

const navbar = (
    <h1>Test</h1>
)

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

但运行live-server后没有任何输出，请问我遗漏了什么？是否需要在html头部添加以下web元素？

<script crossorigin src="https://unpkg.com/react@17/udm/react.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

问题根源与离线解决方案 #

核心问题 #

你当前的代码有两个关键缺陷：

• 浏览器原生不支持import模块导入语法，也无法直接解析JSX语法；
• live-server仅提供静态文件服务，没有内置JSX转译和模块处理能力。

关于CDN脚本的说明 #

你提到的CDN脚本确实能临时解决语法解析问题，但依赖在线资源，不符合离线开发的需求。下面是完全基于本地依赖的解决方案：

步骤1：配置本地Babel转译 #

1. 安装Babel相关开发依赖：

   npm install @babel/core @babel/cli @babel/preset-react --save-dev
   

2. 在项目根目录创建.babelrc配置文件，指定React转译规则：

   {
     "presets": ["@babel/preset-react"]
   }
   

3. 在package.json中添加转译脚本：

   "scripts": {
     "build": "babel index.js --out-file dist.js"
   }
   

4. 执行转译命令，生成浏览器能识别的普通JS文件：

   npm run build
   

   执行后会得到转译完成的dist.js文件。

步骤2：修改index.html引入本地资源 #

移除type="text/babel"，改用本地安装的React/ReactDOM资源和转译后的脚本：

<html lang="en">
<head>
</head>
<body>
    <div id="root"></div>   
    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="dist.js"></script>
</body>
</html>

步骤3：验证运行 #

再次执行live-server，此时浏览器会加载本地的React资源与转译后的JS文件，就能正常渲染出<h1>Test</h1>内容。

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