《Angular6之ng项目搭建、构建、部署简介》

前言：

              随着Angular的深入发展，Angular6版本的框架部署较之前有了变化，至于变化是什么？请随小编一起来看看吧。

正文：

Angular5.x

用@angular/cli脚手架搭建的工程，配置文件名称为： .angular-cli.json, 内容详情如下：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "angular2"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "ITOO-FrontEnd",
      "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",
        "beta": "environments/environment.beta.ts",
        "k8s": "environments/environment.k8s.ts",
        "test": "environments/environment.test.ts",
        "test55": "environments/environment.test55.ts",
        "prod": "environments/environment.prod.ts",
        "school": "environments/environment.school.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "styles": [

    "../node_modules/primeng/resources/primeng.min.css",
    "../node_modules/primeng/resources/themes/omega/theme.css",

    "../node_modules/font-awesome/css/font-awesome.min.css",

    "styles.css"

  ],
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

 Angular6.x

用@angular/cli脚手架搭建的工程，配置文件名称为： angular.json, 内容详情如下：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ng-zorro": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "less"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
                "output": "/assets/"
              }
            ],
            "styles": [
              "src/theme.less",
              "node_modules/ztree/css/metroStyle/metroStyle.css",
              "src/styles.less"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/ztree/js/jquery.ztree.all.js"
            ]
          },
          "configurations": {
            "prod": {
              "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
            },
            "beta": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.beta.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "test": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.test.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "k8s": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.k8s.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": "ng-zorro:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "ng-zorro:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "ng-zorro: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/theme.less",
              "src/styles.less"
            ],
            "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/**"
            ]
          }
        }
      }
    },
    "ng-zorro-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "ng-zorro:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "ng-zorro:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "ng-zorro"
}

 环境部署发生的改变

Angular5.x

1.修改.angular-cli.json文件, 核心代码:

 "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "beta": "environments/environment.beta.ts",
        "test": "environments/environment.test.ts",
        "prod": "environments/environment.prod.ts"
      }

 2. 部署命令

dev: ng build --beta

test: ng build --test

prod: ng build --prod

Angular6.x

1. 修改angular.json文件, 核心代码:

"configurations": {
            "prod": {
              "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
            },
            "beta": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.beta.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "test": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.test.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "k8s": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.k8s.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }

2. 部署命令

dev:  ng build --configuration=beta

test: ng build --configuration=test

prod: ng build --prod --configuration=prod

         细心的读者会发现, 开发打包命令和生产打包命令发生了变化, 加入了--prod, 这是因为在生产环境下, 对于软件的部署要求更为严格, 而angular这块开箱即用的框架当然注意到了这点, 那具体发生了什么样的变化呢?

----------------------------------------------------------------------------------------------------------------------------------------------------------------

> 预先(AOT)编译: 预编译Angular的组件模板

>生产模式: 部署到启用了生产模式的生产环境

>打包: 把多个应用于库文件拼接到少量包(bundle)中

>最小化: 删除多余的空格/注释和可选令牌

>混淆/丑化: 重写代码, 使用简短的/不容易理解的变量名和函数名.

>消除死代码: 删除未引用过的模块和很多未用到的代码.

------------------------------------------------------------------------------------------------------------------------------------------------------------------

Jenkins自动化构建部署

Angular5.x之前建立相关的job, 构建后的操作直接部署即可.

Angular6.x在部署时,  无论是开发和生产对于安全性都相对提高, 构建包名都是随机的, 继而在远程部署时,就需要先删除上一次的部署包, 再替换新的部署包:

相关博文:  《Angular之ng项目搭建、构建、部署简介》: 《Angular之ng项目搭建、构建、部署简介》_杨晓风-linda的博客-CSDN博客_ng怎么部署 

结语：

                                                                            煮一壶清酒, 寻一份变化之美.