1 | <div align="center">
|
2 | <a href="https://github.com/webpack/webpack">
|
3 | <img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg">
|
4 | </a>
|
5 | </div>
|
6 |
|
7 | [![npm][npm]][npm-url]
|
8 | [![node][node]][node-url]
|
9 | [![tests][tests]][tests-url]
|
10 | [![coverage][cover]][cover-url]
|
11 | [![discussion][discussion]][discussion-url]
|
12 | [![size][size]][size-url]
|
13 |
|
14 | # exports-loader
|
15 |
|
16 | Allow to setup exports `module.exports`/`export` for source files.
|
17 |
|
18 | Useful when a source file does not contain exports or something does not export.
|
19 |
|
20 | For further hints on compatibility issues, check out [Shimming](https://webpack.js.org/guides/shimming/) of the official docs.
|
21 |
|
22 | > **Warning**
|
23 | >
|
24 | > By default loader generate ES module named syntax.
|
25 |
|
26 | > **Warning**
|
27 | >
|
28 | > Be careful, existing exports (`export`/`module.exports`/`exports`) in the original code and exporting new values can cause a failure.
|
29 |
|
30 | ## Getting Started
|
31 |
|
32 | To begin, you'll need to install `exports-loader`:
|
33 |
|
34 | ```console
|
35 | npm install exports-loader --save-dev
|
36 | ```
|
37 |
|
38 | or
|
39 |
|
40 | ```console
|
41 | yarn add -D exports-loader
|
42 | ```
|
43 |
|
44 | or
|
45 |
|
46 | ```console
|
47 | pnpm add -D exports-loader
|
48 | ```
|
49 |
|
50 | ### Inline
|
51 |
|
52 | The `|` or `%20` (space) allow to separate the `syntax`, `name` and `alias` of export.
|
53 | The documentation and syntax examples can be read [here](#syntax).
|
54 |
|
55 | > **Warning**
|
56 | >
|
57 | > `%20` is space in a query string, because you can't use spaces in URLs
|
58 |
|
59 | Then add the loader to the desired `import` statement or `require` calls. For example:
|
60 |
|
61 | ```js
|
62 | import { myFunction } from "exports-loader?exports=myFunction!./file.js";
|
63 | // Adds the following code to the file's source:
|
64 | //
|
65 | // ...
|
66 | // Code
|
67 | // ...
|
68 | //
|
69 | // export { myFunction }
|
70 |
|
71 | myFunction("Hello world");
|
72 | ```
|
73 |
|
74 | ```js
|
75 | import {
|
76 | myVariable,
|
77 | myFunction,
|
78 | } from "exports-loader?exports=myVariable,myFunction!./file.js";
|
79 | // Adds the following code to the file's source:
|
80 | //
|
81 | // ...
|
82 | // Code
|
83 | // ...
|
84 | //
|
85 | // export { myVariable, myFunction };
|
86 |
|
87 | const newVariable = myVariable + "!!!";
|
88 |
|
89 | console.log(newVariable);
|
90 |
|
91 | myFunction("Hello world");
|
92 | ```
|
93 |
|
94 | ```js
|
95 | const {
|
96 | myFunction,
|
97 | } = require("exports-loader?type=commonjs&exports=myFunction!./file.js");
|
98 | // Adds the following code to the file's source:
|
99 | //
|
100 | // ...
|
101 | // Code
|
102 | // ...
|
103 | //
|
104 | // module.exports = { myFunction }
|
105 |
|
106 | myFunction("Hello world");
|
107 | ```
|
108 |
|
109 | ```js
|
110 | // Alternative syntax:
|
111 | // import myFunction from 'exports-loader?exports=default%20myFunction!./file.js';
|
112 | import myFunction from "exports-loader?exports=default|myFunction!./file.js";
|
113 | // `%20` is space in a query string, equivalently `default myFunction`
|
114 | // Adds the following code to the file's source:
|
115 | //
|
116 | // ...
|
117 | // Code
|
118 | // ...
|
119 | //
|
120 | // exports default myFunction;
|
121 |
|
122 | myFunction("Hello world");
|
123 | ```
|
124 |
|
125 | ```js
|
126 | const myFunction = require("exports-loader?type=commonjs&exports=single|myFunction!./file.js");
|
127 | // `|` is separator in a query string, equivalently `single|myFunction`
|
128 | // Adds the following code to the file's source:
|
129 | //
|
130 | // ...
|
131 | // Code
|
132 | // ...
|
133 | //
|
134 | // module.exports = myFunction;
|
135 |
|
136 | myFunction("Hello world");
|
137 | ```
|
138 |
|
139 | ```js
|
140 | import { myFunctionAlias } from "exports-loader?exports=named|myFunction|myFunctionAlias!./file.js";
|
141 | // `|` is separator in a query string, equivalently `named|myFunction|myFunctionAlias`
|
142 | // Adds the following code to the file's source:
|
143 | //
|
144 | // ...
|
145 | // Code
|
146 | // ...
|
147 | //
|
148 | // exports { myFunction as myFunctionAlias };
|
149 |
|
150 | myFunctionAlias("Hello world");
|
151 | ```
|
152 |
|
153 | Description of string values can be found in the documentation below.
|
154 |
|
155 | ### Using Configuration
|
156 |
|
157 | **webpack.config.js**
|
158 |
|
159 | ```js
|
160 | module.exports = {
|
161 | module: {
|
162 | rules: [
|
163 | {
|
164 | // You can use `regexp`
|
165 | // test: /vendor\.js/$
|
166 | test: require.resolve("./path/to/vendor.js"),
|
167 | loader: "exports-loader",
|
168 | options: {
|
169 | exports: "myFunction",
|
170 | },
|
171 | },
|
172 | ],
|
173 | },
|
174 | };
|
175 | ```
|
176 |
|
177 | And run `webpack` via your preferred method.
|
178 |
|
179 | ## Options
|
180 |
|
181 | | Name | Type | Default | Description |
|
182 | | :-----------------------: | :---------------------------------------: | :---------: | :-------------------------- |
|
183 | | **[`type`](#type)** | `{String}` | `module` | Format of generated exports |
|
184 | | **[`exports`](#exports)** | `{String\|Object\|Array<String\|Object>}` | `undefined` | List of exports |
|
185 |
|
186 | ### `type`
|
187 |
|
188 | Type: `String`
|
189 | Default: `module`
|
190 |
|
191 | Format of generated exports.
|
192 |
|
193 | Possible values - `commonjs` (CommonJS module syntax) and `module` (ES module syntax).
|
194 |
|
195 | #### `commonjs`
|
196 |
|
197 | **webpack.config.js**
|
198 |
|
199 | ```js
|
200 | module.exports = {
|
201 | module: {
|
202 | rules: [
|
203 | {
|
204 | test: require.resolve("./path/to/vendor.js"),
|
205 | loader: "exports-loader",
|
206 | options: {
|
207 | type: "commonjs",
|
208 | exports: "Foo",
|
209 | },
|
210 | },
|
211 | ],
|
212 | },
|
213 | };
|
214 | ```
|
215 |
|
216 | Generate output:
|
217 |
|
218 | ```js
|
219 | // ...
|
220 | // Code
|
221 | // ...
|
222 |
|
223 | module.exports = { Foo };
|
224 | ```
|
225 |
|
226 | #### `module`
|
227 |
|
228 | **webpack.config.js**
|
229 |
|
230 | ```js
|
231 | module.exports = {
|
232 | module: {
|
233 | rules: [
|
234 | {
|
235 | test: require.resolve("./path/to/vendor.js"),
|
236 | loader: "exports-loader",
|
237 | options: {
|
238 | type: "module",
|
239 | exports: "Foo",
|
240 | },
|
241 | },
|
242 | ],
|
243 | },
|
244 | };
|
245 | ```
|
246 |
|
247 | Generate output:
|
248 |
|
249 | ```js
|
250 | // ...
|
251 | // Code
|
252 | // ...
|
253 |
|
254 | export { Foo };
|
255 | ```
|
256 |
|
257 | ### `exports`
|
258 |
|
259 | Type: `String|Array`
|
260 | Default: `undefined`
|
261 |
|
262 | List of exports.
|
263 |
|
264 | #### `String`
|
265 |
|
266 | Allows to use a string to describe an export.
|
267 |
|
268 | ##### `Syntax`
|
269 |
|
270 | The `|` or `%20` (space) allow to separate the `syntax`, `name` and `alias` of export.
|
271 |
|
272 | String syntax - `[[syntax] [name] [alias]]` or `[[syntax]|[name]|[alias]]`, where:
|
273 |
|
274 | - `[syntax]` (**may be omitted**) -
|
275 |
|
276 | - if `type` is `module`- can be `default` and `named`,
|
277 | - if `type` is `commonjs`- can be `single` and `multiple`
|
278 |
|
279 | - `[name]` - name of an exported value (**required**)
|
280 | - `[alias]` - alias of an exported value (**may be omitted**)
|
281 |
|
282 | Examples:
|
283 |
|
284 | - `[Foo]` - generates `export { Foo };`.
|
285 | - `[default Foo]` - generates `export default Foo;`.
|
286 | - `[named Foo]` - generates `export { Foo };`.
|
287 | - `[named Foo FooA]` - generates `export { Foo as FooA };`.
|
288 | - `[single Foo]` - generates `module.exports = Foo;`.
|
289 | - `[multiple Foo]` - generates `module.exports = { Foo };`.
|
290 | - `[multiple Foo FooA]` - generates `module.exports = { 'FooA': Foo };`.
|
291 | - `[named [name] [name]Alias]` - generates ES module named exports and exports a value equal to the filename under other name., for `single.js` it will be `single` and `singleAlias`, generates `export { single as singleAlias };`.
|
292 |
|
293 | > **Warning**
|
294 | >
|
295 | > You need to set `type: "commonjs"` to use `single` or `multiple` syntaxes.
|
296 |
|
297 | > **Warning**
|
298 | >
|
299 | > Aliases can't be used together with `default` or `single` syntaxes.
|
300 |
|
301 | ##### Examples
|
302 |
|
303 | ###### ES Module Default Export
|
304 |
|
305 | **webpack.config.js**
|
306 |
|
307 | ```js
|
308 | module.exports = {
|
309 | module: {
|
310 | rules: [
|
311 | {
|
312 | test: require.resolve("./path/to/vendor.js"),
|
313 | loader: "exports-loader",
|
314 | options: {
|
315 | exports: "default Foo",
|
316 | },
|
317 | },
|
318 | ],
|
319 | },
|
320 | };
|
321 | ```
|
322 |
|
323 | Generate output:
|
324 |
|
325 | ```js
|
326 | // ...
|
327 | // Code
|
328 | // ...
|
329 |
|
330 | export default Foo;
|
331 | ```
|
332 |
|
333 | ###### ES Module Named Exports
|
334 |
|
335 | **webpack.config.js**
|
336 |
|
337 | ```js
|
338 | module.exports = {
|
339 | module: {
|
340 | rules: [
|
341 | {
|
342 | test: require.resolve("./path/to/vendor.js"),
|
343 | loader: "exports-loader",
|
344 | options: {
|
345 | exports: "named Foo FooA",
|
346 | },
|
347 | },
|
348 | ],
|
349 | },
|
350 | };
|
351 | ```
|
352 |
|
353 | Generate output:
|
354 |
|
355 | ```js
|
356 | // ...
|
357 | // Code
|
358 | // ...
|
359 |
|
360 | export { Foo as FooA };
|
361 | ```
|
362 |
|
363 | ###### CommonJS Single Export
|
364 |
|
365 | **webpack.config.js**
|
366 |
|
367 | ```js
|
368 | module.exports = {
|
369 | module: {
|
370 | rules: [
|
371 | {
|
372 | test: require.resolve("./path/to/vendor.js"),
|
373 | loader: "exports-loader",
|
374 | options: {
|
375 | type: "commonjs",
|
376 | exports: "single Foo",
|
377 | },
|
378 | },
|
379 | ],
|
380 | },
|
381 | };
|
382 | ```
|
383 |
|
384 | Generate output:
|
385 |
|
386 | ```js
|
387 | // ...
|
388 | // Code
|
389 | // ...
|
390 |
|
391 | module.exports = Foo;
|
392 | ```
|
393 |
|
394 | ###### CommonJS Multiple Exports
|
395 |
|
396 | **webpack.config.js**
|
397 |
|
398 | ```js
|
399 | module.exports = {
|
400 | module: {
|
401 | rules: [
|
402 | {
|
403 | test: require.resolve("./path/to/vendor.js"),
|
404 | loader: "exports-loader",
|
405 | options: {
|
406 | type: "commonjs",
|
407 | exports: "multiple Foo FooA",
|
408 | },
|
409 | },
|
410 | ],
|
411 | },
|
412 | };
|
413 | ```
|
414 |
|
415 | Generate output:
|
416 |
|
417 | ```js
|
418 | // ...
|
419 | // Code
|
420 | // ...
|
421 |
|
422 | module.exports = { FooA: Foo };
|
423 | ```
|
424 |
|
425 | #### `Object`
|
426 |
|
427 | Allows to use an object to describe an export.
|
428 |
|
429 | Properties:
|
430 |
|
431 | - `syntax` - can be `default` or `named` for the `module` type (`ES modules` module format), and `single` or `multiple` for the `commonjs` type (`CommonJS` module format) (**may be omitted**)
|
432 | - `name` - name of an exported value (**required**)
|
433 | - `alias` - alias of an exported value (**may be omitted**)
|
434 |
|
435 | ##### Examples
|
436 |
|
437 | ###### ES Module Default Export
|
438 |
|
439 | **webpack.config.js**
|
440 |
|
441 | ```js
|
442 | module.exports = {
|
443 | module: {
|
444 | rules: [
|
445 | {
|
446 | test: require.resolve("./path/to/vendor.js"),
|
447 | loader: "exports-loader",
|
448 | options: {
|
449 | exports: {
|
450 | syntax: "default",
|
451 | name: "Foo",
|
452 | },
|
453 | },
|
454 | },
|
455 | ],
|
456 | },
|
457 | };
|
458 | ```
|
459 |
|
460 | Generate output:
|
461 |
|
462 | ```js
|
463 | // ...
|
464 | // Code
|
465 | // ...
|
466 |
|
467 | export default Foo;
|
468 | ```
|
469 |
|
470 | ###### ES Module Named Exports
|
471 |
|
472 | **webpack.config.js**
|
473 |
|
474 | ```js
|
475 | module.exports = {
|
476 | module: {
|
477 | rules: [
|
478 | {
|
479 | test: require.resolve("./path/to/vendor.js"),
|
480 | loader: "exports-loader",
|
481 | options: {
|
482 | exports: {
|
483 | syntax: "named",
|
484 | name: "Foo",
|
485 | alias: "FooA",
|
486 | },
|
487 | },
|
488 | },
|
489 | ],
|
490 | },
|
491 | };
|
492 | ```
|
493 |
|
494 | Generate output:
|
495 |
|
496 | ```js
|
497 | // ...
|
498 | // Code
|
499 | // ...
|
500 |
|
501 | export { Foo as FooA };
|
502 | ```
|
503 |
|
504 | ###### CommonJS Single Export
|
505 |
|
506 | **webpack.config.js**
|
507 |
|
508 | ```js
|
509 | module.exports = {
|
510 | module: {
|
511 | rules: [
|
512 | {
|
513 | test: require.resolve("./path/to/vendor.js"),
|
514 | loader: "exports-loader",
|
515 | options: {
|
516 | type: "commonjs",
|
517 | exports: {
|
518 | syntax: "single",
|
519 | name: "Foo",
|
520 | },
|
521 | },
|
522 | },
|
523 | ],
|
524 | },
|
525 | };
|
526 | ```
|
527 |
|
528 | Generate output:
|
529 |
|
530 | ```js
|
531 | // ...
|
532 | // Code
|
533 | // ...
|
534 |
|
535 | module.exports = Foo;
|
536 | ```
|
537 |
|
538 | ###### CommonJS Multiple Exports
|
539 |
|
540 | **webpack.config.js**
|
541 |
|
542 | ```js
|
543 | module.exports = {
|
544 | module: {
|
545 | rules: [
|
546 | {
|
547 | test: require.resolve("./path/to/vendor.js"),
|
548 | loader: "exports-loader",
|
549 | options: {
|
550 | type: "commonjs",
|
551 | exports: {
|
552 | syntax: "multiple",
|
553 | name: "Foo",
|
554 | alias: "FooA",
|
555 | },
|
556 | },
|
557 | },
|
558 | ],
|
559 | },
|
560 | };
|
561 | ```
|
562 |
|
563 | Generate output:
|
564 |
|
565 | ```js
|
566 | // ...
|
567 | // Code
|
568 | // ...
|
569 |
|
570 | module.exports = { FooA: Foo };
|
571 | ```
|
572 |
|
573 | #### `Array`
|
574 |
|
575 | Allow to specify multiple exports. Each item can be a [`string`](https://github.com/webpack-contrib/exports-loader#string) or an [`object`](https://github.com/webpack-contrib/exports-loader#object).
|
576 |
|
577 | > **Warning**
|
578 | >
|
579 | > Not possible to use `single` and `multiple` syntaxes together due to CommonJS format limitations.
|
580 |
|
581 | > **Warning**
|
582 | >
|
583 | > Not possible to use multiple `default` values due to ES module format limitations.
|
584 |
|
585 | > **Warning**
|
586 | >
|
587 | > Not possible to use multiple `single` values due to CommonJS format limitations.
|
588 |
|
589 | ##### Examples
|
590 |
|
591 | ###### CommonJS Multiple Exports
|
592 |
|
593 | **webpack.config.js**
|
594 |
|
595 | ```js
|
596 | module.exports = {
|
597 | module: {
|
598 | rules: [
|
599 | {
|
600 | test: require.resolve("./path/to/vendor.js"),
|
601 | loader: "exports-loader",
|
602 | options: {
|
603 | type: "commonjs",
|
604 | exports: ["Foo", "multiple Bar", "multiple Baz BazA"],
|
605 | },
|
606 | },
|
607 | ],
|
608 | },
|
609 | };
|
610 | ```
|
611 |
|
612 | Generate output:
|
613 |
|
614 | ```js
|
615 | // ...
|
616 | // Code
|
617 | // ...
|
618 |
|
619 | module.exports = { Foo, Bar, BazA: Bar };
|
620 | ```
|
621 |
|
622 | ###### ES Module Default Export And Named Exports Together
|
623 |
|
624 | **webpack.config.js**
|
625 |
|
626 | ```js
|
627 | module.exports = {
|
628 | module: {
|
629 | rules: [
|
630 | {
|
631 | test: require.resolve("./path/to/vendor.js"),
|
632 | loader: "exports-loader",
|
633 | options: {
|
634 | exports: ["default Foo", "named Bar BarA"],
|
635 | },
|
636 | },
|
637 | ],
|
638 | },
|
639 | };
|
640 | ```
|
641 |
|
642 | Generate output:
|
643 |
|
644 | ```js
|
645 | // ...
|
646 | // Code
|
647 | // ...
|
648 |
|
649 | export default Foo;
|
650 | export { Bar as BarA };
|
651 | ```
|
652 |
|
653 | ###### Named Exports
|
654 |
|
655 | **webpack.config.js**
|
656 |
|
657 | ```js
|
658 | module.exports = {
|
659 | module: {
|
660 | rules: [
|
661 | {
|
662 | test: require.resolve("./path/to/vendor.js"),
|
663 | loader: "exports-loader",
|
664 | options: {
|
665 | exports: [
|
666 | { syntax: "named", name: "Foo", alias: "FooA" },
|
667 | { syntax: "named", name: "Bar" },
|
668 | "Baz",
|
669 | ],
|
670 | },
|
671 | },
|
672 | ],
|
673 | },
|
674 | };
|
675 | ```
|
676 |
|
677 | Generate output:
|
678 |
|
679 | ```js
|
680 | // ...
|
681 | // Code
|
682 | // ...
|
683 |
|
684 | export { Foo as FooA, Bar, Baz };
|
685 | ```
|
686 |
|
687 | ## Contributing
|
688 |
|
689 | Please take a moment to read our contributing guidelines if you haven't yet done so.
|
690 |
|
691 | [CONTRIBUTING](./.github/CONTRIBUTING.md)
|
692 |
|
693 | ## License
|
694 |
|
695 | [MIT](./LICENSE)
|
696 |
|
697 | [npm]: https://img.shields.io/npm/v/exports-loader.svg
|
698 | [npm-url]: https://npmjs.com/package/exports-loader
|
699 | [node]: https://img.shields.io/node/v/exports-loader.svg
|
700 | [node-url]: https://nodejs.org
|
701 | [tests]: https://github.com/webpack-contrib/exports-loader/workflows/exports-loader/badge.svg
|
702 | [tests-url]: https://github.com/webpack-contrib/exports-loader/actions
|
703 | [cover]: https://codecov.io/gh/webpack-contrib/exports-loader/branch/master/graph/badge.svg
|
704 | [cover-url]: https://codecov.io/gh/webpack-contrib/exports-loader
|
705 | [discussion]: https://img.shields.io/github/discussions/webpack/webpack
|
706 | [discussion-url]: https://github.com/webpack/webpack/discussions
|
707 | [size]: https://packagephobia.now.sh/badge?p=exports-loader
|
708 | [size-url]: https://packagephobia.now.sh/result?p=exports-loader
|