Skip to content

Commit 9a6ecd5

Browse files
Merge pull request webpack#102 from neal1991/cn
translate content/guides/shimming.md
2 parents 6c079bd + 5953c70 commit 9a6ecd5

File tree

1 file changed

+20
-19
lines changed

1 file changed

+20
-19
lines changed

content/guides/shimming.md

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ contributors:
77
- simon04
88
---
99

10-
`webpack` as a module bundler can understand modules written as ES2015 modules, CommonJS or AMD. But many times, while using third party libraries, we see that they expect dependencies which are global aka `$` for `jquery`. They might also be creating global variables which need to be exported. Here we will see different ways to help webpack understand these __broken modules__.
10+
`webpack` 作为模块打包工具可以支持 ES2015 模块,根据 CommonJS 或者 AMD 规范编写的模块。但是很多时候,当使用第三方 library 的时候,可以看出我们还期望有一些全局依赖,比如对于大家都知道 `jquery``$`。这可能也会创建一些需要被导出的全局变量。在此,我们会看到通过不同的方式去帮助 webpack 支持这些**彼此割裂的模块**
1111

12-
## Prefer unminified CommonJS/AMD files over bundled `dist` versions.
12+
## 未压缩的 CommonJS/AMD 文件优先于 `dist` 打包版本。
1313

14-
Most modules link the `dist` version in the `main` field of their `package.json`. While this is useful for most developers, for webpack it is better to alias the src version because this way webpack is able to optimize dependencies better. However in most cases `dist` works fine as well.
14+
多数模块会在 `package.json``main` 字段中链接到 library 的 `dist` 版本。虽然对多数开发者来说这是有用的,但对于 webpack 来说更好的方式是链接到 src 版本的别名上,因为这样 webpack 能够更好地优化依赖。然而多数情况下 `dist` 版本也能正常运行。
1515

1616
``` javascript
1717
// webpack.config.js
@@ -27,8 +27,8 @@ module.exports = {
2727
```
2828

2929
## `provide-plugin`
30-
The [`provide-plugin`](/plugins/provide-plugin) makes a module available as a variable in every other module required by `webpack`. The module is required only if you use the variable.
31-
Most legacy modules rely on the presence of specific globals, like jQuery plugins do on `$` or `jQuery`. In this scenario, you can configure webpack to prepend `var $ = require(“jquery”)` every time it encounters the global `$` identifier.
30+
The [`provide-plugin`](/plugins/provide-plugin) 可以将模块作为一个变量,被 `webpack` 在其他每个模块中引用。只有你需要使用此变量的时候,这个模块才会被 require 进来。
31+
多数之前遗留的模块,会依赖于已存在的某些特定全局变量,比如 jQuery 插件中的 `$` 或者 `jQuery`。在这种场景,你可以在每次遇到全局标识符 `$` 的时候,在 webpack 中预先设置 `var $ = require(“jquery”)`
3232

3333
```javascript
3434
module.exports = {
@@ -43,8 +43,8 @@ module.exports = {
4343

4444
## `imports-loader`
4545

46-
[`imports-loader`](/loaders/imports-loader/) inserts necessary globals into the required legacy module.
47-
For example, Some legacy modules rely on `this` being the `window` object. This becomes a problem when the module is executed in a CommonJS context where `this` equals `module.exports`. In this case you can override `this` using the `imports-loader`.
46+
[`imports-loader`](/loaders/imports-loader/) 在引用了之前遗留模块的代码中,插入必需的全局变量。
47+
例如,某些遗留模块依赖于 `this` 作为 `window` 对象,而在 CommonJS 上下文中执行的 `this` 等同于 `module.exports`。在这种情况下,你可以使用 `imports-loader` 来替换重写 `this`
4848

4949
**webpack.config.js**
5050
```javascript
@@ -58,7 +58,7 @@ module.exports = {
5858
};
5959
```
6060

61-
There are modules that support different [module styles](/concepts/modules), like AMD, CommonJS and legacy. However, most of the time they first check for `define` and then use some quirky code to export properties. In these cases, it could help to force the CommonJS path by setting `define = false`:
61+
webpack 中的模块支持不同的[模块风格](/concepts/modules),比如AMD, CommonJS 以及之前的遗留模块。然而,通常会先检查 `define`,然后使用一些比较怪异的代码来导出属性。在这些情况下,可以通过设置 `define = false`,有助于强制使用 CommonJS 路径:
6262

6363
**webpack.config.js**
6464
```javascript
@@ -74,7 +74,7 @@ module.exports = {
7474

7575
## `exports-loader`
7676

77-
Let's say a library creates a global variable that it expects it's consumers to use. In this case we can use [`exports-loader`](/loaders/exports-loader/), to export that global variable in CommonJS format. For instance, in order to export `file` as `file` and `helpers.parse` as `parse`:
77+
比如说,一个 library 创建了一个全局变量,它期望使用者通过全局变量去使用。在这种情况下,我们能够使用 [`exports-loader`](/loaders/exports-loader/),将全局变量导出为 CommonJS 格式。比如,为了将 `file` 导出为 `file` 以及将 `helpers.parse` 导出为 `parse`
7878

7979
**webpack.config.js**
8080
```javascript
@@ -83,7 +83,7 @@ module.exports = {
8383
rules: [{
8484
test: require.resolve("some-module"),
8585
use: 'exports-loader?file,parse=helpers.parse'
86-
// adds below code the file's source:
86+
// 在文件的源码中加入以下代码
8787
// exports["file"] = file;
8888
// exports["parse"] = helpers.parse;
8989
}]
@@ -93,32 +93,33 @@ module.exports = {
9393

9494
## `script-loader`
9595

96-
The [script-loader](/loaders/script-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.
9796

98-
W> 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.
97+
[script-loader](/loaders/script-loader/) 在全局上下文中执行代码,如同你在 `script` 标签中加入代码。在这种模式下普通的 library 都能够正常运行。访问 require, module 等变量则是 undefined。
9998

100-
Assuming you have a `legacy.js` file containing …
99+
W> 文件作为字符串添加到 bundle 中。它不会被 `webpack` 压缩,因此如果使用了一个压缩后的版本,没有开发工具支持调试此 loader 添加的 library。
100+
101+
假设你有一个 `legacy.js` 文件包含……
101102
```javascript
102103
GLOBAL_CONFIG = {};
103104
```
104105

105-
… using the `script-loader`
106+
...使用 `script-loader`...
106107

107108
```javascript
108109
require('script-loader!legacy.js');
109110
```
110111

111-
… basically yields:
112+
...基本上会生成:
112113

113114
```javascript
114115
eval("GLOBAL_CONFIG = {};");
115116
```
116117

117-
## `noParse` option
118+
## `noParse` 选项
118119

119-
When there is no AMD/CommonJS version of the module and you want to include the `dist`, you can flag this module as [`noParse`](/configuration/module/#module-noparse). Then `webpack` will just include the module without parsing it, which can be used to improve the build time.
120+
当模块没有 AMD/CommonJS 的版本时,并且你希望直接引入 `dist` 版本,你可以将这个模块标记为 [`noParse`](/configuration/module/#module-noparse)。然后 `webpack` 将会直接引入这个模块并且不会解析它,这样可以用来改善构建时间。
120121

121-
W> Any feature requiring the AST, like the `ProvidePlugin`, will not work.
122+
W> 任何用到 AST 特性(比如 `ProvidePlugin`)都不会工作。
122123

123124
```javascript
124125
module.exports = {
@@ -130,4 +131,4 @@ module.exports = {
130131

131132
***
132133

133-
> 原文:https://webpack.js.org/guides/shimming/
134+
> 原文:https://webpack.js.org/guides/shimming/

0 commit comments

Comments
 (0)