expose-loader

The expose-loader loader allow you to expose module to global object (self, window and global).

Getting Started

To begin, you'll need to install expose-loader:

$ npm install expose-loader --save-dev

Then you can use the expose-loader using two approaches.

Inline

src/index.js

import $ from 'expose-loader?exposes[]=$&exposes[]=jQuery!jquery';
//
// Adds the `jquery` to the `global` object under the names `$` and `jQuery`

import { concat } from 'expose-loader?exposes=_.concat!lodash/concat';
//
// Adds the `lodash/concat` to the `global` object under the name `_.concat`

import {
  map,
  reduce,
} from 'expose-loader?exposes[]=_.map|map&exposes[]=_.reduce|reduce!underscore';
//
// Adds the `map` and `reduce` method from `underscore` to the `global` object under the name `_.map` and `_.reduce`

The space (%20) or | is the separator between import segments.

Description of string values can be found in the documentation below.

Using Configuration

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',
              localName: 'reduce',
            },
            {
              globalName: ['_', 'filter'],
              localName: 'filter',
            },
          ],
        },
      },
    ],
  },
};

The require.resolve call is a Node.js function (unrelated to require.resolve in webpack processing). require.resolve gives you the absolute path to the module ("/.../app/node_modules/jquery/dist/jquery.js"). So the expose only applies to the jquery module. And it's only exposed when used in the bundle.

And run webpack via your preferred method.

Options

exposes

Type: String|Object|Array Default: undefined

List of exposes.

String

Allows to use a string to describe an expose.

The space (%20) or | is the separator between import segments.

String syntax - [[globalName] [localName]], where:

globalName

Type: String|Array Default: undefined

Name of an exposed value in global object (required)

Possible syntax:

• root
• root.nested
• ["root", "nested"] - may be useful if the dot is part of the name
• [[name]] - expose module in global object under the name equal to the filename, for single.js it will be global.single.
• [myGlobal.[name]] - expose module in global.myGlobal under the name equal to the filename, for single.js it will be global.myGlobal.single.

localName

Type: String Default: undefined

Name of an exposed value

Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.

Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.

CONTRIBUTING

License

MIT