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 吧.