fix: 翻译完了TS配置和发布的剩余部分

This commit is contained in:
Zhicheng Wang 2018-03-15 17:10:51 +08:00
parent 8a711cba59
commit 95b04faeff
2 changed files with 68 additions and 2 deletions

View File

@ -76,8 +76,13 @@ Although deploying directly from the development environment works,
you can generate an optimized build with additional CLI command line flags, you can generate an optimized build with additional CLI command line flags,
starting with `--prod`. starting with `--prod`.
虽然也可以直接用开发环境的设置进行部署,不过你也可以使用 CLI 命令的其它标志生成一个优化过的构建成果。
先来看 `--prod`
### Build with _--prod_ ### Build with _--prod_
### 使用 `--prod` 构建。
<code-example language="none" class="code-shell"> <code-example language="none" class="code-shell">
ng build --prod ng build --prod
@ -86,6 +91,8 @@ starting with `--prod`.
The `--prod` _meta-flag_ engages the following optimization features. The `--prod` _meta-flag_ engages the following optimization features.
`--prod` *元标志*包括下列优化特性。
* [Ahead-of-Time (AOT) Compilation](guide/aot-compiler): pre-compiles Angular component templates. * [Ahead-of-Time (AOT) Compilation](guide/aot-compiler): pre-compiles Angular component templates.
[预(AOT)编译](guide/aot-compiler):预编译 Angular 组件的模板。 [预(AOT)编译](guide/aot-compiler):预编译 Angular 组件的模板。
@ -116,6 +123,8 @@ The remaining [copy deployment steps](#copy-files) are the same as before.
You may further reduce bundle sizes by adding the `build-optimizer` flag. You may further reduce bundle sizes by adding the `build-optimizer` flag.
你还可以添加 `build-optimizer` 标志来进一步缩减打包体积。
<code-example language="none" class="code-shell"> <code-example language="none" class="code-shell">
ng build --prod --build-optimizer ng build --prod --build-optimizer
@ -125,6 +134,8 @@ You may further reduce bundle sizes by adding the `build-optimizer` flag.
See the [CLI Documentation](https://github.com/angular/angular-cli/wiki/build) See the [CLI Documentation](https://github.com/angular/angular-cli/wiki/build)
for details about available build options and what they do. for details about available build options and what they do.
参见 [CLI 文档](https://github.com/angular/angular-cli/wiki/build),来了解可用的构建选项及其用途的详细信息。
{@a enable-prod-mode} {@a enable-prod-mode}
### Enable production mode ### Enable production mode
@ -149,6 +160,9 @@ Switching to _production mode_ can make it run faster by disabling development s
Building for production (or appending the `--environment=prod` flag) enables _production mode_ Building for production (or appending the `--environment=prod` flag) enables _production mode_
Look at the CLI-generated `main.ts` to see how this works. Look at the CLI-generated `main.ts` to see how this works.
为生产环境构建(或添加 `--environment=prod` 标志)可以启用*生产模式*。
查看 CLI 自动生成的 `main.ts` 文件来了解它的工作原理。
{@a lazy-loading} {@a lazy-loading}
### Lazy loading ### Lazy loading
@ -196,10 +210,14 @@ The CLI runs the
[Angular Ahead-of-Time Webpack Plugin](https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack) [Angular Ahead-of-Time Webpack Plugin](https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack)
which automatically recognizes lazy loaded `NgModules` and creates separate bundles for them. which automatically recognizes lazy loaded `NgModules` and creates separate bundles for them.
CLI 会运行 [Angular AOT 编译 Webpack 插件](https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack),它会自动识别出那些需要惰性加载的 `NgModule`,并为它们创建单独的文件包。
{@a measure} {@a measure}
### Measure performance ### Measure performance
### 性能测量
You can make better decisions about what to optimize and how when you have a clear and accurate understanding of You can make better decisions about what to optimize and how when you have a clear and accurate understanding of
what's making the application slow. what's making the application slow.
The cause may not be what you think it is. The cause may not be what you think it is.
@ -215,8 +233,8 @@ The
<a href="https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing" title="Chrome DevTools Network Performance"> <a href="https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing" title="Chrome DevTools Network Performance">
Chrome DevTools Network Performance page</a> is a good place to start learning about measuring performance. Chrome DevTools Network Performance page</a> is a good place to start learning about measuring performance.
<a href="https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing" target="_blank" title="Chrome DevTools Network Performance"> <p><a href="https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing" target="_blank" title="Chrome DevTools Network Performance">
Chrome开发工具的网络性能页</a>是开始学习度量性能的好地方。 Chrome开发工具的网络性能页</a>是开始学习度量性能的好地方。</p>
The [WebPageTest](https://www.webpagetest.org/) tool is another good choice The [WebPageTest](https://www.webpagetest.org/) tool is another good choice
that can also help verify that your deployment was successful. that can also help verify that your deployment was successful.
@ -227,11 +245,17 @@ that can also help verify that your deployment was successful.
### Inspect the bundles ### Inspect the bundles
### 深入探查文件包bundle
The <a href="https://github.com/danvk/source-map-explorer/blob/master/README.md">source-map-explorer</a> The <a href="https://github.com/danvk/source-map-explorer/blob/master/README.md">source-map-explorer</a>
tool is a great way to inspect the generated JavaScript bundles after a production build. tool is a great way to inspect the generated JavaScript bundles after a production build.
<a href="https://github.com/danvk/source-map-explorer/blob/master/README.md">source-map-explorer</a> 是在生产环境构建中深入探查所生成的文件包的好工具。
Install `source-map-explorer`: Install `source-map-explorer`:
安装 `source-map-explorer`
<code-example language="none" class="code-shell"> <code-example language="none" class="code-shell">
npm install source-map-explorer --save-dev npm install source-map-explorer --save-dev
@ -240,6 +264,8 @@ Install `source-map-explorer`:
Build your app for production _including the source maps_ Build your app for production _including the source maps_
构建*带源码映射*的生产版本
<code-example language="none" class="code-shell"> <code-example language="none" class="code-shell">
ng build --prod --sourcemaps ng build --prod --sourcemaps
@ -248,6 +274,8 @@ Build your app for production _including the source maps_
List the generated bundles in the `dist/` folder. List the generated bundles in the `dist/` folder.
列出 `dist/` 文件夹中生成的文件包。
<code-example language="none" class="code-shell"> <code-example language="none" class="code-shell">
ls dist/*.bundle.js ls dist/*.bundle.js
@ -257,6 +285,9 @@ List the generated bundles in the `dist/` folder.
Run the explorer to generate a graphical representation of one of the bundles. Run the explorer to generate a graphical representation of one of the bundles.
The following example displays the graph for the _main_ bundle. The following example displays the graph for the _main_ bundle.
运行这个源码映射浏览器,以生成文件包之一的图形化表示。
下面的例子中就是 `main` 这个文件包的图形。
<code-example language="none" class="code-shell"> <code-example language="none" class="code-shell">
node_modules/.bin/source-map-explorer dist/main.*.bundle.js node_modules/.bin/source-map-explorer dist/main.*.bundle.js
@ -266,8 +297,12 @@ The following example displays the graph for the _main_ bundle.
The `source-map-explorer` analyzes the source map generated with the bundle and draws a map of all dependencies, The `source-map-explorer` analyzes the source map generated with the bundle and draws a map of all dependencies,
showing exactly which classes are included in the bundle. showing exactly which classes are included in the bundle.
`source-map-explorer` 分析了文件包生成的源码映射信息,并画出了所有这些依赖的地图,准确的展示了这个包中包含了哪些类。
Here's the output for the _main_ bundle of the QuickStart. Here's the output for the _main_ bundle of the QuickStart.
下面是《快速起步》一章生成的 `main` 文件包的输出。
<figure> <figure>
<img src="generated/images/guide/cli-quickstart/quickstart-sourcemap-explorer.png" alt="quickstart sourcemap explorer"> <img src="generated/images/guide/cli-quickstart/quickstart-sourcemap-explorer.png" alt="quickstart sourcemap explorer">
</figure> </figure>
@ -276,6 +311,8 @@ Here's the output for the _main_ bundle of the QuickStart.
## The `base` tag ## The `base` tag
## `base` 标签
The HTML [_&lt;base href="..."/&gt;_](/guide/router) The HTML [_&lt;base href="..."/&gt;_](/guide/router)
specifies a base path for resolving relative URLs to assets such as images, scripts, and style sheets. specifies a base path for resolving relative URLs to assets such as images, scripts, and style sheets.
For example, given the `<base href="/my/app/">`, the browser resolves a URL such as `some/place/foo.jpg` For example, given the `<base href="/my/app/">`, the browser resolves a URL such as `some/place/foo.jpg`
@ -309,34 +346,59 @@ the subfolder is `my/app/` and you should add `<base href="/my/app/">` to the se
When the `base` tag is mis-configured, the app fails to load and the browser console displays `404 - Not Found` errors When the `base` tag is mis-configured, the app fails to load and the browser console displays `404 - Not Found` errors
for the missing files. Look at where it _tried_ to find those files and adjust the base tag appropriately. for the missing files. Look at where it _tried_ to find those files and adjust the base tag appropriately.
当没有配置 `base` 标签时,加载应用就会失败,浏览器的控制台中会为这些缺失的文件显示一些 `404 - Not Found` 错误。
看看浏览器*试图*从哪里找这些文件,然后调整出合适的 base 标签。
## _build_ vs. _serve_ ## _build_ vs. _serve_
## *构建*与*服务*
You'll probably prefer `ng build` for deployments. You'll probably prefer `ng build` for deployments.
你会更喜欢用 `ng build` 进行部署。
The **ng build** command is intended for building the app and deploying the build artifacts elsewhere. The **ng build** command is intended for building the app and deploying the build artifacts elsewhere.
The **ng serve** command is intended for fast, local, iterative development. The **ng serve** command is intended for fast, local, iterative development.
**ng build** 命令的设计意图是构建该应用,并且把构建成果部署到别处。
而**ng serve** 命令的设计意图是快速进行本地的迭代式开发。
Both `ng build` and `ng serve` **clear the output folder** before they build the project. Both `ng build` and `ng serve` **clear the output folder** before they build the project.
The `ng build` command writes generated build artifacts to the output folder. The `ng build` command writes generated build artifacts to the output folder.
The `ng serve` command does not. The `ng serve` command does not.
It serves build artifacts from memory instead for a faster development experience. It serves build artifacts from memory instead for a faster development experience.
在开始构建项目之前,`ng build` 和 `ng serve` **都会清空输出文件夹**
`ng build` 命令会把生成的构建成果写入输出文件夹中,但 `ng serve` 命令并不会如此。
它会用内存中的构建成果提供服务,以获得更快速的开发体验。
<div class="l-sub-section"> <div class="l-sub-section">
The output folder is `dist/` by default. The output folder is `dist/` by default.
To output to a different folder, change the `outDir` in `.angular-cli.json`. To output to a different folder, change the `outDir` in `.angular-cli.json`.
默认的输出文件夹是 `dist/`
要输出到其它文件夹中,请修改 `.angular-cli.json` 中的 `outDir`
</div> </div>
The `ng serve` command builds, watches, and serves the application from a local CLI development server. The `ng serve` command builds, watches, and serves the application from a local CLI development server.
`ng serve` 命令会构建、监听并使用本地的 CLI 开发服务器作为服务器。
The `ng build` command generates output files just once and does not serve them. The `ng build` command generates output files just once and does not serve them.
The `ng build --watch` command will regenerate output files when source files change. The `ng build --watch` command will regenerate output files when source files change.
This `--watch` flag is useful if you're building during development and This `--watch` flag is useful if you're building during development and
are automatically re-deploying changes to another server. are automatically re-deploying changes to another server.
`ng build` 命令只会生成一次这些输出文件,而不会用它们提供服务。
`ng build --watch` 命令会在源码变化的时候重新生成输出文件。
当你在开发期间需要不断构建并自动把修改后的版本发布到另一台服务器的时候,这个 `--watch` 标志会很有用。
See the [CLI `build` topic](https://github.com/angular/angular-cli/wiki/build) for more details and options. See the [CLI `build` topic](https://github.com/angular/angular-cli/wiki/build) for more details and options.
参见 [CLI 中的 `build` 主题](https://github.com/angular/angular-cli/wiki/build)以了解详情以及其它选项。
<hr> <hr>
{@a server-configuration} {@a server-configuration}

View File

@ -217,6 +217,10 @@ QuickStart doesn't require these typings but many of the samples do.
{@a target} {@a target}
### *target* ### *target*
### *编译目标target*
By default, the target is `es5`, you can configure the target to `es6` if you only want to deploy the application to By default, the target is `es5`, you can configure the target to `es6` if you only want to deploy the application to
es6 compatible browser. But if you configure the target to `es6` in some old browser such as `IE`, `Syntax Error` will be thrown. es6 compatible browser. But if you configure the target to `es6` in some old browser such as `IE`, `Syntax Error` will be thrown.
默认情况下,编译目标是 `es5`,如果你只想发布到兼容 es6 的浏览器中,也可以把它配置为 `es6`
不过,如果配置为 `es6`,那么一些老的浏览器(如 `IE` )中就会抛出 `Syntax Error` 错误。