能否通过script标签加载远程JS文件并作为React组件使用？

1. 组件项目的打包配置：把组件暴露到全局 #

通过script引入的bundle文件默认不会把组件暴露给外部项目，你需要在组件项目的构建工具（比如Webpack/Vite）里配置，将组件挂载到全局window对象上：

用Webpack的话： #

在webpack.config.js的output字段里添加库配置：

module.exports = {
  // ...其他配置
  output: {
    // ...其他output配置
    library: 'MyRemoteComponents', // 全局对象的名称
    libraryTarget: 'window', // 挂载到window上
    globalObject: 'window'
  },
  // 把React设为外部依赖，避免重复打包
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM'
  }
};

用Vite的话： #

在vite.config.js里配置构建为库模式：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: 'src/ExampleComp.jsx', // 组件入口文件
      name: 'MyRemoteComponents', // 全局对象名称
      fileName: 'example-comp'
    },
    rollupOptions: {
      // 排除React，使用目标项目的React
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        }
      }
    }
  }
});

打包完成后，你的组件就会挂载到window.MyRemoteComponents.ExampleComp上。

2. 目标项目中使用组件 #

在目标项目里，先通过script标签引入打包好的bundle：

<script type="text/javascript" src="/path/to/script.js"></script>

然后在React代码里，从全局对象中取出组件再正常使用：

// 从全局window中获取组件
const ExampleComp = window.MyRemoteComponents.ExampleComp;

// 像普通React组件一样使用
function App() {
  const value = '测试值';
  return (
    <div>
      <ExampleComp var={value} />
    </div>
  );
}

注意事项 #

• React版本兼容：组件项目和目标项目的React版本要尽量一致，避免因版本差异导致渲染错误。
• 避免重复打包React：通过externals配置让组件项目复用目标项目的React，既减少bundle体积，也避免多实例冲突问题。
• 类型提示（可选）：如果使用TypeScript，可以给全局对象添加类型声明，提升开发体验。

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