如何使用 esbuild 将全局变量导出到捆绑包中？

发布于 2025-01-09 03:42:51 字数 1380 浏览 3 评论 0原文

我正在测试用 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"]},
            },
        ],
    },
};

原文

I'm testing replacing Webpack 5 with esbuild. How do you export globals in a bundle? I have a single dependency, jQuery, but I will have more in the future. My esbuild script is:

// 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));

And the libs.js that indicates dependencies to bundle is:

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

And here's my package.json:

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

Running the build script will properly bundle jQuery in dist/libs.{hash}.js but including this in a webpage via a script tag exposes neither window.$ nor window.jQuery. How do I get these to export?

In Webpack 5, I would use expose-loader to achieve this:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

恰似旧人归 2025-01-16 03:42:51

为了让它与 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;

In order to get this to work with esbuild, you have to import an object from the module, and set the object on window. E.g.,

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

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

jQuery exports the jQuery object as the default value. To export it as a global you have to do:

// 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;

回复收藏 0 原文

~没有更多了~