ES6 添加到模块导入版本哈希

Question

我对 gulp 和 es6 模块导入有一些问题，我需要在导入中添加哈希以实现更好的版本控制，并从中添加前缀：

import { someVar } from "./someFile.js";

对此：

import { someVar } from "./someFile.js?v=1.0.0";

有什么方法可以用 gulp 来自动化它吗？ 或者也许其他一些解决方案也可以工作。 现在我更改文件夹的名称以防止缓存。 如果它也适用于动态导入，那就最好了

Answer 1

在构建结束时，用正则表达式替换输出目录中的所有导入。这是一个 esbuild 示例。它不适用于任何项目，具体取决于您是否使用打字稿等。

const watchOnEnd = {
    name: 'watch-on-end-plugin',
    setup(build) {
        build.onEnd(result => {
            rewriteImports(result)
        })
    }
}
const buildConfig = {
    plugins: [watchOnEnd],
    ...
}
await esbuild.build(buildConfig)

function rewriteImports(newContents, metafile) {
    for (const key of Object.keys(metafile.outputs).filter(x => x.endsWith(".js"))) {
        const filePath = "./" + key;
        const importRegex = isMinified ?
            /import\s*(?:(?:(\{[^}]*\})\s*from\s*)?(\"[^"]*\")\s*);?/g :
            /import\s+(?:(?:({[^}]*})\s+from\s+)?("[^"]*")\s*);?/g;
        let loc = importPath;
        newContents = newContents.replace(importRegex, (match, importContent, importPath) => {
            const metafileEntry = Object.entries(metafile.outputs).filter(x => x[1].entryPoint === loc)
            let importPathWithVersion = metafileEntry[0] ? metafileEntry[0][0] : null;
            if (!importPathWithVerison){
                console.err("Cannot find file from manifest: " + loc)
            }
            return importPathWithVersion
        });
        fs.writeFileSync(filePath, newContents, 'utf8', fileWriteErrHandler);
    }
}