将React集成至现有网站时遇到的import语法错误问题

你遇到的核心问题是浏览器无法识别ES6的import语法，即便引入了babel-standalone也没生效，这主要是script标签配置错误，加上CDN全局引入的React和本地import语句冲突导致的。下面给你一步步梳理解决办法：

1. 修正script标签的关键属性 #

你提到试过设置type为babel，但大概率是没给引入index.js的script标签加上正确的类型。要让babel-standalone解析你的JS文件，必须给对应script标签加上type="text/babel"（注意是text/babel而非babel），同时要指定预设参数，因为babel-standalone不会自动启用React和ES6解析规则。

修改后的index.html中引入index.js的代码：

<script src="index.js" type="text/babel" data-presets="react,es2015"></script>

2. 消除CDN React与本地import的冲突 #

你已经通过CDN全局引入了React和ReactDOM，但index.js里又写了import React from 'react'——babel-standalone在浏览器环境下没有npm模块解析能力，没法处理这种包导入语句，直接导致语法报错。所以要删掉这两行import，直接用全局变量：

修改后的index.js代码：

// 移除React和ReactDOM的import，改用CDN提供的全局变量
// import React from 'react';
// import ReactDOM from 'react-dom';

// 样式导入无法被babel-standalone解析，后面单独处理
// import './index.css';

// 自定义组件的import也需要调整，见下一步
// import App from './App';

// 注册Service Worker的代码如果是create-react-app生成的，浏览器环境下无法直接运行，暂时注释
// import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
// registerServiceWorker();

3. 处理自定义组件和样式的导入问题 #

• 自定义组件：如果你的App.js也是用JSX和ES6写的，需要把它也用type="text/babel"的script标签引入，并且放在index.js前面，保证App组件在index.js执行前已经被解析：

<script src="App.js" type="text/babel" data-presets="react,es2015"></script>

• 样式文件：直接用link标签把index.css引入到head里，替代import语句：

<link rel="stylesheet" href="index.css">

4. 最终验证的完整文件结构 #

调整后的index.html大概是这样：

<head>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/react-content-loader@3.4.1/dist/react-content-loader.min.js" crossorigin ></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div id="root"></div>
  <script src="App.js" type="text/babel" data-presets="react,es2015"></script>
  <script src="index.js" type="text/babel" data-presets="react,es2015"></script>
</body>

这样修改后，浏览器就能正确解析JSX和ES6语法，不会再报Unexpected identifier的错误了。

最后提醒一句：babel-standalone只适合开发调试场景，生产环境建议先用webpack或babel-cli把React代码编译成浏览器原生支持的代码，再部署到网站上，性能会提升很多。

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