expose-loader

npm node deps tests coverage chat size

expose-loader 允许暴露一个模块(整体或者部分)给全局对象(selfwindowglobal)。

想要获取有关兼容性的进一步提示,请查看官方文档中的 Shimming

快速开始

首先,你需要安装 expose-loader

npm install expose-loader --save-dev

(如果你在使用 webpack4,请安装 expose-loader@1 并按照 相应说明 进行配置。)

然后你可以用两种方法来用 expose-loader

内联

可以使用 | 或者 %20(空格)分隔 expose 中的 globalNamemoduleLocalNameoverride。 可以在这里获取文档和语法实例。

%20 是查询字符串中的空格,因为你不能在 URL 中使用空格

import $ from 'expose-loader?exposes=$,jQuery!jquery';
//
// 将 `jquery` 添加到全局对象中,其名称为 `$` 和 `jQuery`
import { concat } from 'expose-loader?exposes=_.concat!lodash/concat';
//
// 将 `lodash/concat` 添加到全局对象中,其名称为 `_.concat`
import {
  map,
  reduce,
} from 'expose-loader?exposes=_.map|map,_.reduce|reduce!underscore';
//
// 将 `underscore` 中的 `map` 和 `reduce` 方法分别添加到全局对象中,其名称为 `_.map` 和 `_.reduce`

使用配置文件

src/index.js

import $ from 'jquery';

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('jquery'),
        loader: 'expose-loader',
        options: {
          exposes: ['$', 'jQuery'],
        },
      },
      {
        test: require.resolve('underscore'),
        loader: 'expose-loader',
        options: {
          exposes: [
            '_.map|map',
            {
              globalName: '_.reduce',
              moduleLocalName: 'reduce',
            },
            {
              globalName: ['_', 'filter'],
              moduleLocalName: 'filter',
            },
          ],
        },
      },
    ],
  },
};

require.resolve 调用是一个 Node.js 函数(和 webpack 进程中的 require.resolve 无关)。 require.resolve 给出模块的绝对路径 ("/.../app/node_modules/jquery/dist/jquery.js")。 所以 expose 只应用于 jquery 模块。并且只会在 bundle 中使用时才会被暴露。

然后用你喜欢的方式运行 webpack

配置项

NameTypeDefaultDescription
exposes{String|Object|Array<String|Object>}undefinedList of exposes

exposes

类型:String|Object|Array<String|Object> 默认值:undefined

List of exposes.

String

允许用一个 string 来描述 expose。

Syntax

可以使用 | 或者 %20(空格)分隔 expose 中的 globalNamemoduleLocalNameoverride

字符串语法 - [[globalName] [moduleLocalName] [override]] 或者 [[globalName]|[moduleLocalName]|[override]],含义如下:

  • globalName - 全局对象的名称,比如 window.$ 用于浏览器环境(必填项
  • moduleLocalName - 模块的方法/变量/等的名称(该模块必须导出它)(可以省略
  • override - 允许覆盖在全局对象中存在的值(可以省略

如果 moduleLocalName 没有指定,它将整个模块暴露给全局对象,否则它只暴露 moduleLocalName 的值。

src/index.js

import _ from 'underscore';

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('jquery'),
        loader: 'expose-loader',
        options: {
          // 对于 `underscore`,它可以是 `_.map map` 或者 `_.map|map`
          exposes: 'jquery',
        },
      },
    ],
  },
};

Object

允许用一个对象来描述 expose。

globalName

类型:String|Array<String> 默认值:undefined

全局对象中的名字。(必填项)。

src/index.js

import _ from 'underscore';

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('underscore'),
        loader: 'expose-loader',
        options: {
          exposes: {
            // 可以是 `['_', 'filter']`
            globalName: '_.filter',
            moduleLocalName: 'filter',
          },
        },
      },
    ],
  },
};
moduleLocalName

类型:String 默认值:undefined

模块中的方法/变量/等的名称(该模块必须导出它)。 如果指定了 moduleLocalName,它只暴露 moduleLocalName 的值。

src/index.js

import _ from 'underscore';

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('underscore'),
        loader: 'expose-loader',
        options: {
          exposes: {
            globalName: '_.filter',
            moduleLocalName: 'filter',
          },
        },
      },
    ],
  },
};
override

类型:Boolean 默认值:false

默认情况下,loader 不会覆盖全局对象中的现有值,因为它是不安全的。 在 development 模式下,如果值已经出现在全局对象中则抛出一个错误。 但是你可以使用此选项配置 loader 以覆盖全局对象中的现有值。

为了强制覆盖已经存在在全局对象中的现有值,你可以设置 override 选项值为 true

src/index.js

import $ from 'jquery';

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('jquery'),
        loader: 'expose-loader',
        options: {
          exposes: {
            globalName: '$',
            override: true,
          },
        },
      },
    ],
  },
};

Array

src/index.js

import _ from 'underscore';

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('underscore'),
        loader: 'expose-loader',
        options: {
          exposes: [
            '_.map map',
            {
              globalName: '_.filter',
              moduleLocalName: 'filter',
            },
            {
              globalName: ['_', 'find'],
              moduleLocalName: 'myNameForFind',
            },
          ],
        },
      },
    ],
  },
};

它将 暴露 mapfilterfind 方法(名称为 myNameForFind) 给全局对象。

在浏览器中,这些方法可以在 windows._.map(..args)windows._.filter(...args)windows._.myNameForFind(...args) 下使用。

贡献

如果你还没有阅读,请花一点时间阅读我们的贡献指南。

CONTRIBUTING

License

MIT