javascript 使用Rollup、ES输出模式和gzip插件,动态导入引用JS文件而不是. gz.js文件

yqlxgs2m  于 2023-05-05  发布在  Java
关注(0)|答案(1)|浏览(146)

我使用Rollup将我的bundle输出为ES6模块:

output: {
            format: 'es',
            dir: `dist`,
            sourcemap: true,
        },

我还使用gzip插件来生成块的.gz.js版本沿着对应的.js版本:

plugins: [
...
                gzipPlugin({
                    fileName: (fileName) => {
                        const name = fileName.split('.');
                        name.splice(-1, 0, 'gz');
                        return name.join('.');
                    },
                }),
...
]

例如x1c 0d1x
但是,在输出的块及其gzip版本中,import语句引用的是.js文件,而不是.gz.js文件。

使用Rollup配置/插件,如何确保输出的文件包含正确.gz.js文件的导入引用?

sr4lhrrt

sr4lhrrt1#

我最终通过创建一个松散地基于rewrite-imports plugin的Rollup插件来解决这个问题。它在动态导入中将.js的所有示例替换为.gz.js

const MagicString = require('magic-string');

function rewriteGzipImports() {
    // match dynamic imports with .js but not .gz.js
    const patternDImport = new RegExp(/"\.\/([\w\-.]+)\.js(?<!\.gz\.js)"/, 'mg');
    return {
        name: 'rewriteImports',
        renderChunk(code) {
            const magicString = new MagicString(code);
            let hasReplacements = false;
            let match;
            let start;
            let end;
            let replacement;

            function replaceImport() {
                hasReplacements = true;
                start = match.index + 3;
                end = start + match[1].length;
                replacement = String(match[1].replace(match[1], match[1] + '.gz'));
                magicString.overwrite(start, end, replacement);
            }

            // work against dynamic imports
            while (match = patternDImport.exec(code)) {
                replaceImport();
            }

            if (!hasReplacements) {
                return null;
            }
            return { code: magicString.toString() };
        }
    };
}

相关问题