Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
expose-loader
Advanced tools
The expose-loader npm package allows you to expose modules to the global object, making them accessible as global variables. This can be particularly useful when you need to integrate with legacy code that expects certain libraries to be globally available.
Expose a module to the global object
This feature allows you to expose the jQuery library to the global object, making it accessible as both `$` and `jQuery`. This is useful for legacy scripts that rely on jQuery being globally available.
module.exports = {
module: {
rules: [
{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: {
exposes: ['$', 'jQuery'],
},
}],
},
],
},
};
Expose multiple modules
This feature demonstrates how to expose multiple modules, in this case, lodash and axios, to the global object. Lodash is exposed as `_` and axios as `axios`.
module.exports = {
module: {
rules: [
{
test: require.resolve('lodash'),
use: [{
loader: 'expose-loader',
options: {
exposes: '_',
},
}],
},
{
test: require.resolve('axios'),
use: [{
loader: 'expose-loader',
options: {
exposes: 'axios',
},
}],
},
],
},
};
The script-loader package allows you to add a script tag to the HTML that includes the module, making it globally available. Unlike expose-loader, which directly exposes the module to the global object, script-loader injects the script into the HTML, which can be useful for loading external scripts.
The imports-loader package allows you to inject variables into the scope of a module. While expose-loader makes a module globally available, imports-loader is useful for injecting dependencies into a module's scope, which can be useful for polyfills or shimming.
The expose loader adds modules to the global object. This is useful for debugging, or supporting libraries that depend on libraries in globals.
npm i expose-loader --save
Note: Modules must be require()
'd within in your bundle, or they will not
be exposed.
require("expose-loader?libraryName!./file.js");
// Exposes the exports for file.js to the global context on property "libraryName".
// In web browsers, window.libraryName is then available.
For example, let's say you want to expose jQuery as a global called $
:
require("expose-loader?$!jquery");
Thus, window.$
is then available in the browser console.
Alternately, you can set this in your config file:
webpack v1 usage
module: {
loaders: [
{ test: require.resolve("jquery"), loader: "expose-loader?$" }
]
}
webpack v2 usage
module: {
rules: [{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: '$'
}]
}]
}
Let's say you also want to expose it as window.jQuery
in addition to window.$
.
For multiple expose you can use !
in loader string:
webpack v1 usage
module: {
loaders: [
{ test: require.resolve("jquery"), loader: "expose-loader?$!expose-loader?jQuery" },
]
}
webpack v2 usage
module: {
rules: [{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
}]
}
The require.resolve
is a Node.js call (unrelated to require.resolve
in webpack
processing). require.resolve
gives you the
absolute path to the module ("/.../app/node_modules/react/react.js"
). So the
expose only applies to the react module. And it's only exposed when used in the
bundle.
Juho Vepsäläinen |
Joshua Wiens |
Kees Kluskens |
Sean Larkin |
FAQs
expose loader module for webpack
The npm package expose-loader receives a total of 372,050 weekly downloads. As such, expose-loader popularity was classified as popular.
We found that expose-loader demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.