如何在 Webpack 中定义全局变量？

Question

我在 JS 引擎没有全局变量的环境中进行开发（例如 window、global、globalThis 或 this ， ETC。）。相反，所有通常可通过全局对象访问的变量，如 window.Math，只需使用 Math.

即可访问

所以为了让 Webpack 工作，我需要定义我自己的全局变量实现。我尝试谷歌搜索，但找不到此用例的任何答案。 Webpack 有一个 output.globalObject 的配置，但这似乎不适用于此。

Webpack 版本：5

Answer 1

我按如下方式解决了这个问题：

首先，我在项目的根目录中添加了一个名为 globals.js 的文件，其中包含我想要的全局对象

module.exports = {
    Math: Math,
    String: String,
    ....
};

然后在 webpack 配置中，我添加了以下插件来替换 core-js 中的全局模块（我使用 core-js 进行 polyfilling）：

const { NormalModuleReplacementPlugin } = require("webpack");
const path = require("path");
....
module.exports = {
  ....
  plugins: [
    new NormalModuleReplacementPlugin(
        /node_modules[\/]core-js[\/]internals[\/]global.js/,
        path.resolve(__dirname, "globals.js")
    ),
    ....
  ],
  ....
};

现在全局对象被替换为我在 globals.js

中定义的对象

如何在 Webpack 中定义全局变量？

How to define global variable in Webpack?

webpack