使用VS Code开发Angular 2应用程序所需配置文件的解析

时间:2024-01-13 14:46:44

目录

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"]
}

参考资料