如何通过Vite打包从esm.sh加载的远程模块？

方案1：使用vite-plugin-remote-assets插件 #

这是专门处理远程资源打包的Vite插件，能自动抓取并打包指定前缀的远程模块：

• 安装插件：

  npm install vite-plugin-remote-assets --save-dev
  

• 在vite.config.js中配置：

  import { defineConfig } from 'vite'
  import remoteAssets from 'vite-plugin-remote-assets'
  
  export default defineConfig({
    plugins: [
      remoteAssets({
        include: ['https://esm.sh/**'] // 精准匹配esm.sh的远程模块
      })
    ]
  })
  

• 执行构建后，esm.sh的模块会被下载到本地缓存并打包进最终产物，彻底消除运行时的远程请求。

方案2：自定义Vite解析规则拦截远程模块 #

通过Vite的resolve配置和钩子，手动拦截远程模块请求并转为本地缓存：

• 在vite.config.js中添加自定义逻辑：

  import { defineConfig } from 'vite'
  import fs from 'fs'
  import path from 'path'
  import fetch from 'node-fetch'
  
  // 本地缓存目录
  const CACHE_DIR = path.resolve(__dirname, '.remote-cache')
  
  export default defineConfig({
    async resolveId(id) {
      // 匹配esm.sh的远程模块
      if (id.startsWith('https://esm.sh/')) {
        const moduleName = id.replace('https://esm.sh/', '')
        const cachePath = path.join(CACHE_DIR, `${moduleName.replace('/', '-')}.js`)
        
        // 缓存不存在则下载
        if (!fs.existsSync(cachePath)) {
          const res = await fetch(id)
          const code = await res.text()
          fs.mkdirSync(CACHE_DIR, { recursive: true })
          fs.writeFileSync(cachePath, code)
        }
        return cachePath
      }
    }
  })
  

• 这种方式灵活性更高，可自定义缓存策略和版本控制。

方案3：手动下载远程模块到本地 #

如果不想依赖插件，可手动将需要的esm.sh模块下载到项目本地目录（比如vendor），然后修改import路径：

• 原代码：import { x } from 'https://esm.sh/y'
• 修改后：import { x } from './vendor/y.js'
• 优势是完全可控，适合依赖较少的场景，但需要手动维护模块版本和更新。

注意：无论使用哪种方案，建议在esm.sh的URL中指定具体版本（比如https://esm.sh/y@1.2.3），避免构建时拉取不同版本导致产物不一致。

内容的提问来源于stack exchange，提问作者Eugene Ghanizadeh Khoub