esbuild.config.mjs

/**
 * Import the modules.
 * 
 * 导入模块.
 */
import esbuild from "esbuild";
import esbuildPluginVue3 from "esbuild-plugin-vue3";
import builtinModules from "builtin-modules";
import process from "process";
import fs from "fs";

/**
 * Decide whether to bundle in a release mode.
 * 
 * - Running `npm run build` or `node esbuild.config.mjs release`: `true`.
 * - Running `npm run dev` or `node esbuild.config.mjs`: `false`.
 * 
 * 决定是否以发布模式进行打包.
 * 
 * - 运行 `npm run build` 或 `node esbuild.config.mjs release` 时: `true`.
 * - 运行 `npm run dev` 或 `node esbuild.config.mjs` 时: `false`.
 */
const release = (process.argv[2] === "release");

/**
 * The specified string that will be inserted at the beginning of the JavaScript output file.
 * 
 * 将被插入到 JavaScript 输出文件开头的指定字符串.
 */
const jsBanner = `/**
 * This is a bundled file generated by ESbuild.
 * If you want to view the source, please visit the GitHub repo of this plugin.
 * 
 * 这是一个由 ESbuild 生成的打包文件.
 * 如果您想查看源代码, 请访问这个插件的 GitHub 仓库.
 */
`;

/**
 * The specified string that will be inserted at the beginning of the CSS output file.
 * 
 * 将被插入到 CSS 输出文件开头的指定字符串.
 */
const cssBanner = `/* *************************************************************************

This is a bundled file generated by ESbuild.
It will be available in Obsidian when the plugin is enabled.
If you want to view the source, please visit the GitHub repo of this plugin.

这是一个由 ESbuild 生成的打包文件.
它会在 Obsidian 加载插件的时候一并进行加载.
如果您想查看源代码, 请访问这个插件的 GitHub 仓库.

************************************************************************* */
`;

/**
 * The ESbuild configs.
 * 
 * ESbuild 的配置.
 */
const esbuildContext = await esbuild.context({
    /**
     * Inline any imported dependencies into the file itself.
     * 
     * 将任何导入的依赖项嵌入到文件本身.
     */
    bundle: true,
    /**
     * Specify a list of entry files that need to be included in the bundling.
     * 
     * 指定一组需要纳入打包的入口文件.
     */
    entryPoints: ["src/main.ts"],
    /**
     * Specify a list of files or packages that need to be excluded from the bundling.
     * 
     * 指定一组需要排除打包的文件或包.
     */
    external: [
        "obsidian",
        "electron",
        "@codemirror/autocomplete",
        "@codemirror/collab",
        "@codemirror/commands",
        "@codemirror/language",
        "@codemirror/lint",
        "@codemirror/search",
        "@codemirror/state",
        "@codemirror/view",
        "@lezer/common",
        "@lezer/highlight",
        "@lezer/lr",
        ...builtinModules
    ],
    /**
     * Specify the JavaScript output file.
     * 
     * 指定 JavaScript 输出文件.
     */
    outfile: "main.js",
    /**
     * Insert the specified string at the beginning of the output file.
     * 
     * 在输出文件的开头插入指定的字符串.
     */
    banner: {
        js: jsBanner,
        css: cssBanner
    },
    /**
     * Specify the format of the JavaScript output file.
     * 
     * 指定 JavaScript 输出文件的格式.
     */
    format: "cjs",
    /**
     * Specify the language version of the generated JavaScript code.
     * 
     * 指定生成的 JavaScript 代码的语言版本.
     */
    target: "ESNext",
    /**
     * Specify the log level.
     * 
     * - `info`: Show warnings and errors.
     * - `debug`: Log everything from `info` and some additional messages that may help you debug a broken bundle.
     * 
     * 指定日志级别.
     * 
     * - `info`: 显示警告和错误信息.
     * - `debug`: 在 `info` 的基础上额外记录一些可以帮助您调试损坏的捆绑包的信息.
     */
    logLevel: release ? "info" : "debug",
    /**
     * Link the generated code to a sourcemap so that the browser can reconstruct the original code to make it easier to debug.
     * 
     * 将生成的代码链接到一个资源映射表, 使得浏览器能够按照资源映射表中打包前后的代码映射关系重建原始的代码, 这样可以更加容易地进行调试.
     */
    sourcemap: release ? false : "inline",
    /**
     * Remove the unreachable code automatically.
     * 
     * 自动移除无法访问的代码.
     */
    treeShaking: true,
    /**
     * Use the plugins.
     * 
     * 使用插件.
     */
    plugins: [esbuildPluginVue3()]
});

if (release) {
    /**
     * When bundling in a release mode, ESbuild will exit automatically after the bundling is completed.
     * Since ESbuild will automatically specify the name of the CSS output file to be the same as the name of the JavaScript output file, you must rename the CSS output file here.
     * 
     * 当以发布模式进行打包时, ESbuild 将在打包完成后自动退出.
     * 因为 ESbuild 会自动将 CSS 输出文件名指定为与 JavaScript 输出文件名相同, 所以您必须在此处重命名 CSS 输出文件.
     */
    await esbuildContext.rebuild();
    fs.rename("main.css", "styles.css", (err) => {
        if (err) {
            throw err;
        }
    });
    process.exit(0);
} else {
    /**
     * When bundling in a development mode, ESbuild will watch the code for hot updates.
     * Since ESbuild will automatically specify the name of the CSS output file to be the same as the name of the JavaScript output file, you must rename the CSS output file here.
     * 
     * 当以开发模式进行打包时, ESbuild 将监听代码进行热更新.
     * 因为 ESbuild 会自动将 CSS 输出文件名指定为与 JavaScript 输出文件名相同, 所以您必须在此处重命名 CSS 输出文件.
     */
    await esbuildContext.watch();
    fs.watchFile("main.css", () => {
        fs.access("main.css", fs.constants.F_OK, (err) => {
            if (!err) {
                fs.rename("main.css", "styles.css", (err) => {
                    if (err) {
                        throw err;
                    }
                });
            }
        });
    });
}

/**
 * See more configs and APIs at https://esbuild.github.io.
 * 
 * 从这里查看更多配置和 API: https://esbuild.github.io.
 */