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:

  1. $ npm install expose-loader --save-dev

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

  1. // webpack.config.js
  2. module.exports = {
  3. module: {
  4. rules: [
  5. {
  6. test: /.js/,
  7. use: [
  8. {
  9. loader: `expose-loader`,
  10. options: {...options}
  11. }
  12. ]
  13. }
  14. ]
  15. }
  16. }

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

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

And run webpack via your preferred method.

Examples

例如,假设你要将 jQuery 暴露至全局并称为 $

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

然后,window.$ 就可以在浏览器控制台中使用。

或者,你可以通过配置文件来设置:

  1. // webpack.config.js
  2. module: {
  3. rules: [{
  4. test: require.resolve('jquery'),
  5. use: [{
  6. loader: 'expose-loader',
  7. options: '$'
  8. }]
  9. }]
  10. }

除了暴露为 window. $ 之外,假设你还想把它暴露为 window.jQuery。 对于多个暴露,你可以在 loader 字符串中使用 !

  1. // webpack.config.js
  2. module: {
  3. rules: [{
  4. test: require.resolve('jquery'),
  5. use: [{
  6. loader: 'expose-loader',
  7. options: 'jQuery'
  8. },{
  9. loader: 'expose-loader',
  10. options: '$'
  11. }]
  12. }]
  13. }

require.resolve 调用是一个 Node.js 函数 (与 webpack 处理流程中的 require.resolve 无关)。 require.resolve 用来获取模块的绝对路径 ("/.../app/node_modules/react/react.js")。 所以这里的暴露只会作用于 React 模块。 并且只在 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”>