{"id":13527900,"url":"https://github.com/webpack-contrib/expose-loader","last_synced_at":"2025-05-13T21:12:30.224Z","repository":{"id":6878319,"uuid":"8127526","full_name":"webpack-contrib/expose-loader","owner":"webpack-contrib","description":"Expose Loader","archived":false,"fork":false,"pushed_at":"2025-04-02T10:16:04.000Z","size":2292,"stargazers_count":545,"open_issues_count":2,"forks_count":68,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-05-08T00:06:27.932Z","etag":null,"topics":["webpack-loader"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webpack-contrib.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"open_collective":"webpack"}},"created_at":"2013-02-10T20:20:08.000Z","updated_at":"2025-04-02T10:16:08.000Z","dependencies_parsed_at":"2024-01-13T10:42:13.404Z","dependency_job_id":"2c68d6c1-3508-48fe-b9ee-b4009147c929","html_url":"https://github.com/webpack-contrib/expose-loader","commit_stats":{"total_commits":138,"total_committers":36,"mean_commits":"3.8333333333333335","dds":0.7028985507246377,"last_synced_commit":"10b42042dc176de0fcc59e19bcb1e4232b8d2632"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fexpose-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fexpose-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fexpose-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fexpose-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webpack-contrib","download_url":"https://codeload.github.com/webpack-contrib/expose-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254029008,"owners_count":22002284,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["webpack-loader"],"created_at":"2024-08-01T06:02:05.880Z","updated_at":"2025-05-13T21:12:25.212Z","avatar_url":"https://github.com/webpack-contrib.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/webpack/webpack\"\u003e\n    \u003cimg width=\"200\" height=\"200\" src=\"https://webpack.js.org/assets/icon-square-big.svg\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n[![npm][npm]][npm-url]\n[![node][node]][node-url]\n[![tests][tests]][tests-url]\n[![coverage][cover]][cover-url]\n[![discussion][discussion]][discussion-url]\n[![size][size]][size-url]\n\n# expose-loader\n\nThe `expose-loader` loader allows to expose a module (in whole or in part) to global object (`self`, `window` and `global`).\n\nFor further hints on compatibility issues, check out [Shimming](https://webpack.js.org/guides/shimming/) of the official docs.\n\n## Getting Started\n\nTo begin, you'll need to install `expose-loader`:\n\n```console\nnpm install expose-loader --save-dev\n```\n\nor\n\n```console\nyarn add -D expose-loader\n```\n\nor\n\n```console\npnpm add -D expose-loader\n```\n\n(If you're using WebPack 4, install `expose-loader@1` and follow the [corresponding instructions](https://v4.webpack.js.org/loaders/expose-loader/) instead.)\n\nThen you can use the `expose-loader` using two approaches.\n\n## Inline\n\nThe `|` or `%20` (space) allow to separate the `globalName`, `moduleLocalName` and `override` of expose.\nThe documentation and syntax examples can be read [here](#syntax).\n\n\u003e [!WARNING]\n\u003e\n\u003e `%20` is space in a query string, because you can't use spaces in URLs\n\n```js\nimport $ from \"expose-loader?exposes=$,jQuery!jquery\";\n//\n// Adds the `jquery` to the global object under the names `$` and `jQuery`\n```\n\n```js\nimport { concat } from \"expose-loader?exposes=_.concat!lodash/concat\";\n//\n// Adds the `lodash/concat` to the global object under the name `_.concat`\n```\n\n```js\nimport {\n  map,\n  reduce,\n} from \"expose-loader?exposes=_.map|map,_.reduce|reduce!underscore\";\n//\n// Adds the `map` and `reduce` method from `underscore` to the global object under the name `_.map` and `_.reduce`\n```\n\n## Using Configuration\n\n**src/index.js**\n\n```js\nimport $ from \"jquery\";\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: require.resolve(\"jquery\"),\n        loader: \"expose-loader\",\n        options: {\n          exposes: [\"$\", \"jQuery\"],\n        },\n      },\n      {\n        test: require.resolve(\"underscore\"),\n        loader: \"expose-loader\",\n        options: {\n          exposes: [\n            \"_.map|map\",\n            {\n              globalName: \"_.reduce\",\n              moduleLocalName: \"reduce\",\n            },\n            {\n              globalName: [\"_\", \"filter\"],\n              moduleLocalName: \"filter\",\n            },\n          ],\n        },\n      },\n    ],\n  },\n};\n```\n\nThe [`require.resolve`](https://nodejs.org/api/modules.html#modules_require_resolve_request_options) call is a Node.js function (unrelated to `require.resolve` in webpack processing).\n`require.resolve` gives you the absolute path to the module (`\"/.../app/node_modules/jquery/dist/jquery.js\"`).\nSo the expose only applies to the `jquery` module. And it's only exposed when used in the bundle.\n\nAnd run `webpack` via your preferred method.\n\n## Options\n\n|                Name                 |                   Type                    |   Default   | Description                    |\n| :---------------------------------: | :---------------------------------------: | :---------: | :----------------------------- |\n|      **[`exposes`](#exposes)**      | `{String\\|Object\\|Array\u003cString\\|Object\u003e}` | `undefined` | List of exposes                |\n| **[`globalObject`](#globalObject)** |                 `String`                  | `undefined` | Object used for global context |\n\n### `exposes`\n\nType:\n\n```ts\ntype exposes =\n  | string\n  | {\n      globalName: string | Array\u003cstring\u003e;\n      moduleLocalName?: string;\n      override?: boolean;\n    }\n  | Array\u003c\n      | string\n      | {\n          globalName: string | Array\u003cstring\u003e;\n          moduleLocalName?: string;\n          override?: boolean;\n        }\n    \u003e;\n```\n\nDefault: `undefined`\n\nList of exposes.\n\n#### `string`\n\nAllows to use a string to describe an expose.\n\n##### `syntax`\n\nThe `|` or `%20` (space) allow to separate the `globalName`, `moduleLocalName` and `override` of expose.\n\nString syntax - `[[globalName] [moduleLocalName] [override]]` or `[[globalName]|[moduleLocalName]|[override]]`, where:\n\n- `globalName` - the name in the global object, for example `window.$` for a browser environment (**required**)\n- `moduleLocalName` - the name of method/variable/etc of the module (the module must export it) (**may be omitted**)\n- `override` - allows to override existing value in the global object (**may be omitted**)\n\nIf `moduleLocalName` is not specified, it exposes the entire module to the global object, otherwise it exposes only the value of `moduleLocalName`.\n\n**src/index.js**\n\n```js\nimport $ from \"jquery\";\nimport _ from \"underscore\";\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: require.resolve(\"jquery\"),\n        loader: \"expose-loader\",\n        options: {\n          // For `underscore` library, it can be `_.map map` or `_.map|map`\n          exposes: \"$\",\n          // To access please use `window.$` or `globalThis.$`\n        },\n      },\n      {\n        // test: require.resolve(\"jquery\"),\n        test: /node_modules[/\\\\]underscore[/\\\\]modules[/\\\\]index-all\\.js$/,\n        loader: \"expose-loader\",\n        type: \"javascript/auto\",\n        options: {\n          // For `underscore` library, it can be `_.map map` or `_.map|map`\n          exposes: \"_\",\n          // To access please use `window._` or `globalThis._`\n        },\n      },\n    ],\n  },\n};\n```\n\n#### `object`\n\nAllows to use an object to describe an expose.\n\n##### `globalName`\n\nType:\n\n```ts\ntype globalName = string | Array\u003cstring\u003e;\n```\n\nDefault: `undefined`\n\nThe name in the global object. (**required**).\n\n**src/index.js**\n\n```js\nimport _ from \"underscore\";\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /node_modules[/\\\\]underscore[/\\\\]modules[/\\\\]index-all\\.js$/,\n        loader: \"expose-loader\",\n        type: \"javascript/auto\",\n        options: {\n          exposes: {\n            // Can be `['_', 'filter']`\n            globalName: \"_.filter\",\n            moduleLocalName: \"filter\",\n          },\n        },\n      },\n    ],\n  },\n};\n```\n\n##### `moduleLocalName`\n\nType:\n\n```ts\ntype moduleLocalName = string;\n```\n\nDefault: `undefined`\n\nThe name of method/variable/etc of the module (the module must export it).\nIf `moduleLocalName` is specified, it exposes only the value of `moduleLocalName`.\n\n**src/index.js**\n\n```js\nimport _ from \"underscore\";\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /node_modules[/\\\\]underscore[/\\\\]modules[/\\\\]index-all\\.js$/,\n        loader: \"expose-loader\",\n        type: \"javascript/auto\",\n        options: {\n          exposes: {\n            globalName: \"_.filter\",\n            moduleLocalName: \"filter\",\n          },\n        },\n      },\n    ],\n  },\n};\n```\n\n##### `override`\n\nType:\n\n```ts\ntype override = boolean;\n```\n\nDefault: `false`\n\nBy default, loader does not override the existing value in the global object, because it is unsafe.\nIn `development` mode, we throw an error if the value already present in the global object.\nBut you can configure loader to override the existing value in the global object using this option.\n\nTo force override the value that is already present in the global object you can set the `override` option to the `true` value.\n\n**src/index.js**\n\n```js\nimport $ from \"jquery\";\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: require.resolve(\"jquery\"),\n        loader: \"expose-loader\",\n        options: {\n          exposes: {\n            globalName: \"$\",\n            override: true,\n          },\n        },\n      },\n    ],\n  },\n};\n```\n\n#### `array`\n\n**src/index.js**\n\n```js\nimport _ from \"underscore\";\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /node_modules[/\\\\]underscore[/\\\\]modules[/\\\\]index-all\\.js$/,\n        loader: \"expose-loader\",\n        type: \"javascript/auto\",\n        options: {\n          exposes: [\n            \"_.map map\",\n            {\n              globalName: \"_.filter\",\n              moduleLocalName: \"filter\",\n            },\n            {\n              globalName: [\"_\", \"find\"],\n              moduleLocalName: \"myNameForFind\",\n            },\n          ],\n        },\n      },\n    ],\n  },\n};\n```\n\nIt will expose **only** `map`, `filter` and `find` (under `myNameForFind` name) methods to the global object.\n\nIn a browser these methods will be available under `windows._.map(..args)`, `windows._.filter(...args)` and `windows._.myNameForFind(...args)` methods.\n\n### `globalObject`\n\n```ts\ntype globalObject = string;\n```\n\nDefault: `undefined`\n\nObject used for global context\n\n```js\nimport _ from \"underscore\";\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /node_modules[/\\\\]underscore[/\\\\]modules[/\\\\]index-all\\.js$/,\n        loader: \"expose-loader\",\n        type: \"javascript/auto\",\n        options: {\n          exposes: [\n            {\n              globalName: \"_\",\n            },\n          ],\n          globalObject: \"this\",\n        },\n      },\n    ],\n  },\n};\n```\n\n## Examples\n\n### Expose a local module\n\n**index.js**\n\n```js\nimport { method1 } from \"./my-module.js\";\n```\n\n**my-module.js**\n\n```js\nfunction method1() {\n  console.log(\"method1\");\n}\n\nfunction method2() {\n  console.log(\"method1\");\n}\n\nexport { method1, method2 };\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /my-module\\.js$/,\n        loader: \"expose-loader\",\n        options: {\n          exposes: \"mod\",\n          // // To access please use `window.mod` or `globalThis.mod`\n        },\n      },\n    ],\n  },\n};\n```\n\n## Contributing\n\nPlease take a moment to read our contributing guidelines if you haven't yet done so.\n\n[CONTRIBUTING](./.github/CONTRIBUTING.md)\n\n## License\n\n[MIT](./LICENSE)\n\n[npm]: https://img.shields.io/npm/v/expose-loader.svg\n[npm-url]: https://npmjs.com/package/expose-loader\n[node]: https://img.shields.io/node/v/expose-loader.svg\n[node-url]: https://nodejs.org\n[tests]: https://github.com/webpack-contrib/expose-loader/workflows/expose-loader/badge.svg\n[tests-url]: https://github.com/webpack-contrib/expose-loader/actions\n[cover]: https://codecov.io/gh/webpack-contrib/expose-loader/branch/master/graph/badge.svg\n[cover-url]: https://codecov.io/gh/webpack-contrib/expose-loader\n[discussion]: https://img.shields.io/github/discussions/webpack/webpack\n[discussion-url]: https://github.com/webpack/webpack/discussions\n[size]: https://packagephobia.now.sh/badge?p=expose-loader\n[size-url]: https://packagephobia.now.sh/result?p=expose-loader\n","funding_links":["https://opencollective.com/webpack"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack-contrib%2Fexpose-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebpack-contrib%2Fexpose-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack-contrib%2Fexpose-loader/lists"}