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