如何获取Rollup打包后模块文件的生产环境URL？

针对你需要手动获取模块打包后生产URL的场景，以下是几个可行的解决方案：

方案1：自定义Rollup/Vite插件替换解析函数 #

编写一个简单插件，在编译阶段识别自定义的rollupResolve调用，替换为实际的打包后URL。

配置示例（Rollup/Vite通用） #

// rollup.config.js 或 vite.config.js
export default {
  plugins: [
    {
      name: 'resolve-packaged-url',
      transform(code, moduleId) {
        // 匹配代码中的 rollupResolve('./path') 调用
        return code.replace(/rollupResolve\(['"](.*?)['"]\)/g, (match, relativePath) => {
          // 解析模块的绝对路径
          const resolved = this.resolve(relativePath, moduleId);
          if (!resolved) return match;

          // 获取模块的输出文件名（含哈希）
          const moduleInfo = this.getModuleInfo(resolved.id);
          if (!moduleInfo?.fileName) return match;

          // 拼接生产环境URL（根据你的output配置调整路径前缀）
          const baseUrl = this.options.output[0].dir || '';
          return `"${baseUrl}/${moduleInfo.fileName}"`;
        });
      }
    }
  ],
  output: {
    dir: 'dist/assets/js',
    entryFileNames: '[name]-[hash].js',
    chunkFileNames: '[name]-[hash].js'
  }
};

关键说明 #

• 插件会自动替换代码中rollupResolve('./src/module.js')为打包后的完整URL
• 需确保目标模块不会被内联：可通过output.inlineDynamicImports: false全局禁用内联，或用manualChunks强制将目标模块单独打包

方案2：Vite专属——使用?url后缀+手动分块 #

Vite内置支持通过?url后缀获取资源URL，结合手动分块避免内联。

步骤1：配置强制分块 #

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        // 强制将module.js单独打包为一个chunk
        manualChunks: {
          'target-module': ['./src/module.js']
        },
        chunkFileNames: 'assets/js/[name]-[hash].js'
      }
    }
  }
};

步骤2：在代码中获取URL #

// 动态导入并获取打包后URL
const moduleUrl = await import('./src/module.js?url');
doSomethingWithUrl(moduleUrl.default);

关键说明 #

• ?url是Vite的特殊后缀，会直接返回模块的打包后URL而非模块内容
• 手动分块确保目标模块不会被内联，保证URL指向独立的打包文件

方案3：虚拟模块提供URL解析能力 #

创建一个虚拟模块，在构建阶段预先生成目标模块的URL，供业务代码调用。

配置示例 #

// rollup.config.js 或 vite.config.js
export default {
  plugins: [
    {
      name: 'provide-url-resolver',
      // 解析虚拟模块标识
      resolveId(source) {
        if (source === 'packaged-url-resolver') {
          return '\0packaged-url-resolver'; // 特殊标识避免冲突
        }
      },
      // 加载虚拟模块内容
      async load(id) {
        if (id === '\0packaged-url-resolver') {
          // 解析目标模块的绝对路径
          const resolved = await this.resolve('./src/module.js', process.cwd());
          const moduleInfo = this.getModuleInfo(resolved.id);
          const outputUrl = `${this.options.output[0].dir}/${moduleInfo.fileName}`;

          // 返回自定义解析函数的代码
          return `export default function rollupResolve(path) {
            switch(path) {
              case './src/module.js': return '${outputUrl}';
              // 可扩展支持更多模块路径
              default: throw new Error('Unsupported path: ' + path);
            }
          }`;
        }
      }
    }
  ]
};

步骤2：在代码中使用 #

import rollupResolve from 'packaged-url-resolver';
const url = rollupResolve('./src/module.js');
doSomethingWithUrl(url);

关键说明 #

• 虚拟模块在构建阶段生成，直接返回预计算好的生产URL
• 适合需要固定解析特定模块的场景，无需在业务代码中处理动态逻辑

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