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

    参考资料

  • 相关阅读:
    2014-04-23 总结
    14-5-13
    PHP
    14-5-8
    ajax
    14-5-6
    14-5-5
    PHP初解
    14-4-30
    14-4-29
  • 原文地址:https://www.cnblogs.com/junxian_chen/p/5990327.html
Copyright © 2020-2023  润新知