esbuild 构建油猴脚本

说起来，改一下运算符并不难，毕竟没有这些新运算符的时候，JavaScript 程序还不是一样的写。不过有新语法不能用是真的难受。如果仍然想用新语法，又想兼容更多浏览器，那就只有“编译”这个办法了。

Webpack 有点重，为这几行脚本建个工程，引入 Webpack 不太值得。想起之前听说过的轻量快速的 esbuild，决定试试。

果然，一行命令搞定：

npx esbuild src/add-tail.js --outfile=dist/add-tail.js --target=chrome77

?. 和 ?? 都被翻译成了跟 null 进行比较，虽然是用的 == 而不是 ===，但是这个结果还算满意。毕竟如果用 === 还需要跟 undefined 进行对比。

甚至，如果加上了 --bundle 参数，还可以对源文件进行拆分，使用 ESM 来分块编写代码，解耦和复用也不耽误了。

正准备完美收工，突然就发现了问题 —— 用注释写的脚本头信息不见了！虽然可以找个地方保存头信息，再手工补到转译结果之前，但是这样做累啊！在网上转悠了半天，确实没找到什么解决方案。

esbuild 虽然提供了 --banner 参数，但有两个问题：

1. 脚本头太长，还是多行，用 --banner 参数也不好加；

2. 如果需要同时转译多个脚本，没办法动态地为每个脚本修改 banner。

思来想去，只有利用 esbuild 的 API 接口，写段程序来转译，并在转译之后用程序把脚本头补进去。程序写在 build.js 中，基本的转译过程无非就是把命令行参数改为函数调用，倒也简单

const result = await build({
    logLevel: "info",
    outdir: distDir,
    entryPoints,
    bundle: true,
    target: ["chrome77"],
    metafile: true,
}).catch(() => process.exit(1));

const analyzeResult = await analyzeMetafile(result.metafile);
console.log(analyzeResult);

其中， distDir 配置为 "dist" 目录。而 entryPoints 则是用 Node 的 fs 接口在 "src" 目录下找出来的第一层脚本文件，有多少算多少，不找子目录（这样就可以把拆分的子模块放在子目录中去）：

const srcDir = path.resolve("./src");
const distDir = path.resolve("./dist");

const entryNames = (await fs.readdir(srcDir, { withFileTypes: true }))
    .filter(entry => entry.isFile() && /\.js$/.test(entry.name))
    .map(({ name }) => name);

const entryPoints = entryNames.map(filename => path.resolve(srcDir, filename));

只有输出分析结果这里费了点脑筋，命令行下是一个参数，这里需要调用另一个接口。

处理脚本头的思路很清晰：在 build() 之前，可以先读取源文件，把脚本头提取出来。在 build() 之后，读取输出文件，把脚本头加进去重新保存一次。

查了一下 esbuild 的文档，发现可以用它的插件机制来实现。在插件 onLoad 事件中需要读一次文件，在这里读了就不需要构建之前多读一次了。而 onEnd事件中可以先判断构建过程是否出错，在没出错的情况下注入脚本头就好。

const plugin = {
    name: "sf-script-plugin",
    setup(build) {
        build.headers = {};
        build.onLoad({ filter: /src[\\/][^/\\]+\.js$/ }, async (args) => {
            const contents = await fs.readFile(args.path, "utf8");
            build.headers[path.relative(srcDir, args.path)] = extractHeaders(contents);
            return { contents };
        });
        build.onEnd(result => {
            if (result.errors.length) { return; }
            Object.entries(build.headers)
                .forEach(([filename, header]) => insertHeader(filename, header));
        });
    }
};

function extractHeaders(contents) {
    return contents.match(/^.*?\/\/ ==\/UserScript==/s)?.[0];
}

async function insertHeader(filename, header) {
    const filePath = path.resolve(distDir, filename);
    const content = await fs.readFile(filePath, "utf8");
    fs.writeFile(filePath, [header, content].join("\n\n"));
}

当然，build 过程不要忘了加 plugins 参数

await build({
    ...
    plugins: [plugin],
}

在写 onLoad 的时候踩了点坑，主要就是 filter 要把 src 目录下的所有 .js 包含在内，但要排除掉所有子目录下的文件。

代码完成，尝试了一下，完美！

node ./build.js


点击左下角阅读原文，到 SegmentFault 思否社区 和文章作者展开更多互动和交流，扫描下方”二维码“或在“公众号后台“回复“ 入群 ”即可加入我们的技术交流群，收获更多的技术文章~

- END -