Skip to content

Commit 7e5d4e3

Browse files
YucohnyYucohny
authored
docs(cn): improve translations of author-libraries (#1836)
1 parent deeadfe commit 7e5d4e3

File tree

1 file changed

+17
-17
lines changed

1 file changed

+17
-17
lines changed

‎src/content/guides/author-libraries.mdx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,14 @@ translators:
3636
+ |- ref.json
3737
```
3838

39-
使用 npm 初始化项目，然后安装 `webpack`，`webpack-cli` 和 `lodash`：
39+
使用 npm 初始化项目，然后安装 `webpack`、`webpack-cli` 与 `lodash`：
4040

4141
```bash
4242
npm init -y
4343
npm install --save-dev webpack webpack-cli lodash
4444
```
4545

46-
应该将 `lodash` 安装为 `devDependencies` 而不是 `dependencies`，因为不需要将其打包到库中，否则库体积会变得很大。
46+
注意：由于不需要将 `lodash` 一同打包到库中，因此应该将其安装为 `devDependencies` 而非 `dependencies`，否则库体积会变得很大。
4747

4848
**src/ref.json**
4949

@@ -121,11 +121,11 @@ module.exports = {
121121
};
122122
```
123123

124-
通过这样的配置，我们告诉 webpack 将 `src/index.js` 打包到 `dist/webpack-numbers.js` 中。
124+
上述配置告诉 webpack 将 `src/index.js` 打包到 `dist/webpack-numbers.js` 中。
125125

126126
## 暴露库 $#expose-the-library$
127127

128-
到目前为止，一切都应该与打包应用程序一样，但是打包库有一个不同的地方——需要通过 [`output.library`](/configuration/output/#outputlibrary) 配置项暴露从入口导出的内容。
128+
到目前为止，一切都应该与打包应用程序一样，但是打包库有一个不同的地方——需要通过 [`output.library`](/configuration/output/#outputlibrary) 配置项暴露从入口起点导出的内容。
129129

130130
**webpack.config.js**
131131

@@ -142,7 +142,7 @@ module.exports = {
142142
};
143143
```
144144

145-
我们将入口暴露为 `webpackNumbers`，这样用户就可以通过 script 标签使用它：
145+
我们将入口暴露为 `webpackNumbers`，这样用户就可以通过脚本标签使用它：
146146

147147
```html
148148
<script src="https://example.org/webpack-numbers.js"></script>
@@ -151,7 +151,7 @@ module.exports = {
151151
</script>
152152
```
153153

154-
然而它只能通过被 script 标签引用而发挥作用，而不能运行在 CommonJS、AMD、Node.js 等环境中。
154+
然而它只能通过被脚本标签引用而发挥作用，而不能运行在 CommonJS、AMD、Node.js 等环境中。
155155

156156
作为一个库作者，我们希望它能够兼容不同的环境。换言之，用户应该能够通过以下方式使用打包后的库：
157157

@@ -172,7 +172,7 @@ module.exports = {
172172
});
173173
```
174174

175-
- **使用 script 标签tag**：
175+
- **使用脚本标签**：
176176

177177
```html
178178
<!DOCTYPE html>
@@ -185,7 +185,7 @@ module.exports = {
185185
webpackNumbers.wordToNum('Five');
186186
// 属性处于 window 对象中
187187
window.webpackNumbers.wordToNum('Five');
188-
// ...
188+
// ……
189189
</script>
190190
</html>
191191
```
@@ -209,15 +209,15 @@ module.exports = {
209209
};
210210
```
211211

212-
现在 webpack 将打包它，使得其可以通过 CommonJS、AMD 模块以及 script 标签使用。
212+
现在 webpack 将打包它，使其可以通过 CommonJS、AMD 模块以及脚本标签使用。
213213

214-
T> 请注意，`library` 选项与 `entry` 配置项绑定。对于绝大多数的库，指定一个入口就已经足够了。尽管 [multi-part library](https://github.com/webpack/webpack/tree/master/examples/multi-part-library) 是有可能的，但通过作为单个入口点的 [索引脚本](https://stackoverflow.com/questions/34072598/es6-exporting-importing-in-index-file) 暴露部分导出会更简单。**不推荐** 使用数组作为 `entry`。
214+
T> 请注意，`library` 选项与 `entry` 配置项绑定。对于绝大多数的库，指定一个入口就已经足够了。尽管可能存在 [multi-part library](https://github.com/webpack/webpack/tree/master/examples/multi-part-library)，但通过作为单个入口起点的 [index 脚本](https://stackoverflow.com/questions/34072598/es6-exporting-importing-in-index-file) 暴露部分导出会更简单。**不推荐** 使用数组作为 `entry`。
215215

216216
## 外部化 lodash $#externalize-lodash$
217217

218-
现在，如果执行 `webpack`，你会发现创建了一个体积相当大的文件。如果你查看这个文件，会看到 lodash 也被打包到代码中。在这种场景中，我们更倾向于把 `lodash` 当作 `peerDependency`。也就是说，使用者应该已经自行安装过 `lodash`。因此，我们便可以放弃控制此外部库，而是将控制权让给使用此库的开发者。
218+
现在，如果执行 `webpack`，你会发现创建了一个体积相当大的文件。查看文件可以发现 lodash 也被打包到代码中。在这种场景中，我们更倾向于把 `lodash` 当作 `peerDependency`，即使用者应该已经自行安装过 `lodash`，这样便可以放弃控制此外部库，将控制权让给使用此库的开发者。
219219

220-
这可以使用 `externals` 配置来完成：
220+
使用 `externals` 配置即可实现上述目标：
221221

222222
**webpack.config.js**
223223

@@ -274,7 +274,7 @@ module.exports = {
274274

275275
## 最终步骤 $#final-steps$
276276

277-
遵循 [生产环境](/guides/production) 指南中提到的步骤，来优化生产环境下的输出结果。那么，我们还需要将生成 bundle 的文件路径，添加到 `package.json` 中的 `main` 字段中。
277+
遵循 [生产环境](/guides/production) 指南中提到的步骤优化生产环境下的输出结果。那么此时还需要生成 bundle 的文件路径，并将其添加到 `package.json` 中的 `main` 字段中。
278278

279279
**package.json**
280280

@@ -286,7 +286,7 @@ module.exports = {
286286
}
287287
```
288288

289-
或者，按照这个 [指南](https://github.com/dherman/defense-of-dot-js/blob/master/proposal.md#typical-usage) 将其添加为标准模块：
289+
或者也可以按照这个 [指南](https://github.com/dherman/defense-of-dot-js/blob/master/proposal.md#typical-usage) 将其添加为标准模块：
290290

291291
```json
292292
{
@@ -296,10 +296,10 @@ module.exports = {
296296
}
297297
```
298298

299-
这里的 key `main` 是参照 [`package.json` 标准](https://docs.npmjs.com/files/package.json#main)，而 `module` 是参照 [这个](https://github.com/dherman/defense-of-dot-js/blob/master/proposal.md) [提案](https://github.com/rollup/rollup/wiki/pkg.module)，此提案允许 JavaScript 生态系统升级使用 ES2015 模块，而不会破坏向后兼容性。
299+
此处的键 `main` 是参照 [`package.json` 标准](https://docs.npmjs.com/files/package.json#main)，而 `module` 是参照 [这个](https://github.com/dherman/defense-of-dot-js/blob/master/proposal.md) [提案](https://github.com/rollup/rollup/wiki/pkg.module)，此提案允许 JavaScript 生态系统升级使用 ES2015 模块，而不会破坏向后兼容性。
300300

301301
W> `module` 属性应指向一个使用 ES2015 模块语法的脚本，但不包括浏览器或 Node.js 尚不支持的其他语法特性。这使得 webpack 本身就可以解析模块语法，如果用户只用到库的某些部分，则允许通过 [tree shaking](https://webpack.docschina.org/guides/tree-shaking/) 打包更轻量的包。
302302

303-
现在，你可以 [将其发布为一个 npm 包](https://docs.npmjs.com/getting-started/publishing-npm-packages)，并且在 [unpkg.com](https://unpkg.com/#/) 找到它，并分发给你的用户。
303+
现在便可以 [将其发布为一个 npm 包](https://docs.npmjs.com/getting-started/publishing-npm-packages)，并且在 [unpkg.com](https://unpkg.com/#/) 找到它，并分发给用户。
304304

305-
T> 为了暴露和库关联的样式表，你应该使用 [`MiniCssExtractPlugin`](/plugins/mini-css-extract-plugin)。然后，用户可以像使用其他样式表一样使用和加载这些样式表。
305+
T> 建议使用 [`MiniCssExtractPlugin`](/plugins/mini-css-extract-plugin) 暴露与库关联的样式表，然后用户可以像使用其他样式表一样使用和加载这些样式表。

0 commit comments

Comments
 (0)