shimming modules.cn

In some cases webpack cannot parse some file, because it has a unsupported module format or isn't even in a module format. Therefore you have many options to convert the file into a module.

某些情况下，webpack无法解析某些文件，因为其使用不被支持的模块格式，甚至没有模块格式。因此，你有很多方式来将那些文件转换成模块。

Using loaders

On this page all examples with loaders are inlined into require calls. This is just for demonstration. You may want to configure them in your webpack config instead. Read Using loaders for more details how to do this.

这个页面上所有涉及loader的样例都是内联到require的调用中，为了展示用。相反，你可能想在 webpack config 里进行配置。参阅Using loaders以了解如何那样做。

Importing

导入模块

Useful when a file has dependencies that are not imported via require().

用于当一个文件存在依赖没有通过require导入。

imports-loader

This loader allows you to put some modules or arbitrary JavaScript onto a local variable of the file.

这个loader可以将某些模块或者任意JavaScript代码，注入成该文件的本地变量。

Examples:

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

file.js 需要一个全局变量$指向jquery模块

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

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

file.js 需要从一个全局变量xConfig读取配置，而你想该配置为{value:123}

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

file.js expect that this is the global context.

file.js 希望this指向全局上下文（window 或 global）

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

plugin ProvidePlugin

This plugin makes a module available as 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"). 例：使$ 与 jQuery在每个模块中可用而不用写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. 这个 loader 用来导出文件内的变量

Examples:

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

某文件在全局上下文中定义了一个变量var XModule = ...

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

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

某文件在全局上下文中定义了多个变量var XParser, Minimizer

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

The file sets a global variable with XModule = ....

某文件定义了一个全局变量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 = ....

某文件给 window 对象定义了一个属性window.XModule = ...

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

Fixing broken module styles

修复破损的模块风格

Some files use a module style wrong. You may want to fix this by teaching webpack to not use this style. 某些文件错误地使用某种模块风格。可以通过指导 webpack 不去使用该风格来修复

Disable some module styles

使某些模块规范无效

Examples:

Broken AMD

破损的 AMD 风格

require("imports?define=>false!./file.js")

Broken CommonJs

破损的 CommonJs 风格

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

configuration option module.noParse

configuration 选项 module.noParse

This disables parsing by webpack. Therefore you cannot use dependencies. This may be useful for prepackaged libraries. 这个用来关闭 webpack 的解析。因此，你无法使用依赖。对于某些预打包的库可能有用。

Example:

{
	module: {
		noParse: [
			/XModule[\\\/]file\.js$/,
			path.join(__dirname, "web_modules", "XModule2")
		]
	}
}

Note: exports and module are still available and usable. You may want to undefine them with the imports-loader. 注意: exports 与 module 仍然可用。你可以使用imports-loader使其无效

script-loader

This loader evaluates code in the global context, just like you would add the code into a script tag. In this mode every normal library should work. require, module, etc. are undefined. 这个 loader 在全局上下文执行代码，就好像向 script 标签加入代码。在此模式下，每个普通的模块应该都可以工作。require、module...等等，都是无定义的

Note: The file is added as string to the bundle. It is not minimized by webpack, so use a minimized version. There is also no dev tool support for libraries added by this loader. 注意：这个文件是作为字符串添加到 bundle 的，没有被 webpack 压缩，建议使用压缩过的版本。对于通过此 loader 加载的库，也没有开发工具的支持。

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

将 file.js 以 XModule 暴露到全局上下文

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 code or the root file, it's available to use Jquery everywhere in your project. This works very well if you plan to implement Bootstrap in your Webpack project. 在包含jquery代码的文件内或者根文件中，使 Jquery 在全局命名空间中可用，可以在项目中任意一处使用 Jquery。

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. **注意：**过多全局命名空间注入会使应用变得低效。如果你打算大量全局命名空间注入，考虑在项目中实现象Babel runtime的东西。

---

Order of loaders

loader 的顺序

In rare cases when you have to apply more than one technique, you need to use the correct order of loaders: 在某些罕见情况下，当你不得不应用多于一项技术，你需要使用正确的 loader 顺序：

inlined: expose!imports!exports, configuration: expose before imports before exports. 行内：expose!imports!exports 配置: expose imports exports.