webpack shimming modules 引入第三方插件

webpack shimming modules 引入第三方插件

webpack提供了几种加载不符合模块格式的loaders，包括：

- Importing

- imports-loader

- plugin ProvidePlugin

- Exporting

- exports-loader

- Exposing

- expose-loader

Importing

imports-loader

允许使用依赖特定全局变量的模块

This is useful for third-party modules that rely on global variables like $ or this being the window object. The imports loader can add the necessary require(‘whatever’) calls, so those modules work with webpack.

Examples:

file.js expects a global variable $ and you have a module jquery that should be used.

require("imports?$=jquery!./file.js")

file.js expects its configuration on a global variable xConfig and you want it to be {value:123}.

require("imports?xConfig=>{value:123}!./file.js")

file.js expect that this is the global context.

require("imports?this=>window!./file.js")

or

require("imports?this=>global!./file.js")

plugin ProvidePlugin

This plugin makes a module available as a variable in every module. The module is required only if you use the variable.

这个插件使得一个模块作为每个模块中的变量。 仅当使用变量时，才需要该模块

Example: Make $ and jQuery available in every module without writing require(“jquery”).

new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})

EXPORTING

The file doesn’t export its value.该文件不导出其值

exports-loader

This loader exports variables from inside the file.导出文件内声明的变量

Examples:

The file sets a variable in the global context with var XModule = ….

var XModule = require("exports?XModule!./file.js")

The file sets multiple variables in the global context with var XParser, Minimizer.

var XModule = require("exports?Parser=XParser&Minimizer!./file.js"); XModule.Parser; XModule.Minimizer

The file sets a global variable with XModule = ….

require("imports?XModule=>undefined!exports?XModule!./file.js")

(import to not leak to the global context)

The file sets a property on window window.XModule = ….

require("imports?window=>{}!exports?window.XModule!./file.js")

EXPOSING

There are cases where you want a module to export itself to the global context.在某些情况下，您希望模块将自己导出到全局上下文。

Don’t do this unless you really need this. (Better use the ProvidePlugin)

不要这样做，除非你真的需要这个。 （更好地使用ProvidePlugin）

expose-loader

This loader exposes the exports to a module to the global context.

这个loader将模块的导出暴露给全局上下文

Example:

Expose file.js as XModule to the global context

require("expose?XModule!./file.js")

Another Example:

require('expose?$!expose?jQuery!jquery');

...

$(document).ready(function() {
console.log("hey");
})

By making jQuery available as a global namespace in our file containing jQuery
a080
code or the root file, you can use jQuery everywhere in your project. This works very well if you plan to implement Bootstrap(boot up the project) in your Webpack project.

Note: Using too much global name-spacing will make your app less efficient. If you are planning to use a lot of global namespaces, consider implementing something like Babel runtime to your project.

expose loader for webpack

The expose loader adds modules to the global object. This is useful for debugging, or supporting libraries that depend on libraries in globals.expose loader 将模块添加到全局对象。这对于调试或支持在全局变量中依赖库的库非常有用。

Note: Modules must be require()’d within in your bundle, or they will not be exposed.模块必须是在bundle中的require（），否则它们不会被暴露。

require("expose?libraryName!./file.js");
// Exposes the exports for file.js to the global context on property "libraryName".
// In web browsers, window.libraryName is then available.

This line works to expose React to the web browser to enable the Chrome React devtools:这行工作原理暴露React到Web浏览器启用Chrome React devtools：

require("expose?React!react");

Thus,

window.React

is then available to the Chrome React devtools extension.window.React可以访问

Alternately, you can set this in your config file:可以在配置文件中设置：

module: {
loaders: [
{ test: require.resolve("react"), loader: "expose?React" }
]
}

Also for multiple expose you can use ! in loader string:

在loader字符串中暴露多个用!连接

module: {
loaders: [
{ test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" },
]
}

Note:The

require.resolve

is a node.js call (unrelated to

require.resolve

in webpack processing – check the node.js docs instead).

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.

require.resolve是一个node.js调用（与webpack处理中的require.resolve无关 - 检查node.js文档）。 require.resolve给出模块的绝对路径（“/…/app/node_modules/react/react.js”）。 所以暴露只适用于react模块。 它只有在bundle中使用时才会暴露。