angular2项目结构详情

最新推荐文章于 2021-05-12 19:35:48 发布

alisaGreen

最新推荐文章于 2021-05-12 19:35:48 发布

阅读量594

点赞数

分类专栏：前端

26 篇文章 2 订阅

订阅专栏

本章描述的Angular 2开发环境基于开源的angular2-webpack-starter，包含以下内容：

安装步骤如下所述：

1. 概述

配置文件概述如下所示：

2. npm包管理

npm包管理工具的配置文件是package.json，主要包括内容：

scripts：构建脚本，在命令行使用npm run “name”运行。假设定义了prename、name和postname，npm run name时将自动按npm run prename、npm run name和npm run postname顺序执行，当然pre和post是可选的
dependencies：程序运行时依赖的库。npm install时增加—save自动更新列表
devDependencies：开发工具依赖的库。npm install时增加—save-dev自动更新列表。

安装步骤中的npm install步骤即在本地安装dependencies和devDependencies中的所有软件包。

npm –help可查看所有命令列表，npm -h可查看帮助信息。

3. Typings

typings用于管理第三方TypeScript库的类型定义，配置文件是typings.json，配置文件中包括所有第三方库类型定义的下载地址。

package.json的postinstall脚本执行typings install，即按配置文件的定义下载安装所有的类型定义。

typings --h可查看所有的命令。

4. TypeScript编译

Angular 2开发使用TypeScript语言，编译配置文件是tsconfig.json，主要内容包括：

5. TsLint语法检查

TypeScript语法检查工具，配置文件是tslint.json，主要内容包括：

6. typedoc文档生成

typedoc将源代码中jsDoc格式注释自动生成HTML开发文档，配置文件是typedoc.json。

7. Webpack构建打包

WebPack是Fackbook开源的构建打包工具，包括webpack-dev-server开发用Web服务器。配置文件分为开发、生成和测试，config/webpack.common.js为公用配置：

配置文件主要内容包括：

8. Karma单元测试

Karma运行单元测试用例并生成测试报表和测试覆盖率报告，配置文件是karma.conf.js。实际配置文件定义在/config/karma.conf.js，主要包括：

frameworks：使用jasmine作为单元测试框架
files：测试文件列表。由于单元测试需先导入Angular 2的运行环境，故测试文件是./config/spec-bundle.js，在spec-bundle.js中再指定单元测试文件
preprocessors：将typescript编译为javascript等预处理步骤
webpack：测试用webpack配置
coverageReporter：覆盖率工具报告设置
reporters：单元测试和覆盖率报告
browsers：如果karma-phantomjs-launcher在Windows下有Bug无法使用PhantomJS，可以设置为Chrome，单元测试时会弹出Chrome界面。

9. Protractor端对端测试

Protractor运行端对端集成测试用例并生成测试报表，配置文件是protractor.conf.js。实际配置文件定义在/config/protractor.conf.js，主要包括：