使用Babel为网站添加React组件失败，求排查解决方法

我尝试用Babel给网站添加React组件，参考官方教程后仍无法成功。以下是我的配置与操作：

index.html代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="theme-color" content="#000000"/>
    <title>React App</title>
</head>
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
    <script src="build/index.js" type="text/babel"></script>
</body>
</html>

src/index.js代码 #

import React from 'react'
import ReactDOM from 'react-dom/client'

function App() {
    return (
        <button>Like me!</button>
    )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

package.json配置 #

{
  "name": "react-project",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.20.7",
    "@babel/core": "^7.20.12",
    "@babel/preset-react": "^7.18.6"
  }
}

操作步骤 #

执行终端命令：

./node_modules/.bin/babel src --out-dir build --presets @babel/preset-react

生成的build/index.js代码：

import React from 'react';
import ReactDOM from 'react-dom/client';
function App() {
  return /*#__PURE__*/React.createElement("button", null, "Like me!");
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( /*#__PURE__*/React.createElement(App, null));

现象 #

打开index.html后页面无内容，按钮未显示；仅在index.html中添加<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>时才生效，但这不是我想要的方案。请问哪里操作出错了？

核心问题 #

1. ES模块未被转译：你只用了@babel/preset-react，它仅负责将JSX转译为React.createElement，但不会处理import语句。浏览器直接加载包含import的脚本时会触发模块加载错误（打开浏览器控制台即可看到），且你通过CDN引入的React是挂载在window上的全局变量（window.React、window.ReactDOM），并非ES模块，脚本里的import React from 'react'无法找到对应模块。

2. 脚本类型错误：build/index.js已是转译后的纯JS文件，但你在index.html的script标签中添加了type="text/babel"——该属性是给Babel Standalone使用的，会让浏览器等待Babel处理脚本，而你未引入Babel Standalone，导致脚本根本未执行。

解决方案 #

方案一：让Babel处理模块并适配全局变量 #

1. 安装@babel/preset-env，用于转译ES模块语法：

npm install @babel/preset-env --save-dev

2. 在项目根目录创建babel.config.json文件：

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

3. 修改Babel转译命令，将输出转为UMD格式并映射全局变量：

./node_modules/.bin/babel src --out-dir build --presets @babel/preset-env,@babel/preset-react --module umd --globals react:React,react-dom/client:ReactDOM

4. 修改index.html中的script标签，移除type="text/babel"：

<script src="build/index.js"></script>

转译后的脚本会直接使用全局的React和ReactDOM变量，浏览器可正常执行。

方案二：使用打包工具处理（更推荐） #

直接使用Parcel、Vite这类零配置打包工具，它们会自动处理Babel转译、模块依赖打包：

• 以Parcel为例：

npx parcel index.html

工具会自动打包所有依赖，生成可直接在浏览器运行的文件，访问生成的本地服务地址即可看到效果。

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