无构建工具的React项目如何拆分独立组件并实现正常导入？

你当前采用的是浏览器直引UMD版React + 浏览器端Babel实时转译的开发模式，没有接入Webpack/Vite等模块化打包工具，浏览器原生环境默认不支持CommonJS规范的require语法，也未默认开启ES Module的导入解析能力，因此两种导入写法都会报错。

方案1：无额外配置，调整script引入顺序（适合小型Demo） #

无需使用导入/导出语法，通过全局作用域共享组件，操作步骤如下：

• 新建拆分后的组件文件js/APP/components/Note.js，直接编写组件逻辑：

function Note({ note }){
    return <div>{ `Note: ${note}` }</div>;
}

• 修改index.html的script加载顺序，先加载拆分的组件文件，再加载主入口app.js，所有含JSX的脚本都要标注type='text/babel'：

<body>
    <h1>Placeholder title</h1>
    <div id="root"></div>
    
    <script src='js/react.production.min.js'></script>
    <script src='js/react-dom.production.min.js'></script>
    <script src='js/babel.min.js'></script>
    <!-- 先加载拆分组件 -->
    <script type='text/babel' src='js/APP/components/Note.js'></script>
    <!-- 再加载主入口文件 -->
    <script type='text/babel' src='js/APP/app.js'></script>
</body>

• app.js中直接使用Note组件即可，无需写导入语句：

function App() {
    return <Note note='Hello World!' />;
}

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

如果担心全局变量污染，可以将组件挂载到自定义全局对象下：

// Note.js 中定义
window.MyAppComponents = window.MyAppComponents || {}
window.MyAppComponents.Note = Note

// app.js 中取用
const Note = window.MyAppComponents.Note

方案2：开启Babel的ES Module支持，直接使用import语法 #

无需引入构建工具，通过配置Babel参数实现ES Module导入：

• 给index.html中的主入口script添加data-type="module"属性：

<script type='text/babel' data-type="module" src='js/APP/app.js'></script>

• 在Note.js中添加默认导出：

export default function Note({ note }){
    return <div>{ `Note: ${note}` }</div>;
}

• app.js中直接使用import导入，注意路径要补全.js后缀：

import Note from './components/Note.js'
function App() {
    return <Note note='Hello World!' />;
}

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

注意：该方案需要通过本地服务（比如VSCode的Live Server插件）打开页面，直接双击打开html会触发跨域限制导致加载失败

方案3：工程化改造（适合正式项目） #

如果是正式项目开发，建议使用Vite、Create React App等脚手架初始化标准React工程，内置模块化打包能力，原生支持ES Module导入导出语法，无需手动配置script引入依赖。

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