Merge pull request webpack#101 from lizhonghui/cn

docs(guides): translate chapter of webpack&typescript

Author: dear-lizhihua

content/guides/webpack-and-typescript.md

@@ -1,29 +1,28 @@
 ---
-title: Webpack & Typescript
+title: Webpack 和 TypeScript
 sort: 20
 contributors:
   - morsdyce
 ---
 
-[TypeScript](https://www.typescriptlang.org) is a typed superset of JavaScript that compiles to plain JavaScript, in this guide we will learn how to integrate Typescript with webpack.
+[TypeScript](https://www.typescriptlang.org) 是具有类型系统的 JavaScript 的超集，通过编译转化为普通 JavaScript 代码。这篇指南里我们将会学习 webpack 是如何跟 TypeScript 进行结合。
 
-## Basic Setup
+## 基础构建
 
-In order to get started with webpack and Typescript, first we must install webpack in our project.
-If you didn't do so already please check out [webpack Installation Guide](https://webpack.js.org/guides/installation/).
+在开始 webpack 和 TypeScript 整合之前，我们首先必须在项目里安装 webpack。如果你还没安装，请查阅 [webpack 安装指南](https://webpack.js.org/guides/installation/)。
 
-To start using webpack with Typescript you need a couple of things:
-1. Install the Typescript compiler in your project.
-2. Install a Typescript loader (in this case we're using ts-loader).
-3. Create a __tsconfig.json__ file to contain our TypeScript compilation configuration.
-3. Create __webpack.config.js__ to contain our webpack configuration.
+要能在 webpack 里使用 TypeScript，你需要准备好下面这些事情：
+1. 在项目里安装 TypeScript 编译器；
+2. 选择一个 TypeScript loader 安装（这个示例里使用的是 ts-loader）;
+3. 创建 __tsconfig.json__ 文件，这是 TypeScript 编辑器的配置文件；
+4. 创建 __webpack.config.js__ 文件，这是 webpack 的配置文件。
 
-You can install the TypeScript compiler and the TypeScript loader from npm by running:
+你可以通过 npm 安装 TypeScript 编译器和 TypeScript loader，运行下面这个命令来安装：
  `npm install --save-dev typescript ts-loader`
 
 __tsconfig.json__ 
 
-The tsconfig file can start as an empty configuration file, here you can see an example of a basic configuration for TypeScript to compile to es5 as well as providing support for JSX.
+tsconfig 配置文件可以从一个空白的文件逐一添加配置项，下面有一个基本的配置示例，用来把 TypeScript 代码编译成 es5 代码，同时支持 JSX。
 
 ```json
 {
@@ -39,11 +38,12 @@ The tsconfig file can start as an empty configuration file, here you can see an
 }
 ```
 
-You can read more about tsconfig.json configuration options at the [TypeScript documentation website](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)
+可以查看 [TypeScript 官方文档](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)了解更多关于 tsconfig.json 的配置选项。
 
 __webpack.config.js__
 
-A basic webpack with TypeScript config should look along these lines:
+使用 TypeScript 编写的 webpack 基本配置大概是这样：
+
 ```js
 module.exports = {
  entry: './index.ts',
@@ -65,28 +65,24 @@ module.exports = {
  },
 };
 ```
- 
-Here we specify our entry point to be __index.ts__ in our current directory, 
-an output file called __bundle.js__ 
-and our TypeScript loader that is in charge of compiling our TypeScript file to JavaScript. We also add `resolve.extensions` to instruct webpack what file extensions to use when resolving Typescript modules.
 
-## Typescript loaders
+这个例子里我们指定了入口起点为当前目录的 __index.ts__ 文件，输出文件命名为 __bundle.js__，以及负责把 TypeScript 编译成 JavaScript 的 TypeScript loader，同时也添加了 `resolve.extensions` 来告诉 webpack 在解析查找 TypeScript 模块时该检索哪些文件扩展名。
+ 
+## TypeScript loaders
 
-Currently there are 2 loaders for TypeScript available:
+当前有 2 个可用的 TypeScript loader：
 * [awesome-typescript-loader](https://github.com/s-panferov/awesome-typescript-loader)
 * [ts-loader](https://github.com/TypeStrong/ts-loader)
 
-Awesome TypeScript loader has created a wonderful explanation of the 
-difference between awesome-typescript-loader and ts-loader. 
+Awesome TypeScript loader 文档里已经很好的解释了 awesome-typescript-loader 和 ts-loader 的区别。
 
-You can read more about it [here](https://github.com/s-panferov/awesome-typescript-loader#differences-between-ts-loader).
+可以阅读 [这篇文章](https://github.com/s-panferov/awesome-typescript-loader#differences-between-ts-loader) 了解更多。
 
-In this guide we will be using ts-loader as currently it is easier enabling additional webpack features such as importing non code assets into your project.
+在本指南中，我们将使用ts-loader，因为它更简便地启用额外的 webpack 功能，例如将非代码资源导入到项目中。
 
-## Enabling source maps
+## 启用 source maps 功能
 
-In order to enable source maps we first must configure TypeScript to output inline source maps to our compiled JavaScript files.
-This is done by setting the sourceMap property to true.
+为了启用 source maps 功能，首先必须配置 TypeScript 将 source maps 内联输出到编译好的 JavaScript 文件，可通过将 sourceMap 属性设置为 true 来实现。
 
 __tsconfig.json__
 ```json
@@ -95,9 +91,7 @@ __tsconfig.json__
 }
 ```
 
-Once TypeScript is configured to output source maps we need to tell webpack 
-to extract these source maps and pass them to the browser, this way we will get the source file
-exactly as we see it in our code editor.
+当开启了 TypeScript 的 source maps 输出特性后，我们需要告诉 webpack 来提取这些 source maps 并发送给浏览器，这样我们在浏览器看到的源码文件，就跟在代码编辑器中看到的一样。
 
 __webpack.config.js__
 ```js
@@ -127,41 +121,31 @@ module.exports = {
  devtool: 'inline-source-map',
 };
 ```
- 
-First we add a new loader called source-map-loader. 
 
-To install it run: 
+首先我们添加一个新 loader，名为 source-map-loader，运行下面的命令安装：
+`npm install --save-dev source-map-loader`。
 
-`npm install --save-dev source-map-loader`.
-
-Once the loader is installed we need to tell webpack we want to run this loader before any other loaders by using the `enforce: 'pre'` configuration flag.
-Finally we need to enable source maps in webpack by specifying the `devtool` property.
-Currently we use the 'inline-source-map' setting, to read more about this setting and see other options check out the [devtool documentation](https://webpack.js.org/configuration/devtool/).
-
- 
- 
+这个 loader 安装完成后，我们想让这个 loader 比其他任何 loader 都要先运行，可以使用 `enforce: 'pre'` 这个配置项来标记。最后，我们需要通过指定 `devtool` 来启用 webpack 的 source maps 功能，当前我们使用的是 'inline-source-map' 这个属性值。想了解更多关于这个属性值的特性和其他属性值选项，可以查看 [devtool 文档](https://webpack.js.org/configuration/devtool/)。 
 
 
-## Using 3rd Party Libraries
+## 使用第三方库
 
-When installing 3rd party libraries from npm, it is important to remember
-to install the typing definition for that library.
+当从 npm 安装第三方库时，记住一定要同时安装这个库的类型声明文件。
 
-You can install 3rd party library definitions from the @types repository.
+你可以从 @types 仓库找到并安装这些第三方库的类型声明文件。
 
-For example if we want to install lodash we can run the following command to get the typings for it:
+举个例子，如果想安装 lodash 这个库的类型声明文件，我们可以运行下面的命令：
 `npm install --save-dev @types/lodash`
 
-For more information see [this blog post](https://blogs.msdn.microsoft.com/typescript/2016/06/15/the-future-of-declaration-files/)
+想了解更多，可以查看[这篇文章](https://blogs.msdn.microsoft.com/typescript/2016/06/15/the-future-of-declaration-files/)
 
-## Importing non code assets
+## 导入非代码资源
 
-To use non code assets with TypeScript, we need to tell TypeScript how to defer the type for these imports.
+要在 TypeScript 里使用非代码资源，我们需要告诉 TypeScript 如何兼容这些导入类型。
 
-To do this we need to create a __custom.d.ts__ file.
-This file signifies custom definitions for TypeScript in our project.
+那么首先，我们需要在项目里创建 __custom.d.ts__ 文件，这个文件用来编写自定义的类型声明。
 
-In our __custom.d.ts__ file we need to provide a definition for svg imports, to do this we need to put the following content in this file:
+我们要想兼容 svg 类型的资源导入，就需要在 __custom.d.ts__ 文件里添加以下内容：
 
 ```typescript
 declare module "*.svg" {
@@ -170,10 +154,9 @@ declare module "*.svg" {
 }
 ```
 
-Here we declare a new module for svg by specifying any import that ends in __.svg__ and define the type for this module as any.
-If we wanted to be more explicit about this being a url we could define the type as string.
+上面代码为 svg 声明了一个新模块，使得 TypeScript 能够识别到 以 __.svg__ 结尾的资源导入，同时定义了这个模块的类型为任意类型（any）。如果我们想指定更加明确模块类型，假如可以判断出这是一个 url，那么我们可以将类型定义为字符串。
 
-This applies not only to svg but any custom loader you may want to use which includes css, scss, json or any other file you may wish to load in your project.
+这不仅适用于 svg，也适用于其他任何你想使用的自定义 loader，包括css，scss，json或是你希望加载到项目中的其他任何文件。
 
 ***