構(gòu)建并運(yùn)行 Angular 應(yīng)用

本文討論的是 Angular 項(xiàng)目中與構(gòu)建有關(guān)的配置項(xiàng)。

配置應(yīng)用環(huán)境

你可以用不同的默認(rèn)值來為項(xiàng)目定義出不同的命名配置項(xiàng)，比如 stage 和 production。

每個(gè)命名配置項(xiàng)都可以具有某些選項(xiàng)的默認(rèn)值，并應(yīng)用于各種構(gòu)建目標(biāo)，比如 ?build?、?serve ?和 ?test?。Angular CLI 的 ?build?、?serve ?和 ?test ?命令可以為不同的目標(biāo)環(huán)境，把文件替換成合適的版本。

配置針對(duì)特定環(huán)境的默認(rèn)值

項(xiàng)目的 ?src/environments/? 文件夾包含基礎(chǔ)配置文件 ?environment.ts?，它提供了一個(gè)默認(rèn)環(huán)境。你可以在針對(duì)特定目標(biāo)的配置文件中，為其它環(huán)境（比如生產(chǎn)和預(yù)生產(chǎn)）覆蓋這些默認(rèn)值。

比如：

基礎(chǔ)環(huán)境 ?environment.ts? 包含了默認(rèn)的環(huán)境設(shè)置。比如：

export const environment = {
  production: false
};

當(dāng)沒有指定環(huán)境時(shí)，?build ?命令就會(huì)用它作為構(gòu)建目標(biāo)。你可以添加其它變量，可以用該環(huán)境對(duì)象附加屬性的形式，也可以用獨(dú)立對(duì)象的形式。比如：以下內(nèi)容將會(huì)把一個(gè)變量添加到默認(rèn)環(huán)境中：

export const environment = {
  production: false,
  apiUrl: 'http://my-api-url'
};

你可以添加針對(duì)特定目標(biāo)的配置文件，比如 ?environment.prod.ts?。 下面的代碼會(huì)設(shè)置針對(duì)生產(chǎn)環(huán)境構(gòu)建目標(biāo)的默認(rèn)值：

export const environment = {
  production: true,
  apiUrl: 'http://my-prod-url'
};

在應(yīng)用中使用針對(duì)特定環(huán)境的變量

下面的應(yīng)用結(jié)構(gòu)會(huì)為生產(chǎn)和預(yù)生產(chǎn)環(huán)境配置構(gòu)建目標(biāo)：

要使用已定義的配置環(huán)境，組件必須導(dǎo)入原始版的環(huán)境文件：

import { environment } from './../environments/environment';

這會(huì)確保 ?build ?和 ?serve ?命令能找到針對(duì)特定目標(biāo)的配置。

組件文件（?app.component.ts?）中的下列代碼可以使用該配置文件中定義的環(huán)境變量。

import { Component } from '@angular/core';
import { environment } from './../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
    console.log(environment.production); // Logs false for default environment
  }
  title = 'app works!';
}

配置針對(duì)特定目標(biāo)的文件替換規(guī)則

CLI 的主配置文件 ?angular.json? 中的每個(gè)構(gòu)建目標(biāo)下都包含了一個(gè) ?fileReplacements ?區(qū)段。這能讓你把 TypeScript 程序中的任何文件替換為針對(duì)特定目標(biāo)的版本。當(dāng)構(gòu)建目標(biāo)需要包含針對(duì)特定環(huán)境（比如生產(chǎn)或預(yù)生產(chǎn)）的代碼或變量時(shí)，這非常有用。

默認(rèn)情況下不會(huì)替換任何文件。你可以為特定的構(gòu)建目標(biāo)添加文件替換規(guī)則。比如：

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    …

這意味著當(dāng)你使用 ?ng build --configuration production? 構(gòu)建生產(chǎn)配置時(shí)，就會(huì)把 ?src/environments/environment.ts? 文件替換成針對(duì)特定目標(biāo)的版本 ?src/environments/environment.prod.ts?。

你還可以按需添加更多配置文件。要想添加預(yù)生產(chǎn)環(huán)境，把 ?src/environments/environment.ts? 復(fù)制為 ?src/environments/environment.staging.ts?，然后在 ?angular.json? 中添加 ?staging ?配置：

"configurations": {
  "production": { … },
  "staging": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.staging.ts"
      }
    ]
  }
}

你還可以往目標(biāo)環(huán)境中添加更多配置項(xiàng)。你的構(gòu)建目標(biāo)支持的任何選項(xiàng)都可以在構(gòu)建目標(biāo)配置中進(jìn)行覆蓋。

要想使用預(yù)生產(chǎn)環(huán)境（staging）的配置進(jìn)行構(gòu)建，請運(yùn)行下列命令：

ng build --configuration=staging

如果將其添加到 ?angular.json? 的 "serve:configurations" 區(qū)段，你還可以配置 ?serve ?命令來使用 目標(biāo)構(gòu)建配置：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "your-project-name:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "your-project-name:build:production"
    },
    "staging": {
      "browserTarget": "your-project-name:build:staging"
    }
  }
},

配置文件大小預(yù)算

當(dāng)應(yīng)用的功能不斷增長時(shí)，其文件大小也會(huì)同步增長。CLI 允許你通過配置項(xiàng)來限制文件大小，以確保應(yīng)用的各個(gè)部分都處于你定義的大小范圍內(nèi)。

你可以在 CLI 配置文件 ?angular.json? 的 ?budgets ?區(qū)段為每個(gè)所配置的環(huán)境定義這些大小范圍。

{
  …
  "configurations": {
    "production": {
      …
      budgets: []
    }
  }
}

你可以為整個(gè)應(yīng)用指定大小范圍，也可以為特定部分。每個(gè)條目會(huì)為一種特定的類型配置大小范圍。用下列各式來指定大小的值：

如果配置了大小范圍，構(gòu)建系統(tǒng)就會(huì)在發(fā)現(xiàn)應(yīng)用的某個(gè)部分達(dá)到或超過了你設(shè)置的大小范圍時(shí)發(fā)出警告或報(bào)錯(cuò)。

每個(gè)范圍條目是一個(gè) JSON 對(duì)象，它具有下列屬性：

配置 CommonJS 依賴項(xiàng)

建議你在 Angular 應(yīng)用中避免依賴 CommonJS 模塊。對(duì) CommonJS 模塊的依賴會(huì)阻止打包器和壓縮器優(yōu)化你的應(yīng)用，這會(huì)導(dǎo)致更大的打包尺寸。 建議你在整個(gè)應(yīng)用中都使用 ECMAScript 模塊。 欲知詳情，參閱 為什么 CommonJS 會(huì)導(dǎo)致更大的打包尺寸。

如果 Angular CLI 檢測到你的瀏覽器端應(yīng)用依賴了 CommonJS 模塊，就會(huì)發(fā)出警告。要禁用這些警告，你可以把這些 CommonJS 模塊的名字添加到 ?angular.json? 文件的 ?build ?區(qū)的 ?allowedCommonJsDependencies ?選項(xiàng)中。

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
     "allowedCommonJsDependencies": [
        "lodash"
     ]
     …
   }
   …
},

配置瀏覽器兼容性

CLI 使用 Autoprefixer 來確保對(duì)不同瀏覽器及其版本的兼容性。你會(huì)發(fā)現(xiàn)當(dāng)你要從構(gòu)建中針對(duì)特定的目標(biāo)瀏覽器或排除指定的瀏覽器版本時(shí)，這是很有必要的。

在內(nèi)部 Autoprefixer 依賴一個(gè)名叫 Browserslist 的庫來指出需要為哪些瀏覽器加前綴。Browserlist 會(huì)在 ?package.json? 的 ?browserlist ?屬性中或一個(gè)名叫 ?.browserslistrc? 的配置文件中來配置這些選項(xiàng)。當(dāng) Autoprefixer 為你的 CSS 加前綴時(shí)，就會(huì)查閱 Browserlist 的配置。

• 可以為 ?package.json? 添加 ?browserslist ?屬性來告訴 Autoprefixer，要針對(duì)哪些瀏覽器：

"browserslist": [
  "> 1%",
  "last 2 versions"
]

• 或者你也可以在項(xiàng)目目錄下添加一個(gè)新文件 ?.browserslistrc?，用于指定你要支持哪些瀏覽器：

### Supported Browsers
> 1%
last 2 versions

參閱 browserslist 的代碼庫以得到如何指定瀏覽器及其版本的更多例子。

代理到后端服務(wù)器

可以用 ?webpack ?開發(fā)服務(wù)器中的代理支持來把特定的 URL 轉(zhuǎn)發(fā)給后端服務(wù)器，只要傳入 ?--proxy-config? 選項(xiàng)就可以了。 比如，要把所有到 ?http://localhost:4200/api? 的調(diào)用都轉(zhuǎn)給運(yùn)行在 ?http://localhost:3000/api? 上的服務(wù)器，可采取如下步驟。

1. 在項(xiàng)目的 ?src/? 目錄下創(chuàng)建一個(gè) ?proxy.conf.json? 文件。
2. 往這個(gè)新的代理配置文件中添加如下內(nèi)容：

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

3. 在 CLI 配置文件 ?angular.json? 中為 ?serve ?目標(biāo)添加 ?proxyConfig ?選項(xiàng)：

…
"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },
…

4. 要使用這個(gè)代理選項(xiàng)啟動(dòng)開發(fā)服務(wù)器，請運(yùn)行 ?ng serve? 命令。

可以編輯這個(gè)代理配置文件，以添加配置項(xiàng)，下面是一些例子。要查看所有選項(xiàng)的詳細(xì)說明，參閱 webpack DevServer 文檔。

注意：
如果你編輯了這個(gè)代理配置文件，就必須重啟 ?ng serve?，來讓你的修改生效。

重寫 URL 路徑

?pathRewrite ?代理配置項(xiàng)能讓你在運(yùn)行時(shí)重寫 URL 路徑。比如，可以在代理配置中指定如下的 ?pathRewrite ?值，以移除路徑末尾的 "api" 部分。

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

如果你要訪問的后端不在 ?localhost ?上，還要設(shè)置 ?changeOrigin ?選項(xiàng)。比如：

{
  "/api": {
    "target": "http://npmjs.org",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    },
    "changeOrigin": true
  }
}

要想了解你的代理是否在如預(yù)期般工作，可以設(shè)置 ?logLevel ?選項(xiàng)。比如：

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    },
    "logLevel": "debug"
  }
}

代理的有效日志級(jí)別是 ?info?（默認(rèn)值）、?debug?、?warn?、?error ?和 ?silent?。

代理多個(gè)條目

通過用 JavaScript 定義此配置，你還可以把多個(gè)條目代理到同一個(gè)目標(biāo)。

將代理配置文件設(shè)置為 ?proxy.conf.js?（代替 ?proxy.conf.json?），并指定如下例子中的配置文件。

const PROXY_CONFIG = [
    {
        context: [
            "/my",
            "/many",
            "/endpoints",
            "/i",
            "/need",
            "/to",
            "/proxy"
        ],
        target: "http://localhost:3000",
        secure: false
    }
]

module.exports = PROXY_CONFIG;

在 CLI 配置文件 ?angular.json? 中，指向 JavaScript 配置文件：

…
"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.js"
    },
…

繞過代理

如果你需要根據(jù)情況繞過此代理，或在發(fā)出請求前先動(dòng)態(tài)修改一下，可以添加 ?bypass ?選項(xiàng)，就像下例的 JavaScript 所示。

const PROXY_CONFIG = {
    "/api/proxy": {
        "target": "http://localhost:3000",
        "secure": false,
        "bypass": function (req, res, proxyOptions) {
            if (req.headers.accept.indexOf("html") !== -1) {
                console.log("Skipping proxy for browser request.");
                return "/index.html";
            }
            req.headers["X-Custom-Header"] = "yes";
        }
    }
}

module.exports = PROXY_CONFIG;

使用公司代理

如果你在某個(gè)公司代理之后，此后端就無法直接代理到局域網(wǎng)之外的任何 URL。這種情況下，你可以把這個(gè)后端代理配置為，借助 agent 通過你的公司代理轉(zhuǎn)發(fā)此調(diào)用：

npm install --save-dev https-proxy-agent

如果你定義了環(huán)境變量 ?http_proxy ?或 ?HTTP_PROXY?，當(dāng)運(yùn)行 ?npm start? 時(shí)，就會(huì)自動(dòng)添加一個(gè) agent 來通過你的企業(yè)代理轉(zhuǎn)發(fā)網(wǎng)絡(luò)調(diào)用。

請?jiān)?nbsp;JavaScript 配置文件中使用如下內(nèi)容。

var HttpsProxyAgent = require('https-proxy-agent');
var proxyConfig = [{
  context: '/api',
  target: 'http://your-remote-server.com:3000',
  secure: false
}];

function setupForCorporateProxy(proxyConfig) {
  var proxyServer = process.env.http_proxy || process.env.HTTP_PROXY;
  if (proxyServer) {
    var agent = new HttpsProxyAgent(proxyServer);
    console.log('Using corporate proxy server: ' + proxyServer);
    proxyConfig.forEach(function(entry) {
      entry.agent = agent;
    });
  }
  return proxyConfig;
}

module.exports = setupForCorporateProxy(proxyConfig);