如何动态导入HTTP部署的Vite打包React组件库并复用宿主项目本地React

嘿，这个需求我刚好折腾过！想复用宿主本地的React、不用CDN，同时动态导入远程部署的组件库，核心思路就是让组件库不打包React，再通过宿主的import map把库对React的引用指向本地版本，一步步来：

第一步：配置组件库的Vite打包，外部化React #

首先得确保你的组件库在打包时不会把React打包进去，而是把它标记为外部依赖，让宿主提供。修改组件库的vite.config.js：

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

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: 'src/index.js', // 你的组件库入口文件
      formats: ['es'], // 必须用ES模块格式，才能配合import map工作
      fileName: 'my-lib' // 打包后的文件名，比如my-lib.js
    },
    rollupOptions: {
      // 把React相关依赖标记为外部依赖，不打包进库文件
      external: ['react', 'react/jsx-runtime'],
    }
  }
});

另外，记得在组件库的package.json里加上peerDependencies，明确告诉宿主需要提供这些依赖：

{
  "peerDependencies": {
    "react": "^18.0.0", // 尽量和宿主使用的版本对齐
    "react-dom": "^18.0.0"
  }
}

打包后把dist/my-lib.js部署到你的HTTP服务器上就行。

第二步：宿主项目配置Import Map，映射本地React #

接下来在宿主项目里，通过import map告诉浏览器：当遇到import 'react'或者import 'react/jsx-runtime'时，去加载本地安装的版本，而不是从远程获取。

修改宿主项目的index.html，在<head>里添加importmap：

<script type="importmap">
{
  "imports": {
    "react": "/@modules/react", // Vite开发环境下的内置别名，指向本地node_modules的React
    "react/jsx-runtime": "/@modules/react/jsx-runtime"
  }
}
</script>

如果是生产环境，Vite会把node_modules的模块打包成静态资源，这时候需要把路径改成打包后的实际路径，比如：

<script type="importmap">
{
  "imports": {
    "react": "/assets/react.xxxx.js",
    "react/jsx-runtime": "/assets/jsx-runtime.xxxx.js"
  }
}
</script>

（具体文件名可以看Vite打包后的dist目录）

第三步：动态导入远程组件库 #

现在宿主项目里就可以放心地动态导入远程库了，代码和你想的一样简单：

async function loadRemoteLib() {
  try {
    const myLib = await import("http://your-server.com/my-lib.js");
    // 比如使用库中的组件：
    const { MyButton } = myLib;
    // 接下来就像用本地组件一样用它就行
    console.log('远程组件库加载成功', MyButton);
  } catch (err) {
    console.error('加载远程库失败', err);
  }
}

// 比如在用户点击按钮时触发加载
document.getElementById('load-lib-btn').addEventListener('click', loadRemoteLib);

几个要注意的坑 #

1. 版本兼容：组件库和宿主项目的React版本要尽量一致，避免因为版本差异导致的渲染错误（比如React 17和18的JSX转换差异）。
2. CORS问题：如果你的组件库部署在不同域名的服务器上，要确保服务器配置了CORS允许宿主域名访问，否则浏览器会拦截请求。开发阶段也可以在宿主的vite.config.js里配置代理临时解决：

export default defineConfig({
  server: {
    proxy: {
      '/my-lib': {
        target: 'http://your-server.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/my-lib/, '')
      }
    }
  }
});

然后动态导入改成import("/my-lib/my-lib.js")。
3. Vite开发环境预构建：Vite会预构建node_modules里的依赖，用/@modules/别名能确保开发环境下正确解析本地React，不用手动处理路径。

内容来源于stack exchange