您如何使用 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"
    },
    // ...
}

运行构建脚本将在 dist/libs.{hash}.js 中正确捆绑 jQuery 但通过脚本标签将其包含在网页中既不会公开 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;

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

How do you export globals in a bundle with esbuild?

javascript

browser

esbuild