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

参考资料

原文地址:https://www.cnblogs.com/junxian_chen/p/5990327.html