javascript - 您如何使用 esbuild 捆绑导出全局变量？

Question

我正在测试用 esbuild 替换 Webpack 5。你如何在一个包中导出全局变量？我只有一个依赖项 jQuery，但将来我会有更多。我的 esbuild 脚本是:

// build.js
const esbuild = require('esbuild');

esbuild
    .build({
        bundle: true,
        entryNames: "[dir]/[name].[hash]",
        entryPoints: {
            libs: "src/libs.js",
        },
        outbase: "src",
        outdir: "dist",
        platform: 'browser',
    })
    .catch(() => process.exit(1));

libs.js 指示要捆绑的依赖项是:

// src/libs.js
import 'jquery';

这是我的package.json:

{
    // ...
    "dependencies": {
        "jquery": "~3.6.0"
    },
    "devDependencies": {
        "esbuild": "^0.14.23"
    },
    // ...
}

运行构建脚本会将 jQuery 正确地捆绑在 dist/libs.{hash}.js 中，但是通过脚本标签将其包含在网页中不会暴露任何 window.$也不是 window.jQuery。如何导出这些内容？

---

在 Webpack 5 中，我会使用 expose-loader 来实现这一点:

module.exports = {
    module: {
        rules: [
            {
                test: require.resolve('jquery'),
                loader: 'expose-loader',
                options: {exposes: ["$", "jQuery"]},
            },
        ],
    },
};

Answer 1

为了让它与 esbuild 一起工作，您必须从模块中导入一个对象，并在 window 上设置该对象。例如，

// Import module.
import * as module from 'module';

// Export module on window.
window.module = module;

jQuery 导出 jQuery 对象作为默认值。要将其作为全局导出，您必须执行以下操作:

// Import jQuery.
import {default as jQuery} from 'jquery';

// Which can be shortened to.
import jQuery from 'jquery';

// Then export jQuery.
window.$ = jQuery;
window.jQuery = jQuery;