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

目录

• package.json

• typings.json

• tsconfig.json

• launch.json

• settings.json

• tasks.json

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

参考资料

• package.json详解
• Angular2入门教程-1
• TypeScript学习笔记（一） - 环境搭建
• npm配置-package.json
• Visual Studio Code使用typings拓展自动补全功能