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