如何通过<script>标签引入React组件？附远程JS打包疑问

嘿，作为React新手能想到这种在纯HTML里复用组件的方式真的很棒！完全可以实现你想要的效果，我来一步步给你讲清楚：

一、能不能通过<script>标签引入自己的React组件？ #

当然可以！这和React官网提到的「把React添加到现有网站」的思路完全一致，甚至可以直接扩展到引入你自己的远程组件文件。

具体实现步骤 #

1. 先引入React基础依赖（你的组件需要它们才能运行）
   首先在HTML里通过CDN引入React和ReactDOM的核心脚本，如果你的组件用了JSX语法，还要引入Babel来实时转换JSX：

   <!-- React核心库 -->
   <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
   <!-- ReactDOM渲染库 -->
   <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
   <!-- 转换JSX语法的Babel脚本 -->
   <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
   

2. 引入你的远程组件文件
   把你写好的React组件保存为JS文件，上传到服务器后，用<script>标签引入。注意如果组件里用了JSX，要给标签加上type="text/babel"：

   <!-- 引入你的远程组件 -->
   <script type="text/babel" src="https://your-server.com/path/to/your-component.js"></script>
   

3. 组件示例（your-component.js内容）
   你的组件文件里需要定义组件，并且把它渲染到页面的某个节点上：

   // 定义你的React组件
   function GreetingButton() {
     return <button>Hello React!</button>;
   }
   
   // 找到页面上的挂载节点，渲染组件
   const rootNode = document.getElementById('react-root');
   const root = ReactDOM.createRoot(rootNode);
   root.render(<GreetingButton />);
   

4. 页面挂载节点
   别忘了在HTML里加一个用来渲染React组件的容器：

   <div id="react-root"></div>
   

二、如何生成包含依赖的远程JS文件？ #

如果你不想让用户额外引入React、ReactDOM这些依赖，或者希望组件更独立，可以用构建工具把组件和依赖打包成一个单独的JS文件，这样只需要引入这一个文件就行。这里推荐两种方式：

方式1：快速测试用——手动整理+CDN依赖 #

如果你的组件很简单，依赖很少，可以直接把组件代码单独写成JS文件，依赖通过CDN引入（就像上面的例子）。这种方式适合快速验证，不需要复杂的构建流程，但依赖多了会显得繁琐。

方式2：生产环境推荐——用构建工具打包成UMD/IIFE文件 #

用Vite、Webpack这类构建工具，可以把你的组件和需要的依赖（比如React、ReactDOM）打包成一个独立的、可以通过<script>直接引入的文件。这里以Vite为例：

1. 初始化一个React项目：

   npm create vite@latest my-react-component -- --template react
   cd my-react-component
   npm install
   

2. 编写你的组件，比如在src/MyComponent.jsx里：

   export default function MyComponent() {
     return <div>我是打包后的React组件！</div>;
   }
   

3. 修改vite.config.js，配置打包为UMD格式（这种格式支持通过<script>标签引入）：

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   
   export default defineConfig({
     plugins: [react()],
     build: {
       lib: {
         entry: 'src/MyComponent.jsx', // 组件入口文件
         name: 'MyComponent', // 全局变量名，引入后可以直接用
         formats: ['umd'], // 打包格式选UMD
         fileName: () => 'my-component.js' // 输出的文件名
       },
       rollupOptions: {
         // 如果你想把React和ReactDOM一起打包进去，就把external设为空数组
         // 如果不想打包，让用户自己引入CDN，就保留下面的配置
         external: ['react', 'react-dom'],
         output: {
           // 定义全局变量映射，打包后会用全局的React/ReactDOM
           globals: {
             react: 'React',
             'react-dom': 'ReactDOM'
           }
         }
       }
     }
   });
   

4. 执行打包命令：

   npm run build
   

   打包完成后，dist文件夹里的my-component.js就是你要的远程JS文件，把它上传到服务器就行。
5. 引入打包后的组件：
   • 如果打包时包含了React/ReactDOM：

     <div id="react-root"></div>
     <script src="https://your-server.com/dist/my-component.js"></script>
     <script>
       const root = ReactDOM.createRoot(document.getElementById('react-root'));
       root.render(React.createElement(MyComponent));
     </script>
     

   • 如果没打包依赖，还是需要先引入React的CDN脚本，再引入你的组件文件。

总结 #

完全可行！简单场景用CDN+单独组件文件就能快速实现，生产环境推荐用构建工具打包成独立文件，这样组件更稳定，加载效率也更高。

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