iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

微调

This commit is contained in:
Zhicheng Wang 2016-06-02 18:59:02 +08:00
parent 9164069f36
commit 05f4c9b8a0
1 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
public/docs/ts/latest/guide/webpack.jade
View File

@ -199,7 +199,7 @@ a(id="loaders")
:marked :marked
... it applies the `test` RegEx patterns. When a pattern matches the filename, Webpack processes the file with the associated loader. ... it applies the `test` RegEx patterns. When a pattern matches the filename, Webpack processes the file with the associated loader.
……它会使用`test`正则表达式进行模式匹配。如果一个模式匹配上文件名，Webpack就用它所关联的加载器处理这个文件。 ……它会使用`test`后面的正则表达式进行模式匹配。如果一个模式匹配上文件名，Webpack就用它所关联的加载器处理这个文件。
The first `import` file matches the `.ts` pattern so Webpack processes it with the `ts` (TypeScript) loader. The first `import` file matches the `.ts` pattern so Webpack processes it with the `ts` (TypeScript) loader.
The imported file doesn't match the second pattern so its loader is ignored. The imported file doesn't match the second pattern so its loader is ignored.
@ -212,8 +212,8 @@ a(id="loaders")
the `css` loader first (to flatten CSS `@import` and `url(...)` statements) and the `css` loader first (to flatten CSS `@import` and `url(...)` statements) and
then the `style` loader (to append the css inside *<style>* elements on the page). then the `style` loader (to append the css inside *<style>* elements on the page).
第二个`import`匹配上了第二个`.css`模式，在它上面我们有两个用(!)字符串联起来的加载器。 第二个`import`匹配上了第二个`.css`模式，它有两个用叹号字符(`!`)串联起来的加载器。
Webpack会*从右到左*逐个应用串联的加载器，于是它先应用了`css`加载器(用来平面化`@import`和`url(...)`语句)， Webpack会*从右到左*逐个应用串联的加载器，于是它先应用了`css`加载器(用来平面化CSS的`@import`和`url(...)`语句)，
然后应用了`style`加载器(用来把css追加到页面上的*<style>*元素中)。 然后应用了`style`加载器(用来把css追加到页面上的*<style>*元素中)。
a(id="plugins") a(id="plugins")
@ -226,7 +226,7 @@ a(id="plugins")
Webpack has a build pipeline with well-defined phases. Webpack has a build pipeline with well-defined phases.
We tap into that pipeline with plugins such as the `uglify` minification plugin: We tap into that pipeline with plugins such as the `uglify` minification plugin:
Webpack有一条划分成多个良好定义的阶段(phase)的构建流水线。 Webpack有一条构建流水线，它被划分成多个经过精心定义的阶段(phase)。
我们可以把插件（比如`uglify`代码最小化插件）挂到流水线上： 我们可以把插件（比如`uglify`代码最小化插件）挂到流水线上：
+makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'plugins')(format=".") +makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'plugins')(format=".")
@ -239,7 +239,7 @@ a(id="configure-webpack")
After that brief orientation, we are ready to build our own Webpack configuration for Angular 2 apps. After that brief orientation, we are ready to build our own Webpack configuration for Angular 2 apps.
在简短的培训之后，我们准备为Angular 2应用构建一份自己的Webpack配置了。 经过简短的培训之后，我们准备为Angular 2应用构建一份自己的Webpack配置了。
Begin by setting up the development environment. Begin by setting up the development environment.
@ -277,7 +277,7 @@ code-example(format="").
:marked :marked
Many of these files and much of their content should be familiar from other Angular 2 documentation chapters. Many of these files and much of their content should be familiar from other Angular 2 documentation chapters.
这些文件及其内容多数都在其它Angular 2文档中见过，应该比较熟悉了。 这些文件及其内容多数都在其它Angular 2文档中见过了，应该比较熟悉。
Learn about the `package.json` in the [npm packages](../guide/npm-packages.html) chapter. Learn about the `package.json` in the [npm packages](../guide/npm-packages.html) chapter.
We require packages for Webpack use in addition to the ones listed in that chapter. We require packages for Webpack use in addition to the ones listed in that chapter.
@ -319,7 +319,7 @@ a(id="common-configuration")
Webpack is a NodeJS-based tool so its configuration is a JavaScript _commonjs_ module file Webpack is a NodeJS-based tool so its configuration is a JavaScript _commonjs_ module file
that begins with `require` statements as such files do. that begins with `require` statements as such files do.
Webpack是一个基于NodeJS的工具，所以它的配置文件就是一个JavaScript的_CommonJS_模块文件，像常规的写法一样，它开始于`require`语句。 Webpack是一个基于NodeJS的工具，所以它的配置文件就是一个JavaScript的_CommonJS_模块文件，它像常规写法一样以`require`语句开始。
The configuration exports several objects, beginning with the *entries* described earlier: The configuration exports several objects, beginning with the *entries* described earlier:
@ -356,7 +356,7 @@ a(id="common-configuration")
We _might_ write `import` statements with explicit extensions as in this example: We _might_ write `import` statements with explicit extensions as in this example:
我们的程序将需要`import`十多个(如果不是上百个的话)JavaScript和TypeScript文件。 我们的程序将需要`import`十多个(如果不是上百个的话)JavaScript和TypeScript文件。
我们_可能_会带着明确的扩展名来写这些`import`语句，就像下面的例子中这样： 我们_可以_带着明确的扩展名来写这些`import`语句，就像下面的例子中这样：
+makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'single-import')(format=".") +makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'single-import')(format=".")
@ -396,7 +396,7 @@ a(id="common-configuration")
* images/fonts - Images and fonts are bundled as well. * images/fonts - Images and fonts are bundled as well.
* images/fonts - 图片和字体文件也能被打包。 * images/fonts - 图片和字体文件也能被打包。
* css - The pattern matches application-wide styles; the second handles component-scoped styles (the ones specified in a component's `styleUrls` metadata property). * css - The pattern matches application-wide styles; the second handles component-scoped styles (the ones specified in a component's `styleUrls` metadata property).
* css - 这个模式匹配应用级样式，第二个处理组件局部样式(就是在组件元数据的`styleUrls`属性中指定的那些)。 * css - 第一个模式匹配应用级样式，第二个模式匹配组件局部样式(就是在组件元数据的`styleUrls`属性中指定的那些)。
.l-sub-section .l-sub-section
:marked :marked
The first pattern excludes `.css` files within the `/src/app` directories where our component-scoped styles sit. The first pattern excludes `.css` files within the `/src/app` directories where our component-scoped styles sit.
@ -452,7 +452,7 @@ a(id="html-webpack-plugin")
Webpack can inject those scripts and links for us with the `HtmlWebpackPlugin`. Webpack can inject those scripts and links for us with the `HtmlWebpackPlugin`.
Webpack生成了一些js和css文件。 Webpack生成了一些js和css文件。
我们_可以__手动_把它们插入到`index.html`中。那样既枯燥又容易出错。 虽然我们_可以手动_把它们插入到`index.html`中，但那样既枯燥又容易出错。
Webpack可以通过`HtmlWebpackPlugin`自动为我们注入那些`script`和`link`标签。 Webpack可以通过`HtmlWebpackPlugin`自动为我们注入那些`script`和`link`标签。
a(id="environment-configuration") a(id="environment-configuration")
@ -496,19 +496,19 @@ a(id="development-configuration")
So we won't find any files in the `dist` folder (at least not any generated from `this development build`). So we won't find any files in the `dist` folder (at least not any generated from `this development build`).
虽然我们告诉Webpack把输出包儿放到`dist`目录，但实际上开发服务器把这些包儿都放在了内存里，而不会把它们写到硬盘中。 虽然我们告诉Webpack把输出包儿放到`dist`目录，但实际上开发服务器把这些包儿都放在了内存里，而不会把它们写到硬盘中。
于是我们在`dist`目录下将找不到任何文件(至少现在这个开发环境下构建时没有)。 所以我们在`dist`目录下将找不到任何文件(至少现在这个开发环境下构建时没有)。
The `HtmlWebpackPlugin` (added in `webpack.common.js`) use the *publicPath* and the *filename* settings to generate The `HtmlWebpackPlugin` (added in `webpack.common.js`) use the *publicPath* and the *filename* settings to generate
appropriate <script> and <link> tags into the `index.html`. appropriate <script> and <link> tags into the `index.html`.
`HtmlWebpackPlugin`(添加自`webpack.common.js`)插件使用*`publicPath`*和*`filename`*设置来 `HtmlWebpackPlugin`(添加自`webpack.common.js`)插件使用*`publicPath`*和*`filename`*设置，
向`index.html`中插入适当的<script>和<link>标签。 来向`index.html`中插入适当的<script>和<link>标签。
Our CSS are buried inside our Javascript bundles by default. The `ExtractTextPlugin` extracts them into Our CSS are buried inside our Javascript bundles by default. The `ExtractTextPlugin` extracts them into
external `.css` files that the `HtmlWebpackPlugin` inscribes as <link> tags into the `index.html`. external `.css` files that the `HtmlWebpackPlugin` inscribes as <link> tags into the `index.html`.
我们这些CSS默认情况下被埋没在JavaScript包儿中。`ExtractTextPlugin`会把它们提取成外部`.css`文件， 我们这些CSS默认情况下会被埋没在JavaScript包儿中。`ExtractTextPlugin`会把它们提取成外部`.css`文件，
这样`HtmlWebpackPlugin`插件就会转而把一个<link>标签写进`index.html`了。 这样`HtmlWebpackPlugin`插件就会转而把一个<link>标签写进`index.html`了。
Refer to the Webpack documentation for details on these and other configuration options in this file Refer to the Webpack documentation for details on these and other configuration options in this file
@ -538,7 +538,7 @@ a(id="production-configuration")
:marked :marked
We don't use a development server. We're expected to deploy the application and its dependencies to a real production server. We don't use a development server. We're expected to deploy the application and its dependencies to a real production server.
我们不会使用开发服务器，而是希望把应用程序及其依赖部署到一个真实的产品服务器中。 我们不会在产品环境下使用开发服务器，而是希望把应用程序及其依赖都部署到一个真实的产品服务器中。
This time the output bundle files are physically placed in the `dist` folder. This time the output bundle files are physically placed in the `dist` folder.
@ -567,7 +567,7 @@ a(id="production-configuration")
Thanks to the *DefinePlugin* and the `ENV` variable defined at top, we can enable Angular 2 production mode like this: Thanks to the *DefinePlugin* and the `ENV` variable defined at top, we can enable Angular 2 production mode like this:
感谢*DefinePlugin*和顶部定义的`ENV`变量，我们可以像这样启用Angular 2的产品模式了： 感谢*DefinePlugin*和顶部定义的`ENV`变量，我们就可以像这样启用Angular 2的产品模式了：
+makeExample('webpack/ts/src/main.ts', 'enable-prod')(format=".") +makeExample('webpack/ts/src/main.ts', 'enable-prod')(format=".")