Angular2开发基础之TSC编译

2020-01-16 原文

本文首发简书 http://www.jianshu.com/p/b12ccfdfb0c1,欢迎转载，但请注明转载链接，谢谢！

蓝图

从接触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

效果展示

其中的各种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等配置文件。先看下这些配置文件中文官网的说明。

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

tsconfig.json 定义了 TypeScript 编译器如何从项目源文件生成 JavaScript 代码。

typings.json 为那些 TypeScript 编译器无法识别的库提供了别的定义文件。

package.json

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

添加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 typescript@2.0.6
npm install typescript --save-dev

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

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: '<h1>My App</h1>'
})

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,它不是我们的主角。现阶段，只需要点简单的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Angular 2 starter webpack</title>
</head>
<body>

<my-app>Loading...</my-app>

</body>
</html>

现在运行，浏览器没有 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.json 。
他们的作用就是为了解决上述提到 tsc 编译 ng2出现了error。

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

小结

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