Angular2开发基础之TSC编译

蓝图

从接触ng2开始就有个想法， 要把学到的东西快速实践，做个有逼格项目。直到看到 破狼博客中 提到的 rebirth， 一个基于ng2的前端项目， 就开始躁动了，想捣鼓成一个完整的项目， 作为自己的在线博客系统。

对于只有移动端经验的我， 要在短时间内熟练使用前端的技术框架以及工具链，还是有不少东西需要学习， 幸好有强大的社区群体。

目标

• 一个博客系统涉及的技术栈太多，那就先来个小目标好了。使用Webpack打包完成一个简单的angular2 Demo，让它成为一个ng2-seed项目, 后续可以在它基础上做新的功能开发。也为后续替换 英雄指南 中的SystemJS为Webpack做准备。
• 常用配置文件的说明： package.json, tsconfig.json, typings.json, webpack.config.js
• webpack如何配置 (下篇文章)
• webpack-dev-server如何启动 (下篇文章)
  完整代码 -> 传送门

环境

需要说明，本教程仅是Windows的实操，Linux，Mac环境，会有不同。

• Windows 10 64位
• gitBash version 2.9.0.windows.1
• NodeJs version 6.8.0
• npm version 3.10.8
• IntelliJ IDEA 15

效果展示

ng2-starter-overview.png

其中的各种json配置文件，ts文件，dist, node_modules， index.html后续会有说明。
上图展示的是典型的ng2项目结构， 开发依赖库node_moudles, 源码src， index入口，ts入口， 编译混淆后的dist等。

实操

读者最好先仔细阅读 ng2 快速起步 文章，对照上述内容，完成自己的First App, 对其中出现的关键词，有个印象。便于我们接下来的理解。

step 1 ： 创建并配置项目

使用gitBash 进入工作目录

mkdir ng2-starter-webpack
cd ng2-starter-webpack

接下来需要创建package.json等配置文件。先看下这些配置文件中文官网的说明。

1. package.json 用来标记出本项目所需的 npm 依赖包。

2. tsconfig.json 定义了 TypeScript 编译器如何从项目源文件生成 JavaScript 代码。
3. typings.json 为那些 TypeScript 编译器无法识别的库提供了别的定义文件。

package.json

该package.json 有多种方式：最简单方法， 直接从其他地方copy过来修改。
这里介绍 npm init方式， 熟悉git 同学都知道，git init的含义，同样的 npm init就是初始化package.json内容，并且会创建该json文件。按照提示一步步回车，就完成了。

npm init.png

添加ng2相关依赖库

注意，本文并不是按照 **快速起步 ** 样式来写。当我实操 快速起步 过程中，仅仅是按照文档来做，至于为什么，不清楚， 但当我看 【破狼】rebirth时候，发现对ng2的相关配置不熟悉，无法更好的工作。回头再来按照自己的理解梳理一遍。

先把package.json中的一些内容删除，暂时没有使用：

"main": "index.js",
"scripts": {  "test": "echo \"Error: no test specified\" && exit 1"},

添加 ng2相关依赖库，可以使用 npm来安装：

1. npm install xxxpackage --save-dev 
2. npm install xxxpackage --save 
3. npm install xxxpackage -g

其中, --save-dev, 会在package.json 中 devDependencies出现, --save 会在 dependencies字段中出现。 -g 是将依赖包安装在全局，也就是你安装npm所在的系统目录中。

当然，我这里偷懒，直接copy 快速起步 中的ng2配置。

"dependencies": { 
  "@angular/common": "~2.0.1", 
  "@angular/compiler": "~2.0.1",  
 "@angular/core": "~2.0.1", 
 "@angular/forms": "~2.0.1",  
 "@angular/http": "~2.0.1",  
 "@angular/platform-browser": "~2.0.1", 
 "@angular/platform-browser-dynamic": "~2.0.1",  
 "@angular/router": "~3.0.1",  
 "@angular/upgrade": "~2.0.1",  
 "angular-in-memory-web-api": "~0.1.1",  
 "bootstrap": "^3.3.7", 
 "core-js": "^2.4.1", 
 "reflect-metadata": "^0.1.8",  
 "rxjs": "5.0.0-beta.12", 
 "zone.js": "^0.6.25"
}

使用 npm install安装ng2依赖库。 注意网络的畅通，建议将npm安装源修改为国内淘宝的，方法百度。

添加TypeScript库

ng2首选使用ts开发，npm安装ts，提示大家使用全局和局部安装方法，好处是全局使用。

npm install typescript -g
npm install -g [email protected]
npm install typescript --save-dev 

其中的 @x.x.x就是告诉npm，你需要哪个版本的ts。

2种方式查看tsc版本

1.  $(npm bin)/tsc -v
2.  tsc -v

step 2 创建应用和组件

mkdir src
cd src
mkdir app

分别按照 快速起步 中步骤2， 步骤3添加内容。其中有具体的描述作用。

@app.module.ts

import { NgModule } from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';

@NgModule({
    imports:        [BrowserModule],
    declarations:   [AppComponent],
    bootstrap:      [AppComponent]
})
export class AppModule{}

@app.component.ts

import {Component} from '@angular/core';

@Component({
    selector: 'my-app',
    template: '
My App
'
})

export class AppComponent{}

step 3 启动应用

在app同级目录创建 文件@main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from  './app/app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

至于为什么要添加这个启动main.ts, 中文官方文档说明如下：

为什么要分别创建 main.ts 、应用模块 和应用组件的文件呢？

应用的引导过程与 创建模块或者 展现视图是相互独立的关注点。如果该组件不会试图运行整个应用，那么测试它就会更容易。

引导过程与平台有关的
但我们应该用正确的方式组织 Angular 应用的文件结构。 启动 App 与展现视图是两个相互分离的关注点。 把这些关注点混在一起会增加不必要的难度。 可以通过使用不同的引导器 (bootstraper) 来在不同的环境中启动 AppComponent
。 测试组件也变得更容易，因为不需要再运行整个程序才能跑测试。 让我们多花一点精力来用 *“正确的方式” *实现它。

step 4 宿主页面index.html

注意，这里跟快速起步 中的 【步骤 5 ：定义该应用的宿主页面】有区别，不要参考那里面的内容，因为有 systemjs.config.js, 它不是我们的主角。现阶段，只需要点简单的内容。

    
    



Loading...

现在运行，浏览器没有 My App 效果， 仅仅是 Loading... 字样！

step 5 TSC编译运行ng2

这里已经跟 快速起步 不一样了，原因是，我们需要稍微深入一点TS编译命令， 有助于理解package.json中 script： 各种命令。

添加tsconfig.json

为了更好的设置tsc编译所需的参数， 添加tsconfig.json文件。

{
  "compilerOptions":{
    "target": "es5",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

其中的 参数说明，请参考： 编译选项

参数说明

在实际开发中，需要将src 以及编译生成的东西分开，目标目录可以 是 dist。在gitBash终端中项目根目录执行如下命令：
tsc --rootDir src --outDir dist 或者 $(npm bin)/tsc --rootDir src --outDir dist
忽略执行中的错误信息，查看 根目录 下多了 dist 文件以及其中的内容。

typings.json

刚才编译tsc中，会发现有一些 error出现， 如：

node_modules/@angular/platform-browser/src/facade/collection.d.ts(10,23): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(11,25): error TS2304: Cannot find name 'Map'.
node_modules/rxjs/Observable.d.ts(10,66): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(66,60): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(66,70): error TS2304: Cannot find name 'Promise'.

其中类似 Promise, Map 是已经加入到了ES6的 specification中，但是typescript还不认识这些 Promise对象的原因是我们在 tsconfig.json中使用的 es5, 那就直接修改为 es6看看，结果是没有错误了，但是，不能使用 es6, 因为兼容性的问题。

解决该问题，还需要其他的手段了。注意，在前面，已经引入了 core-js等库， 这个库就包含了es6中的Object，比如Promise等， 所以，我们只需要通过某种方式告知ts编译器 我们提供了这些 库的Object。
这里就要使用了typings工具了， npm 安装

npm install --save-dev typings

$(npm bin)/typings -v
$(npm bin)/typings search core-js
$(npm bin)/typings install --global --save dt~core-js

typings 命令图示

完成上述 几个步骤，就可以看到 根目录多了 文件夹 typings , typings.json 。
他们的作用就是为了解决上述提到 tsc 编译 ng2出现了error。

再次执行 $(npm bin)/tsc --rootDir src --outDir dist 就没有任何问题了！

小结

写到这里 tsc编译ng2以及会出现的问题都解决了，但是 My App 还是没法显示，这个在下篇中说明。