291d24b8752e296629c6c1120a46170a316d05b95bac89127d71277fc7e4db46028a6646d447553e4e0bf6a78811f8d63b2aeec7fb278242a6e4b981ad16f4 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. [![npm][npm]][npm-url]
  2. [![deps][deps]][deps-url]
  3. [![chat][chat]][chat-url]
  4. <div align="center">
  5. <!-- replace with accurate logo e.g from https://worldvectorlogo.com/ -->
  6. <a href="https://github.com/webpack/webpack">
  7. <img width="200" height="200" vspace="" hspace="25"
  8. src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.svg">
  9. </a>
  10. <h1>Expose Loader</h1>
  11. <p>The expose loader adds modules to the global object. This is useful for debugging, or <a href="https://webpack.js.org/guides/shimming/">supporting libraries that depend on libraries in globals</a>.<p>
  12. </div>
  13. <h2 align="center">Install</h2>
  14. ```bash
  15. npm i expose-loader --save
  16. ```
  17. <h2 align="center"><a href="https://webpack.js.org/concepts/loaders">Usage</a></h2>
  18. **Note**: Modules must be `require()`'d within in your bundle, or they will not
  19. be exposed.
  20. ``` javascript
  21. require("expose-loader?libraryName!./file.js");
  22. // Exposes the exports for file.js to the global context on property "libraryName".
  23. // In web browsers, window.libraryName is then available.
  24. ```
  25. For example, let's say you want to expose jQuery as a global called `$`:
  26. ```js
  27. require("expose-loader?$!jquery");
  28. ```
  29. Thus, `window.$` is then available in the browser console.
  30. Alternately, you can set this in your config file:
  31. webpack v1 usage
  32. ```js
  33. module: {
  34. loaders: [
  35. { test: require.resolve("jquery"), loader: "expose-loader?$" }
  36. ]
  37. }
  38. ```
  39. webpack v2 usage
  40. ```js
  41. module: {
  42. rules: [{
  43. test: require.resolve('jquery'),
  44. use: [{
  45. loader: 'expose-loader',
  46. options: '$'
  47. }]
  48. }]
  49. }
  50. ```
  51. Let's say you also want to expose it as `window.jQuery` in addition to `window.$`.
  52. For multiple expose you can use `!` in loader string:
  53. webpack v1 usage
  54. ```js
  55. module: {
  56. loaders: [
  57. { test: require.resolve("jquery"), loader: "expose-loader?$!expose-loader?jQuery" },
  58. ]
  59. }
  60. ```
  61. webpack v2 usage
  62. ```js
  63. module: {
  64. rules: [{
  65. test: require.resolve('jquery'),
  66. use: [{
  67. loader: 'expose-loader',
  68. options: 'jQuery'
  69. },{
  70. loader: 'expose-loader',
  71. options: '$'
  72. }]
  73. }]
  74. }
  75. ```
  76. The [`require.resolve`](https://nodejs.org/api/all.html#modules_require_resolve)
  77. is a Node.js call (unrelated to `require.resolve` in webpack
  78. processing). `require.resolve` gives you the
  79. absolute path to the module (`"/.../app/node_modules/react/react.js"`). So the
  80. expose only applies to the react module. And it's only exposed when used in the
  81. bundle.
  82. <h2 align="center">Maintainers</h2>
  83. <table>
  84. <tbody>
  85. <tr>
  86. <td align="center">
  87. <img width="150" height="150"
  88. src="https://avatars3.githubusercontent.com/u/166921?v=3&s=150">
  89. </br>
  90. <a href="https://github.com/bebraw">Juho Vepsäläinen</a>
  91. </td>
  92. <td align="center">
  93. <img width="150" height="150"
  94. src="https://avatars2.githubusercontent.com/u/8420490?v=3&s=150">
  95. </br>
  96. <a href="https://github.com/d3viant0ne">Joshua Wiens</a>
  97. </td>
  98. <td align="center">
  99. <img width="150" height="150"
  100. src="https://avatars3.githubusercontent.com/u/533616?v=3&s=150">
  101. </br>
  102. <a href="https://github.com/SpaceK33z">Kees Kluskens</a>
  103. </td>
  104. <td align="center">
  105. <img width="150" height="150"
  106. src="https://avatars3.githubusercontent.com/u/3408176?v=3&s=150">
  107. </br>
  108. <a href="https://github.com/TheLarkInn">Sean Larkin</a>
  109. </td>
  110. </tr>
  111. <tbody>
  112. </table>
  113. [npm]: https://img.shields.io/npm/v/expose-loader.svg
  114. [npm-url]: https://npmjs.com/package/expose-loader
  115. [deps]: https://david-dm.org/webpack-contrib/expose-loader.svg
  116. [deps-url]: https://david-dm.org/webpack-contrib/expose-loader
  117. [chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
  118. [chat-url]: https://gitter.im/webpack/webpack