Angular2开发基础之TSC编译
2016-11-03 14:05
281 查看
本文首发简书 http://www.jianshu.com/p/b12ccfdfb0c1, 欢迎转载,但请注明转载链接,谢谢!
对于只有移动端经验的我, 要在短时间内熟练使用前端的技术框架以及工具链,还是有不少东西需要学习, 幸好有强大的社区群体。
常用配置文件的说明: package.json, tsconfig.json, typings.json, webpack.config.js
webpack如何配置 (下篇文章)
webpack-dev-server如何启动 (下篇文章)
完整代码 -> 传送门
- 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等。
接下来需要创建package.json等配置文件。先看下这些配置文件中文官网的说明。
package.json 用来标记出本项目所需的 npm 依赖包。
tsconfig.json 定义了 TypeScript 编译器如何从项目源文件生成 JavaScript 代码。
typings.json 为那些 TypeScript 编译器无法识别的库提供了别的定义文件。
这里介绍
先把package.json中的一些内容删除,暂时没有使用:
添加 ng2相关依赖库,可以使用 npm来安装:
其中,
当然,我这里偷懒,直接copy 快速起步 中的ng2配置。
使用 npm install安装ng2依赖库。 注意网络的畅通,建议将npm安装源修改为国内淘宝的,方法百度。
其中的
分别按照 快速起步 中步骤2, 步骤3添加内容。其中有具体的描述作用。
@app.module.ts
@app.component.ts
至于为什么要添加这个启动main.ts, 中文官方文档说明如下:
为什么要分别创建 main.ts 、应用模块 和应用组件的文件呢?
应用的引导过程与 创建模块或者 展现视图是相互独立的关注点。如果该组件不会试图运行整个应用,那么测试它就会更容易。
引导过程与平台有关的
但我们应该用正确的方式组织 Angular 应用的文件结构。 启动 App 与展现视图是两个相互分离的关注点。 把这些关注点混在一起会增加不必要的难度。 可以通过使用不同的引导器 (bootstraper) 来在不同的环境中启动 AppComponent
。 测试组件也变得更容易,因为不需要再运行整个程序才能跑测试。 让我们多花一点精力来用 “正确的方式” 实现它。
现在运行,浏览器没有 My App 效果, 仅仅是 Loading… 字样!
其中的 参数说明,请参考: 编译选项
在实际开发中,需要将src 以及编译生成的东西分开,目标目录可以 是
忽略执行中的错误信息,查看 根目录 下多了
其中类似
解决该问题,还需要其他的手段了。注意,在前面,已经引入了
这里就要使用了
完成上述 几个步骤,就可以看到 根目录多了 文件夹
他们的作用就是为了解决上述提到 tsc 编译 ng2出现了error。
再次执行
蓝图
从接触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.tsimport { 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还是没法显示,这个在下篇中说明。
相关文章推荐
- android开发基础[源码获取及编译、模拟器使用]
- 嵌入式开发之C基础学习笔记07--编译预处理
- java语言学习之路之基础常识之java语言特点、开发工具、配置环境变量以及编译工具。
- angular基础与项目开发实战
- angular开发:angular2的基础问题
- Java应用程序本地编译为EXE的几种方法-Java基础-Java-编程开发
- Angular基础入门2——开发环境的搭建
- Android逆向基础笔记—Android NDK开发3之使用ndk-build工具手动编译
- Android逆向基础笔记—Android NDK开发2之Windows下的gcc手动编译(交叉连编译)和利Linux Ubuntu系统下的交叉工具链手动编译
- Windows驱动程序开发基础(四)驱动的编译调试和安装
- 《Directx 9.0 3D 游戏开发编程基础》学习总结2--Init例程编译错误
- Windows驱动程序开发基础(四)驱动的编译调试和安装
- [学习笔记]java基础Java8SE开发环境搭建、第一个Java Hello World、Java程序的编译与执行
- Android逆向基础笔记—Android NDK开发4之Android studio NDK自动编译
- APUE [Linux C 编程开发环境(工具链,编译,汇编,链接,库)基础知识与实践]
- 内核开发基础3——Linux内核配置与编译
- [学习笔记]java基础Java8SE开发环境搭建、第一个Java Hello World、Java程序的编译与执行
- Vuforia开发基础-官方demo编译
- [JNI] 开发实例(2) 编译libwebsocket,封装jni函数,搭建IM通信基础服务
- 嵌入式开发-迅为I.MX6Q开发板搭建系统基础编译环境