当前位置: 首页 > 工具软件 > po-angular > 使用案例 >

Angular 入门教程系列:22:Angular 6新特性之cli部分

郗浩
2023-12-01

Angular6的发布(2018/05/04)已经过去大概两个多月了,从这篇文章开始使用angular6进行试验。

生成项目框架

liumiaocn:angualr liumiao$ ng new demo2 --skip-install
CREATE demo2/README.md (1022 bytes)
CREATE demo2/angular.json (3539 bytes)
CREATE demo2/package.json (1309 bytes)
CREATE demo2/tsconfig.json (384 bytes)
CREATE demo2/tslint.json (2805 bytes)
CREATE demo2/.editorconfig (245 bytes)
CREATE demo2/.gitignore (503 bytes)
CREATE demo2/src/environments/environment.prod.ts (51 bytes)
CREATE demo2/src/environments/environment.ts (631 bytes)
CREATE demo2/src/favicon.ico (5430 bytes)
CREATE demo2/src/index.html (292 bytes)
CREATE demo2/src/main.ts (370 bytes)
CREATE demo2/src/polyfills.ts (3194 bytes)
CREATE demo2/src/test.ts (642 bytes)
CREATE demo2/src/assets/.gitkeep (0 bytes)
CREATE demo2/src/styles.css (80 bytes)
CREATE demo2/src/browserslist (375 bytes)
CREATE demo2/src/karma.conf.js (964 bytes)
CREATE demo2/src/tsconfig.app.json (194 bytes)
CREATE demo2/src/tsconfig.spec.json (282 bytes)
CREATE demo2/src/tslint.json (314 bytes)
CREATE demo2/src/app/app.module.ts (314 bytes)
CREATE demo2/src/app/app.component.css (0 bytes)
CREATE demo2/src/app/app.component.html (1141 bytes)
CREATE demo2/src/app/app.component.spec.ts (988 bytes)
CREATE demo2/src/app/app.component.ts (207 bytes)
CREATE demo2/e2e/protractor.conf.js (752 bytes)
CREATE demo2/e2e/src/app.e2e-spec.ts (301 bytes)
CREATE demo2/e2e/src/app.po.ts (208 bytes)
CREATE demo2/e2e/tsconfig.e2e.json (213 bytes)
    Directory is already under version control. Skipping initialization of git.
liumiaocn:angualr liumiao$ 

项目骨架 1.7.3 vs v6

1.7.3V6文件用途
./README.md项目的基本信息,主要包含使用cli命令如何对项目进行构建/测试/运行等
./.angular-cli.jsonCLI的配置文件,可以设定项目的基础信息,比如构建后的目标目录名称等(V4版)
./angular.jsonCLI的配置文件,可以设定项目的基础信息,比如构建后的目标目录名称等(V6版)
./.editorconfig编辑器的配置文件
./.gitignore为了保证自动生成的文件不被提交的git配置文件
./src/assets/.gitkeepassets目录用于存放图片等静态资源文件,构建时会拷贝到发布包里。新创建时一般为空,但是由于git会忽略空文件夹,放置.gitkeep这个空文件以保证目录得到管理
./src/environments/environment.prod.ts生产环境配置文件,在.angular-cli.json中被mapping,mapping值为:prod
./src/environments/environment.ts开发环境配置,在.angular-cli.json中被mapping,mapping值为:dev
./src/favicon.ico网页左上角显示的图标
./src/index.html项目主页
./src/main.tsAngular程序的入口
./src/polyfills.ts不同浏览器,比如一些老旧的浏览器及版本的支持
./src/styles.css全局的样式
./src/tslint.jsontslint配置信息
./src/styles.css全局的样式
./src/tsconfig.app.jsonAngular应用的typescript编译器的配置文件
./src/tsconfig.spec.json单元测试的typescirpt编译器的配置文件
./src/typings.d.ts项目中使用的typescript类型的引用文件
./e2e/app.e2e-spec.ts端到端测试文件
./e2e/app.po.ts端到端测试入口文件
./e2e/tsconfig.e2e.json用于端到端测试的typescript编译器的配置文件
./karma.conf.jskarma单元测试的配置文件
./package.jsonnpm的配置文件以及第三方依赖包
./protractor.conf.jsprotractor的端到端测试的配置文件
./tsconfig.jsontypescirpt编译器的配置文件
./tslint.json提供给TSLint和Codelyzer的配置信息
./src/app/app.module.ts模块定义配置文件
./src/app/app.component.css组件的样式文件
./src/app/app.component.html组件的HTML模板文件
./src/app/app.component.spec.ts组件的单元测试文件
./src/app/app.component.ts组件定义文件

CLI workspaces的区别

1.7.3版本

liumiaocn:demo1 liumiao$ cat .angular-cli.json 
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "demo1"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}
liumiaocn:demo1 liumiao$

v6版本

liumiaocn:demo2 liumiao$ cat angular.json 
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "demo2": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/demo2",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "demo2:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "demo2:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "demo2:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "demo2-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo2:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "demo2:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "demo2"
}liumiaocn:demo2 liumiao$ 

对文件内容进行确认发现整体内容大体相同,但是还是有不少区别的:

(1) 增加了@angular-devkit/build-angular在各个阶段的builder,主要有如下的builder

@angular-devkit/build-angular:app-shell
@angular-devkit/build-angular:browser
@angular-devkit/build-angular:dev-server
@angular-devkit/build-angular:extract-i18n
@angular-devkit/build-angular:karma
@angular-devkit/build-angular:protractor
@angular-devkit/build-angular:server
@angular-devkit/build-angular:tslint

(2) 增加了文件版本version,当前值为1

(3) 明示引入了i18n

安装package

liumiaocn:angualr liumiao$ cd demo2
liumiaocn:demo2 liumiao$ ls
README.md     angular.json  e2e           package.json  src           tsconfig.json tslint.json
liumiaocn:demo2 liumiao$ yarn
yarn install v1.7.0
info No lockfile found.
[1/4] ��  Resolving packages...
warning karma-coverage-istanbul-reporter > istanbul-api > istanbul-lib-hook@1.2.1: 1.2.0 should have been a major version bump
[2/4] ��  Fetching packages...
[3/4] ��  Linking dependencies...
[4/4] ��  Building fresh packages...
success Saved lockfile.
✨  Done in 688.19s.
liumiaocn:demo2 liumiao$ 

确认版本

liumiaocn:demo2 liumiao$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.0.8
Node: 8.11.3
OS: darwin x64
Angular: 6.0.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cli                      6.0.8
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.2
typescript                        2.7.2
webpack                           4.8.3

liumiaocn:demo2 liumiao$

启动

使用ng serve启动,则可确认结果了

ng 命令比较

cli 1.7.3V6命令说明
ng new创建项目骨架
ng serve构建并运行应用
ng generate创建组件/类/服务等
ng lint使用lint对代码进行检查
ng test使用karma进行单体测试
ng e2e使用protractor进行端到端测试
ng build构建生成结果的js文件
deprecatedng get/ng set获取/设定配置
ng help获取帮助信息
ng doc查询文档信息
ng xi18n从源文件抽取i18n信息
ng update解析package.json并更新,在v6中添加了all等选项,之前只有dryRun和next
ng add添加package
ng version确认相关版本信息
 类似资料: