使用VS Code开发Angular 2应用程序所需配置文件的解析
目录
package.json：
这是项目的基本定义文件，所有的基于nodejs的项目都会有一个package.json文件，里面会定义项目名称、版本、依赖的库，以及脚本。脚本里面定义了几个可以使用npm运行的脚本，例如：
“start”: “tsc && concurrently \”npm run tsc:w\” \”npm run lite\” “
用于启动测试服务器，启动的过程中执行了编译、检测文件修改、启动服务器等任务。
“postinstall”: “typings install”
用于在npm install完成以后执行，下载TypeScript类型定义文件。
“tsc:w”: “tsc -w”
编译TypeScript文件，并且是以’watch’模式启动，也就是检测文件修改，如果有TypeScript文件被修改，自动执行编译过程。
"license": "ISC"
开源许可
"dependencies"
可选字段，指示当前包所依赖的其他包。
"devDependencies"
如果有人计划在他们的项目中下载和使用你的模块，但他们可能并不想或并不需要你开发所使用的外部测试和文档框架。
在这种情况下，最好将这些附加的项放在devDependencies中。
这些项将会在根目录下执行npm link或npm install时被安装，并且可以像其他npm配置参数一样被管理。
例如，前一篇博文使用VS Code开发AngularJS 2 第一个应用程序的package.json文件：
{
"name": "angular-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "~2.0.2",
"@angular/compiler": "~2.0.2",
"@angular/core": "~2.0.2",
"@angular/forms": "~2.0.2",
"@angular/http": "~2.0.2",
"@angular/platform-browser": "~2.0.2",
"@angular/platform-browser-dynamic": "~2.0.2",
"@angular/router": "~3.0.2",
"@angular/upgrade": "~2.0.2",
"angular-in-memory-web-api": "~0.1.5",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.39",
"zone.js": "^0.6.25"
},
"devDependencies": {
"concurrently": "^3.1.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3",
"typings": "^1.4.0"
}
}
typings.json：
VS Code 使用Typings添加自动补全（用于智能提示）
例如，前一篇博文使用VS Code开发AngularJS 2 第一个应用程序的typings.json文件：
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160725163759",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160909174046"
}
}
tsconfig.json：
tsconfig.json用于对于TypeScript文件的配置
“target”：编译之后生成的JavaScript文件需要遵循的标准。有三个候选项：es3、es5、es2015（es6）。
“noImplicitAny”：为false时，如果编译器无法根据变量的使用来判断类型时，将用any类型代替。为true时，将进行强类型检查，无法推断类型时，提示错误。
“module”：遵循的JavaScript模块规范。主要的候选项有：commonjs、AMD和es2015。为了后面与node.js保持一致，我们这里选用commonjs。
“removeComments”：编译生成的JavaScript文件是否移除注释。
“sourceMap”：编译时是否生成对应的source map文件。这个文件主要用于前端调试。当前端js文件被压缩引用后，出错时可借助同名的source map文件查找源文件中错误位置。
“outDir”：编译输出JavaScript文件存放的文件夹。
“include”、“exclude”：编译时需要包含/剔除的文件夹。
例如，前一篇博文使用VS Code开发AngularJS 2 第一个应用程序的tsconfig.json文件：
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}
launch.json：
launch.json用于Debug调试选项配置
"version": 版本号
"name"："Attach to Chrome, with sourcemaps" 附加到Chrome,带映射信息
"type": "chrome"，启用谷歌chrome浏览器
"request": "launch"，发送到浏览器
"request": "attach"，附加到浏览器
"port": 9222，端口号
"sourceMaps": true，源码映射
"webRoot": "${workspaceRoot}"，根路径
例如，前一篇博文使用VS Code开发AngularJS 2 第一个应用程序的launch.json文件：
{
"version": "0.2.0",
"configurations": [{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080/index.html",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
]
}
settings.json：
settings.json是VS Code的用户设置文件，可以设置，编辑器的字体、颜色等
"typescript.tsdk": "node_modules/typescript/lib"，指出Angular 2的开发库
"files.exclude": ts 项目, 隐藏 .js 和 .js.map 文件
例如，前一面博文使用VS Code开发AngularJS 2 第一个应用程序的settings.json文件：
{
"typescript.tsdk": "node_modules/typescript/lib",
"files.exclude": {
"node_modules": true,
"**/*.js": { "when": "$(basename).ts" },
"**/*.js.map": true
}
}
tasks.json：
任务配置文件
"command": "cmd"，命令方式
"isShellCommand": true，是否使用命令行方式
"showOutput": "always"，输出显示
"args": ["/C npm start"]，命令参数
例如，前一篇博文使用VS Code开发AngularJS 2 第一个应用程序的tasks.json文件：
{
"version": "0.1.0",
"command": "cmd",
"isShellCommand": true,
"showOutput": "always",
"args": ["/C npm start"]
}
