使用React CDN引入自定义组件避免逐个添加script标签的方案咨询

解决方案：原生ES模块 + babel-standalone 模块支持 #

核心原理 #

现代浏览器原生支持ES标准的import/export语法，配合babel-standalone的模块处理配置，不需要webpack等打包工具，也不用给每个组件单独加script标签，就能实现正常的组件组织。你之前报错是因为babel默认会把import语法转译为Node环境的require调用，浏览器没有内置require实现，所以会抛出未定义错误。

具体修改步骤 #

1. 调整HTML入口配置
   首先修正script标签写法（HTML规范中script标签不能自闭合），给入口JS的script标签新增data-type="module"属性，告诉babel按ES模块规则处理代码，不要转译为require：

<html>
    <head>
        <script src="react.js"></script>
        <script src="react-dom.js"></script>
        <script src="babel.js"></script>
        <script type="text/babel" src="app.js" data-type="module"></script>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

2. 调整导入路径写法
   浏览器原生ES模块要求导入路径必须补全文件后缀，修改app.js中的导入语句：

// 补全.js后缀
import Greeting from './greeting.js';

const App = () => {
    return (
        <Greeting text='Hello World' />
    );
}

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

3. 组件文件无需修改
   greeting.js的export default写法可以直接保留，不需要改动。

注意事项 #

不要直接双击打开HTML文件运行，浏览器的本地文件协议限制了ES模块的跨域请求，需要启动本地静态服务，比如用VSCode的Live Server插件，或者执行npx serve命令在项目根目录启动服务即可正常访问。

进阶方案（适合中大型项目） #

babel-standalone是在浏览器端实时转译JSX，项目体积大了之后加载性能会明显下降，如果需要开发中大型项目，推荐使用零配置的构建工具Vite：

• 不需要复杂的webpack配置，执行2行命令就能初始化React项目
• 开发环境基于原生ES模块实现，热更新速度极快
• 完全支持正常的import/export组件组织方式，不需要手动处理script标签
• 生产环境打包自动做优化，性能远高于CDN+babel-standalone的模式

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