建站
咨詢
售后
建站咨詢
新聞中心
構(gòu)建并運(yùn)行 Angular 應(yīng)用
本文討論的是 Angular 項(xiàng)目中與構(gòu)建有關(guān)的配置項(xiàng)。
公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出山海關(guān)免費(fèi)做網(wǎ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)境，把文件替換成合適的版本。
配置針對特定環(huán)境的默認(rèn)值
項(xiàng)目的 ?src/environments/? 文件夾包含基礎(chǔ)配置文件 ?environment.ts?，它提供了一個(gè)默認(rèn)環(huán)境。你可以在針對特定目標(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)境對象附加屬性的形式，也可以用獨(dú)立對象的形式。比如：以下內(nèi)容將會(huì)把一個(gè)變量添加到默認(rèn)環(huán)境中：
export const environment = {
production: false,
apiUrl: 'http://my-api-url'
};你可以添加針對特定目標(biāo)的配置文件，比如 ?environment.prod.ts?。 下面的代碼會(huì)設(shè)置針對生產(chǎn)環(huán)境構(gòu)建目標(biāo)的默認(rèn)值：
export const environment = {
production: true,
apiUrl: 'http://my-prod-url'
};在應(yīng)用中使用針對特定環(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 ?命令能找到針對特定目標(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!';
}配置針對特定目標(biāo)的文件替換規(guī)則
CLI 的主配置文件 ?angular.json? 中的每個(gè)構(gòu)建目標(biāo)下都包含了一個(gè) ?fileReplacements ?區(qū)段。這能讓你把 TypeScript 程序中的任何文件替換為針對特定目標(biāo)的版本。當(dāng)構(gòu)建目標(biāo)需要包含針對特定環(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? 文件替換成針對特定目標(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ì)為一種特定的類型配置大小范圍。用下列各式來指定大小的值：
|
大小值 |
詳情 |
|---|---|
|
大小（以字節(jié)為單位）。 |
123kb |
大?。ㄒ郧ё止?jié)為單位）。 |
123mb |
大?。ㄒ?MB 為單位）。 |
12% |
相對于基線（baseline）大小的百分比大小。（不能用作 baseline 的值。） |
如果配置了大小范圍，構(gòu)建系統(tǒng)就會(huì)在發(fā)現(xiàn)應(yīng)用的某個(gè)部分達(dá)到或超過了你設(shè)置的大小范圍時(shí)發(fā)出警告或報(bào)錯(cuò)。
每個(gè)范圍條目是一個(gè) JSON 對象，它具有下列屬性：
|
屬性 |
值 | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| type | 預(yù)算的類型。下列值之一：
| ||||||||||||||||
| name | 包的名稱（對于 | ||||||||||||||||
| baseline | 一個(gè)表示基準(zhǔn)大小的絕對值，用做比例值的基數(shù)。 | ||||||||||||||||
| maximumWarning | 當(dāng)大小超過基線的這個(gè)閾值百分比時(shí)給出警告。 | ||||||||||||||||
| maximumError | 當(dāng)大小超過基線的這個(gè)閾值百分比時(shí)報(bào)錯(cuò)。 | ||||||||||||||||
| minimumWarning | 當(dāng)大小小于基線的這個(gè)閾值百分比時(shí)給出警告。 | ||||||||||||||||
| minimumError | 當(dāng)大小小于基線的這個(gè)閾值百分比時(shí)報(bào)錯(cuò)。 | ||||||||||||||||
| warning | 當(dāng)大小達(dá)到或小于基線的這個(gè)閾值百分比時(shí)都給出警告。 | ||||||||||||||||
| error | 當(dāng)大小達(dá)到或小于基線的這個(gè)閾值百分比時(shí)都報(bào)錯(cuò)。 |
配置 CommonJS 依賴項(xiàng)
建議你在 Angular 應(yīng)用中避免依賴 CommonJS 模塊。對 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 來確保對不同瀏覽器及其版本的兼容性。你會(huì)發(fā)現(xiàn)當(dāng)你要從構(gòu)建中針對特定的目標(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，要針對哪些瀏覽器：
"browserslist": [
"> 1%",
"last 2 versions"
].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ù)器，可采取如下步驟。
- 在項(xiàng)目的 ?
src/? 目錄下創(chuàng)建一個(gè) ?proxy.conf.json? 文件。 - 往這個(gè)新的代理配置文件中添加如下內(nèi)容：
- 在 CLI 配置文件 ?
angular.json? 中為 ?serve?目標(biāo)添加 ?proxyConfig?選項(xiàng)： - 要使用這個(gè)代理選項(xiàng)啟動(dòng)開發(fā)服務(wù)器，請運(yùn)行 ?
ng serve? 命令。
{
"/api": {
"target": "http://localhost:3000",
"secure": false
}
}…
"architect": {
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "your-application-name:build",
"proxyConfig": "src/proxy.conf.json"
},
…可以編輯這個(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"
}
}代理的有效日志級別是 ?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);分享文章：創(chuàng)新互聯(lián)Angular教程：Angular構(gòu)建與本地服務(wù)器
當(dāng)前URL：http://www.5511xx.com/article/cosdpss.html
