Skip to content

Commit fe88eee

Browse files
geekingingeekingin
committed
翻译 guides/author-libraries;
1 parent c560f64 commit fe88eee

File tree

2 files changed

+47
-48
lines changed

2 files changed

+47
-48
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ npm-debug.log
33
build
44
# generated
55
.antwar
6+
.idea

‎content/guides/author-libraries.md

Lines changed: 46 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,11 @@ sort: 18
44
contributors:
55
- pksjce
66
---
7+
webpack是一个用来打包应用（application）和库（library）的代码的工具。如果你是一个JavaScript库的作者，并且想要将你的打包逻辑给流程化（streamline），那么这篇文档将会帮助到你。
78

8-
webpack is a tool which can be used to bundle application code and also to bundle library code. If you are the author of a JavaScript library and are looking to streamline your bundle strategy then this document will help you.
9+
## 创建一个库
910

10-
## Author a Library
11-
12-
We have here a small wrapper library to convert number 1 to 5 from number to word and vice-versa. It looks something like this.
11+
这里有一个小的库，可以将数字1到5在其单词形式和数字形式之间转换。代码如下：
1312

1413
__src/index.js__
1514
```javascript
@@ -28,54 +27,52 @@ export function wordToNum(word) {
2827
}, -1);
2928
};
3029
```
31-
32-
The usage spec for the library will be as follows.
30+
该库的使用方式如下：
3331

3432
```javascript
35-
// ES2015 modules
33+
// 使用 ES2015 模块引入
3634

3735
import * as webpackNumbers from 'webpack-numbers';
38-
3936
...
40-
webpackNumbers.wordToNum('Two') // output is 2
37+
webpackNumbers.wordToNum('Two') // 输出 2
4138
...
4239

43-
// CommonJS modules
4440

45-
var webpackNumbers = require('webpack-numbers');
41+
// 使用 CommonJS 模块引入
4642

43+
var webpackNumbers = require('webpack-numbers');
4744
...
4845
webpackNumbers.numToWord(3); // output is Three
4946
...
5047

51-
// As a script tag
48+
49+
// 使用 script 标签引入
5250

5351
<html>
5452
...
5553
<script src="https://unpkg.com/webpack-numbers"></script>
5654
<script>
5755
...
58-
/* webpackNumbers is available as a global variable */
59-
webpackNumbers.wordToNum('Five') //output is 5
56+
/* webpackNumbers 是一个全局变量 */
57+
webpackNumbers.wordToNum('Five') //输出 5
6058
...
6159
</script>
6260
</html>
6361
```
62+
完整的源代码和配置请参阅 [webpack-library-example](https://github.com/kalcifer/webpack-library-example)。
6463

65-
For full library configuration and code please refer to [webpack-library-example](https://github.com/kalcifer/webpack-library-example)
64+
## 配置 webpack
6665

67-
## Configure webpack
66+
现在需要打包这个库，同时要完成以下要求：
67+
- 不要打包 lodash，而是引用（require）用户加载好的lodash。
68+
- 库的名字是 `webpack-numbers`，而其变量是 `webpackNumbers`。
69+
- 库可以用两种方式来引入：`import webpackNumbers from 'webpack-numbers'` 或者 `require('webpack-numbers')`。
70+
- 当库通过 `script` 标签引入的时候，可以通过全局变量 `webpackNumbers` 来使用。
71+
- 库可以在 Node.js 中使用。
6872

69-
Now the agenda is to bundle this library
70-
- Without bundling lodash but requiring it to be loaded by the consumer.
71-
- Name of the library is `webpack-numbers` and the variable is `webpackNumbers`.
72-
- Library can be imported as `import webpackNumbers from 'webpack-numbers'` or `require('webpack-numbers')`.
73-
- Library can be accessed through global variable `webpackNumbers` when included through `script` tag.
74-
- Library can be accessed inside Node.js.
73+
### 增加 webpack
7574

76-
### Add webpack
77-
78-
Add basic webpack configuration.
75+
增加基本的 webpack 配置。
7976

8077
__webpack.config.js__
8178

@@ -91,12 +88,11 @@ module.exports = {
9188

9289
```
9390

94-
This adds basic configuration to bundle the library.
91+
以上代码是打包该库的基本配置。
9592

96-
### Add Loaders
93+
### 增加 Loaders
9794

98-
But it will not work without adding relevant loaders for transpiling the code.
99-
Here, we need a [`json-loader`](https://github.com/webpack/json-loader) is required to precompile our json fixture file.
95+
我们还需要增加相关的 loader 来编译代码。这里需要一个 `json-loader` 来预编译我们的json文件。
10096

10197
__webpack.config.js__
10298

@@ -111,12 +107,14 @@ module.exports = {
111107
}
112108
};
113109
```
114-
### Add `externals`
115110

116-
Now, if you run `webpack`, you will find that a largish bundle file is created. If you inspect the file, you will find that lodash has been bundled along with your code.
117-
It would be unnecessary for your library to bundle a library like `lodash`. Hence you would want to give up control of this external library to the consumer of your library.
111+
### 增加 `externals`
112+
113+
现在，如果执行 `webpack`，你会发现输出了一个非常巨大的文件。进一步观察该文件，你会发现 lodash 和你的代码被一起打包了。
114+
115+
然而对于你的库本身来说，并不需要打包 `lodash`。因此你可能会想将该外部库（external）的控制权交给你的库的用户。
118116

119-
This can be done using the `externals` configuration as
117+
这一点可以通过配置 `externals` 来实现：
120118

121119
__webpack.config.js__
122120

@@ -135,13 +133,13 @@ module.exports = {
135133
};
136134
```
137135

138-
This means that your library expects a dependency named `lodash` to be available in the consumers environment.
136+
这意味着你的库需要能够在用户的环境中获取一个名为 `lodash` 的依赖。
139137

140-
### Add `libraryTarget`
138+
### 增加 `libraryTarget`
141139

142-
For widespread use of the library, we would like it to be compatible in different environments, i. e. CommonJS, AMD, Node.js and as a global variable.
140+
为了让该库能够被广泛使用，你需要让它能够兼容不同的环境，例如 CommonJS，AMD，Node.js 或者作为一个全局变量。
143141

144-
To make your library available for reuse, add `library` property in webpack configuration.
142+
为了让你的代码能够被重用，需要在 webpack 配置中增加一个 `library` 属性。
145143

146144
__webpack.config.js__
147145

@@ -156,8 +154,9 @@ module.exports = {
156154
};
157155
```
158156

159-
This makes your library bundle to be available as a global variable when imported.
160-
To make the library compatible with other environments, add `libraryTarget` property to the config.
157+
这能让你的库被引入后，可以通过全局变量来使用。
158+
159+
为了让库可以兼容其他环境，还需要在配置中增加 `libraryTarget` 属性。
161160

162161
__webpack.config.js__
163162

@@ -167,33 +166,32 @@ module.exports = {
167166
output: {
168167
...
169168
library: 'webpackNumbers',
170-
libraryTarget:'umd' // Possible value - amd, commonjs, commonjs2, commonjs-module, this, var
169+
libraryTarget:'umd' // 其他可取值 - amd, commonjs, commonjs2, commonjs-module, this, var
171170
}
172171
...
173172
};
174173
```
175174

176-
If `library` is set and `libraryTarget` is not, `libraryTarget` defaults to `var` as specified in the [config reference](/configuration/output).
175+
如果设置了 `library` 但没设置 `libraryTarget`， 则`libraryTarget` 默认为 `var`，详见 [config 文档](/configuration/output) 。
177176

178-
### Final Steps
177+
### 最终步骤
179178

180-
[Tweak your production build using webpack](/guides/production-build).
179+
[使用 webpack 打包你的生产代码](/guides/production-build).
181180

182-
Add the path to your generated bundle as the package's main file in `package.json`
181+
在 `package.json` 中指定主文件（main file）为你生成的文件的路径。
183182

184183
__package.json__
185184

186185
```javascript
187186
{
188187
...
189188
"main": "dist/webpack-numbers.js",
190-
"module": "src/index.js", // To add as standard module as per https://github.com/dherman/defense-of-dot-js/blob/master/proposal.md#typical-usage
189+
"module": "src/index.js", // 增加标准的模块，参照： https://github.com/dherman/defense-of-dot-js/blob/master/proposal.md#typical-usage
191190
...
192191
}
193192
```
194193

195-
Now you can [publish it as an npm package](https://docs.npmjs.com/getting-started/publishing-npm-packages) and find it at [unpkg.com](https://unpkg.com/#/) to distribute it to your users.
196-
194+
现在你可以 [将其作为一个 npm 包来发布](https://docs.npmjs.com/getting-started/publishing-npm-packages) 并且在 [unpkg.com](https://unpkg.com/#/) 找到它并向你的用户分发。
197195
***
198196

199-
https://webpack.js.org/guides/author-libraries/
197+
> 原文：https://webpack.js.org/guides/author-libraries/

0 commit comments

Comments
 (0)