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;