翻译完了AOT编译

微调英文格式,把斜体改为粗体
This commit is contained in:
Zhicheng Wang 2017-04-27 13:19:49 +08:00
parent cb295b73f1
commit fe0320a43e
2 changed files with 72 additions and 16 deletions

View File

@ -38,8 +38,6 @@ a#toc
* [Rollup](#rollup) * [Rollup](#rollup)
[Rollup](#rollup)
* [Rollup Plugins](#rollup-plugins) * [Rollup Plugins](#rollup-plugins)
[Rollup插件](#rollup-plugins) [Rollup插件](#rollup-plugins)
@ -66,7 +64,7 @@ a#toc
* [Develop JIT along with AOT](#run-jit) * [Develop JIT along with AOT](#run-jit)
[先用JIT开发再进行AOT](#run-jit) [先用JIT开发再用AOT发布](#run-jit)
* [Tour of Heroes](#toh) * [Tour of Heroes](#toh)
@ -278,12 +276,20 @@ code-example(language="none" class="code-shell").
:marked :marked
***Component-relative template URLS*** ***Component-relative template URLS***
***相对于组件的模板URL***
The AOT compiler requires that `@Component` URLS for external templates and CSS files be _component-relative_. The AOT compiler requires that `@Component` URLS for external templates and CSS files be _component-relative_.
That means that the value of `@Component.templateUrl` is a URL value _relative_ to the component class file. That means that the value of `@Component.templateUrl` is a URL value _relative_ to the component class file.
For example, an `'app.component.html'` URL means that the template file is a sibling of its companion `app.component.ts` file. For example, an `'app.component.html'` URL means that the template file is a sibling of its companion `app.component.ts` file.
AOT编译器要求`@Component`中的外部模板和CSS文件的URL是*相对于组件的*。
这意味着`@Component.templateUrl`的值是一个*相对于*组件类文件的URL值。
例如,`'app.component.html'` URL表示模板文件与它相应的`app.component.ts`文件放在一起。
While JIT app URLs are more flexible, stick with _component-relative_ URLs for compatibility with AOT compilation. While JIT app URLs are more flexible, stick with _component-relative_ URLs for compatibility with AOT compilation.
而JIT应用的URL更灵活固定写成*相对于组件的*URL的形式对AOT编译的兼容性也更好。
:marked :marked
***Compiling the application*** ***Compiling the application***
@ -359,10 +365,16 @@ a#bootstrap
Make a copy of `main.ts` and name it `main-jit.ts`. Make a copy of `main.ts` and name it `main-jit.ts`.
This is the JIT version; set it aside as you may need it [later](#run-jit "Running with JIT"). This is the JIT version; set it aside as you may need it [later](#run-jit "Running with JIT").
复制一份`main.ts`并把它改名为`main-jit.ts`。
这就是JIT版本先把它放在一边我们[稍后](#run-jit "Running with JIT")会用到它。
Open `main.ts` and convert it to AOT compilation. Open `main.ts` and convert it to AOT compilation.
Switch from the `platformBrowserDynamic.bootstrap` used in JIT compilation to Switch from the `platformBrowserDynamic.bootstrap` used in JIT compilation to
`platformBrowser().bootstrapModuleFactory` and pass in the AOT-generated `AppModuleNgFactory`. `platformBrowser().bootstrapModuleFactory` and pass in the AOT-generated `AppModuleNgFactory`.
打开`main.ts`并把它改成AOT编译。
从`platformBrowserDynamic.bootstrap`改成使用`platformBrowser().bootstrapModuleFactory`并把`AppModuleNgFactory`的AOT编译结果传给它。
Here is AOT bootstrap in `main.ts` next to the original JIT version: Here is AOT bootstrap in `main.ts` next to the original JIT version:
这里是AOT版本`main.ts`中的引导过程下一个是你所熟悉的JIT版本。 这里是AOT版本`main.ts`中的引导过程下一个是你所熟悉的JIT版本。
@ -482,8 +494,6 @@ a#rollup-plugins
*RxJS* *RxJS*
*RxJS*
Rollup expects application source code to use `ES2015` modules. Rollup expects application source code to use `ES2015` modules.
Not all external dependencies are published as `ES2015` modules. Not all external dependencies are published as `ES2015` modules.
In fact, most are not. Many of them are published as _CommonJS_ modules. In fact, most are not. Many of them are published as _CommonJS_ modules.
@ -620,13 +630,25 @@ a#workflow
:marked :marked
## Workflow and convenience script ## Workflow and convenience script
## 工作流与便利脚本
You'll rebuild the AOT version of the application every time you make a change. You'll rebuild the AOT version of the application every time you make a change.
Those _npm_ commands are long and difficult to remember. Those _npm_ commands are long and difficult to remember.
每当修改时我们都将重新构建应用的AOT版本。
那些*npm*命令太长,很难记。
Add the following _npm_ convenience script to the `package.json` so you can compile and rollup in one command. Add the following _npm_ convenience script to the `package.json` so you can compile and rollup in one command.
把下列*npm*便利脚本添加到`package.json`中以便用一条命令就可以完成编译和Rollup打包工作。
+makeJson('cb-aot-compiler/ts/package.json', { paths: 'scripts.build:aot'}, "package.json (build:aot convenience script)") +makeJson('cb-aot-compiler/ts/package.json', { paths: 'scripts.build:aot'}, "package.json (build:aot convenience script)")
:marked :marked
Open a terminal window and try it. Open a terminal window and try it.
打开终端窗口,并试一下。
code-example(language="none" class="code-shell"). code-example(language="none" class="code-shell").
npm run build:aot npm run build:aot
@ -634,38 +656,70 @@ a#run-jit
:marked :marked
### Develop JIT along with AOT ### Develop JIT along with AOT
### 先用JIT开发再AOT发布
AOT compilation and rollup together take several seconds. AOT compilation and rollup together take several seconds.
You may be able to develop iteratively a little faster with SystemJS and JIT. You may be able to develop iteratively a little faster with SystemJS and JIT.
The same source code can be built both ways. Here's one way to do that. The same source code can be built both ways. Here's one way to do that.
AOT编译和Rollup打包加起来要花好几秒钟。
用SystemJS和JIT可以让开发期间的迭代更快一点。
同一套源码可以用这两种方式构建。下面是方法之一:
* Make a copy of `index.html` and call it `index-jit.html`. * Make a copy of `index.html` and call it `index-jit.html`.
复制一份`index.html`并命名为`index-jit.html`。
* Delete the script at the bottom of `index-jit.html` that loads `bundle.js` * Delete the script at the bottom of `index-jit.html` that loads `bundle.js`
删除`index-jit.html`底部用来加载`bundle.js`的脚本
* Restore the SystemJS scripts like this: * Restore the SystemJS scripts like this:
代之以如下的SystemJS脚本
+makeExample('cb-aot-compiler/ts/src/index-jit.html','jit','src/index-jit.html (SystemJS scripts)')(format='.') +makeExample('cb-aot-compiler/ts/src/index-jit.html','jit','src/index-jit.html (SystemJS scripts)')(format='.')
:marked :marked
Notice the slight change to the `system.import` which now specifies `src/app/main-jit`. Notice the slight change to the `system.import` which now specifies `src/app/main-jit`.
That's the JIT version of the bootstrap file that we preserved [above](#bootstrap). That's the JIT version of the bootstrap file that we preserved [above](#bootstrap).
注意,这里稍微修改了一下`system.import`,现在它指向了`src/app/main-jit`。
这就是我们[以前](#bootstrap)预留的JIT版本的引导文件。
:marked :marked
Open a _different_ terminal window and enter `npm start`. Open a _different_ terminal window and enter `npm start`.
打开*另一个*终端窗口,并输入`npm start`
code-example(language="none" class="code-shell"). code-example(language="none" class="code-shell").
npm start npm start
:marked :marked
That compiles the app with JIT and launches the server. That compiles the app with JIT and launches the server.
The server loads `index.html` which is still the AOT version, which you can confirm in the browser console. The server loads `index.html` which is still the AOT version, which you can confirm in the browser console.
Change the address bar to `index-jit.html` and it loads the JIT version. Change the address bar to `index-jit.html` and it loads the JIT version.
This is also evident in the browser console. This is also evident in the browser console.
它会使用JIT方式编译本应用并启动服务器。
服务器仍然加载的是AOT版的`index.html`,我们可以在浏览器的控制台中确认这一点。
在地址栏中改为`index-jit.html`它就会加载JIT版这同样可以在浏览器控制台中确认。
Develop as usual. Develop as usual.
The server and TypeScript compiler are in "watch mode" so your changes are reflected immediately in the browser. The server and TypeScript compiler are in "watch mode" so your changes are reflected immediately in the browser.
照常开发。服务器和TypeScript编译器都处于"监听模式",因此我们的修改都可以立刻反映到浏览器中。
To see those changes in AOT, switch to the original terminal and re-run `npm run build:aot`. To see those changes in AOT, switch to the original terminal and re-run `npm run build:aot`.
When it finishes, go back to the browser and use the back button to When it finishes, go back to the browser and use the back button to
return to the AOT version in the default `index.html`. return to the AOT version in the default `index.html`.
要对比AOT版的变化可以切换到原来的终端窗口中并重新运行`npm run build:aot`。
结束时,回到浏览器中,并用浏览器的后退按钮回到默认`index.html`中的AOT版本。
Now you can develop JIT and AOT, side-by-side. Now you can develop JIT and AOT, side-by-side.
现在我们就可以同时进行JIT和AOT开发了。
a#toh a#toh
.l-main-section .l-main-section
@ -699,8 +753,6 @@ a#jit-dev-aot-prod
***index.html*** ***index.html***
***index.html***
The JIT and AOT apps require their own `index.html` files because they setup and launch so differently. The JIT and AOT apps require their own `index.html` files because they setup and launch so differently.
JIT和AOT应用的设置和加载非常不一样因此它们需要各自的`index.html`文件。 JIT和AOT应用的设置和加载非常不一样因此它们需要各自的`index.html`文件。

View File

@ -59,6 +59,10 @@
margin: 0; margin: 0;
} }
} }
em {
font-style: normal;
font-weight: bold;
}
} }
.main-footer { .main-footer {