expose-loader

[![npm][npm]][npm-url] [![node][node]][node-url] [![deps][deps]][deps-url] [![tests][tests]][tests-url] [![chat][chat]][chat-url]

expose loader module for webpack

Requirements

This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.

Getting Started

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

$ npm install expose-loader --save-dev

Then add the loader to your webpack config. For example:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /.js/,
        use: [
          {
            loader: `expose-loader`,
            options: {...options}
          }
        ]
      }
    ]
  }
}

And then require the target file in your bundle's code:

// src/entry.js
require("expose-loader?libraryName!./thing.js");

And run webpack via your preferred method.

Examples

For example, let's say you want to expose jQuery as a global called $:

require("expose-loader?$!jquery");

Thus, window.$ is then available in the browser console.

Alternately, you can set this in your config file:

// webpack.config.js
module: {
  rules: [{
    test: require.resolve('jquery'),
    use: [{
      loader: 'expose-loader',
      options: '$'
    }]
  }]
}

Let's say you also want to expose it as window.jQuery in addition to window.$. For multiple expose you can use ! in loader string:

// webpack.config.js
module: {
  rules: [{
    test: require.resolve('jquery'),
    use: [{
      loader: 'expose-loader',
      options: 'jQuery'
    },{
      loader: 'expose-loader',
      options: '$'
    }]
  }]
}

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/react/react.js"). So the expose only applies to the react module. And it's only exposed when used in the bundle.

Contributing

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

CONTRIBUTING CONTRIBUTING" class="icon-link" href="#contributing">

License

MIT MIT" class="icon-link" href="#mit">