Vite库模式下React应用如何获取脚本标签的查询参数？

问题背景 #

用React开发组件时，开发模式通过<script type="module" src="/src/main.jsx?exampleQuery=123"></script>引入，组件能通过import.meta.url正常获取查询参数。但Vite构建后会生成一个index.js，内容仅为静态导入带哈希的主文件（如import "./main-SOMEHASH.js"），导致原脚本的查询参数无法传递到主组件，手动修改index.js的导入语句或改成动态导入虽然能解决，但每次构建都要手动操作，效率极低。当前Vite配置如下：

build: {
  minify: "terser",
  lib: {
    entry: "./src/main.jsx",
    name: "Widget",
    fileName: "index",
    formats: ["es"],
  },
}

解决方案 #

方案一：直接从DOM的脚本标签获取参数（推荐） #

放弃通过import.meta.url传递参数，改为直接从页面中加载组件的<script>标签提取查询参数，这种方式不受构建后文件结构影响，更稳定。

修改src/main.jsx的参数获取逻辑：

// 获取当前加载组件的script标签
function getCurrentScript() {
  // 遍历所有module类型的脚本，匹配包含组件特征的src（比如包含index.js或main-前缀）
  const scripts = document.querySelectorAll('script[type="module"]');
  return Array.from(scripts).find(script => {
    return script.src.includes('index.js') || script.src.includes('main-');
  });
}

// 提取查询参数
const currentScript = getCurrentScript();
const urlParams = new URLSearchParams(currentScript ? new URL(currentScript.src).search : '');
const exampleQuery = urlParams.get('exampleQuery');

// 后续使用exampleQuery即可
console.log(exampleQuery); // 输出123

方案二：通过Vite插件自动修改构建后的index.js #

编写一个简单的Vite插件，在构建完成后自动将index.js的静态导入替换为动态导入逻辑，自动传递查询参数。

1. 在vite.config.js中添加插件：

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

export default defineConfig({
  plugins: [
    react(),
    // 自定义插件修改构建后的index.js
    {
      name: 'modify-index-import',
      generateBundle(options, bundle) {
        // 找到生成的index.js文件
        const indexFile = bundle['index.js'];
        if (indexFile) {
          // 替换原静态导入为动态导入代码
          const originalCode = indexFile.code;
          // 提取原导入的文件名（比如./main-SOMEHASH.js）
          const importMatch = originalCode.match(/import "(.*)";/);
          if (importMatch) {
            const mainFileName = importMatch[1];
            // 替换为动态导入逻辑
            indexFile.code = `
const urlParams = new URLSearchParams(new URL(import.meta.url).search);
const exampleQuery = urlParams.get("exampleQuery");
import("${mainFileName}${exampleQuery ? `?exampleQuery=${exampleQuery}` : ''}");
            `.trim();
          }
        }
      }
    }
  ],
  build: {
    minify: "terser",
    lib: {
      entry: "./src/main.jsx",
      name: "Widget",
      fileName: "index",
      formats: ["es"],
    },
  }
});

2. 构建后，index.js会自动生成为动态导入的代码，无需手动修改，组件依然可以通过import.meta.url获取参数。

注意事项 #

• 方案一的脚本匹配逻辑可以根据实际情况调整，比如如果组件有固定的文件名前缀或路径，可以更精准地匹配当前脚本。
• 方案二的插件代码需要根据Vite的版本调整，确保generateBundle钩子能正确访问到构建后的文件。

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