angular2 学习笔记 ( aot & production 预编辑 & 出街 )

refer : 

https://angular.cn/docs/ts/latest/cookbook/aot-compiler.html

 

在项目正式上架时咱们得作最后的优化. 那就是预先编辑啦.

依据官方的教程就能够实现了. 这里只是说一下我遇到的坑.

 

step 1 : 作一个 quick start project ( 把 main.ts 和 index.html 的内容换一换哦 )

step 2 : 载 main.ts 加上 enableProdMode();

import {enableProdMode} from '@angular/core';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

step 3 : 根目录下运行 cmd : npm install @angular/compiler-cli @angular/platform-server --save 

安装 angular2 的预编辑器 ( 它是用来替代掉 tsc (TypeScript) 编辑器的哦 )

step 4 : 根目录下建立 tsconfig-aot.json

step 5 : node_modules/.bin 目录下运行 cmd : ngc -p ../../tsconfig-aot.json 

../../ 是依据你运行 cmd 的目录到你存放 tsconfig-aot.json 的目录而决定的. ( 意思是 : 从运行 cmd 的目录 node_modules/,bin 经过 ../../ 就能够找到 tsconfig-aot.json  这个文件 )

这句就是运行 angular2 预编辑器了 

到这里 angular2 预编辑算完成了，不过还有一个叫 tree shaking 的优化咱们也是能够作. 使用 rollup 插件

step 6 : 根目录下运行 cmd : npm install rollup rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-uglify --save-dev

import rollup      from 'rollup'
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs    from 'rollup-plugin-commonjs';
import uglify      from 'rollup-plugin-uglify'

export default {
  entry: '../../app/main.js',
  dest: '../../dist/build.js', // output a single application bundle
  sourceMap: false,
  format: 'iife',
  plugins: [
      nodeResolve({jsnext: true, module: true}),
      commonjs({
        include: '../../node_modules/rxjs/**',
      }),
      uglify()
  ]
}

关键就添加了 ../../ ( 这里和刚才 angular2 预编辑有区别哦, 刚才的 tsconfig-aot.json 文件内容也是有使用到 path 不过并不须要添加 ../../ 我也不知道为何 )

step 7 : 在 node_modules/.bin 目录下运行 cmd : rollup -c ../../rollup.js ( 也是要 ../../ )

step 8 : 搞定！ 能够 publish to server 了，要在本地 test 的话不要使用 npm start 了 ( 这个好像会容许 typescript 咱们不要 tsc 编辑了 ) 改用 cmd : npm run lite 吧.