How to load non module scripts into global scope in Webpack?

在Webpack中，您可能有时需要将非模块脚本（即不遵循CommonJS或ES6模块规范的脚本）加载到全局范围或window对象。这可以通过几种方法实现，以下是几个示例：

使用 expose-loader

Webpack的expose-loader允许您将模块暴露到全局对象上。例如，如果您想要将一个名为someLibrary的全局变量暴露到全局作用域，您可以在module.rules中配置如下：

javascript
// webpack.config.js

module.exports = {
  // ... 其他配置 ...
  module: {
    rules: [
      {
        test: require.resolve('path-to-non-module-script'),
        use: [{
          loader: 'expose-loader',
          options: {
            exposes: ['someLibrary'],
          },
        }],
      },
    ],
  },
  // ... 其他配置 ...
};

上面的配置将会把path-to-non-module-script指向的脚本暴露为全局的someLibrary对象。

使用 script-loader

script-loader执行脚本在全局上下文中，就像使用<script>标签一样。这意味着脚本可以影响全局范围。将script-loader添加到您的Webpack配置中的规则如下所示：

javascript
// webpack.config.js

module.exports = {
  // ... 其他配置 ...
  module: {
    rules: [
      {
        test: require.resolve('path-to-non-module-script'),
        use: [{
          loader: 'script-loader'
        }],
      },
    ],
  },
  // ... 其他配置 ...
};

使用 imports-loader

使用imports-loader可以将模块内部的this指向window对象，这在某些情况下可能有帮助，特别是当脚本期望其上下文是全局上下文时。

javascript
// webpack.config.js

module.exports = {
  // ... 其他配置 ...
  module: {
    rules: [
      {
        test: require.resolve('path-to-non-module-script'),
        use: [{
          loader: 'imports-loader',
          options: {
            wrapper: 'window',
          },
        }],
      },
    ],
  },
  // ... 其他配置 ...
};

手动挂载到 window

如果您不想使用loader，您可以在模块系统内手动将库或功能挂载到window对象。例如：

javascript
// 在您的入口脚本或任何合适的地方
import * as myNonModuleLibrary from 'path-to-non-module-script';

// 将库挂载到window对象上
window.myNonModuleLibrary = myNonModuleLibrary;

这种方式需要您明确知道您要挂载的对象或库，并手动执行挂载。

总结

加载非模块脚本到全局作用域是Webpack环境中的一个常见需求。根据您的特定情况，您可以选择使用expose-loader、script-loader、imports-loader或手动将脚本挂载到window对象上。每种方法都有其适用场景，应根据项目需求和脚本的特性来选择最合适的方式。

在 Webpack 中加载非模块脚本到全局范围，通常有几种方法可以实现。非模块脚本指的是那些不遵循CommonJS、AMD或ES6模块系统的脚本。下面是几种常见的方法：

1. expose-loader

expose-loader可以将某个模块暴露到全局对象（如window）上。如果你有一个非模块脚本需要暴露全局变量，可以使用这个loader。

例如，如果你要在全局范围引入jQuery（虽然jQuery是一个模块，但是这个方法对于非模块脚本也是适用的），你可以这样配置：

javascript
module: {
  rules: [
    {
      test: require.resolve('jquery'),
      use: [{
        loader: 'expose-loader',
        options: {
          exposes: ['$', 'jQuery'],
        },
      }],
    },
  ],
}

在这个配置中，expose-loader将$和jQuery暴露在全局作用域中，这意味着它们可以在全局范围内被访问。

2. 使用script-loader

script-loader可以在模块系统之外执行脚本。当你使用这个loader时，脚本将被添加到全局上下文中。

例如，如果你有一个legacy.js文件，其中包含了一些全局变量或函数，可以这样配置：

javascript
module: {
  rules: [
    {
      test: /legacy\.js$/,
      use: [{
        loader: 'script-loader',
      }],
    },
  ],
}

legacy.js文件里的代码将直接被执行，其内部声明的变量或者函数会暴露为全局变量。

3. 使用imports-loader

使用imports-loader可以给非模块脚本注入依赖。这在你需要将某个全局变量传递给一个非模块脚本时非常有用。

例如，你可以这样配置：

javascript
module: {
  rules: [
    {
      test: /some-library.js$/,
      use: [{
        loader: 'imports-loader',
        options: {
          type: 'commonjs',
          imports: 'single window=>global',
        },
      }],
    },
  ],
}

这样可以把全局的window对象注入到some-library.js作为global。

4. 直接在HTML文件中通过<script>标签引入

即使在使用Webpack的项目中，你仍然可以选择传统方式，即在HTML文件中使用<script>标签直接引入非模块脚本。这样的脚本会自然地在全局作用域中执行。

例如：

html
<script src="path/to/your/non-module-script.js"></script>

这个方法不涉及Webpack的配置，但是你需要手动管理这些脚本的加载顺序和依赖。

使用上述方法之一来加载非模块脚本时，一定要确保考虑到代码分割和懒加载的最佳实践，避免不必要地增大主bundle的大小。同时，对于全局变量的使用应当小心谨慎，以避免潜在的冲突和难以维护的问题。