如何使用环境配置
在实际开发中,总是需要针对不同的环境设定不同的参数,Angular 提供了一种应用环境机制,当使用 ng new
构建一个新项目时默认会在 src/environments
目录下针对开发环境与生产环境(environment.prod.ts
)的配置项。
绝大多数情况下,我们生产环境的后端请求地址与开发环境是不一样,因此可以分别为其定义不同的域,例如:
// environment.ts
export const environment = {
production: false,
apiBaseUrl: `https://test.asdf.com/`
};
对于生产环境可以为:
// environment.prod.ts
export const environment = {
production: true,
apiBaseUrl: `https://api.asdf.com/`
};
当然,对于开发人员而言,无须如何去辨别它们,只需要在 src
目录的任意位置引用 apiBaseUrl
变量即可,就像这样:
import { environment } from 'src/environments/environment';
console.log(`${environment.apiBaseUrl}`);
当通过 ng s
开发模式时自动使用 environment.ts
,反之 ng b
会使用 environment.prod.ts
来替代。
事实上,不管 ng s
还是 ng b
两种模式,本质上都可以利用 -c
参数来互换,例如:
// ng s -c development -> environment.ts
// ng s -c production -> environment.prod.ts
虽然 Angular 在创建时只产生两种环境,倘若需要针对 CI 单独做一些额外的环境配置,只需要在 angular.json
文件配置的 architect/build/configurations
下新增一个新的节点,例如:
// angular.json
"architect": {
"build": {
"configurations": {
// 新增 ci 节点
"ci": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.ci.ts"
}]
}
}
},
// 如果希望 ng s 也生效,则以下也是必须的
"serve": {
"configurations": {
"ci": {
"browserTarget": "test:build:ci" // 注意 test 是项目名
}
}
}
}
然后在 src/environments
目录下,新增 environment.ci.ts
文件:
// environment.ci.ts
export const environment = {
production: false,
apiBaseUrl: `https://ci.asdf.com/`
};
最后,可以使用 ng b -c ci
命令,所有 apiBaseUrl
都将使用 https://ci.asdf.com/
来替代了。
index.html 配置
不同环境使用不同的 index.html
,比如说希望生产环境下多增加一些 Google Analytics 统计代或IM之类的,可能你也很希望在开发环境下不希望加载这些让开发变慢的东西吧。
跟 environments
做法类似,只需要在 angular.json
增加一点配置即可:
// angular.json
"architect": {
"build": {
"configurations": {
"production": {
"index": {
"input": "src/index.prod.html",
"output": "index.html"
}
}
}
}
}
同样,需要在 src
下新增一个 index.prod.html
文件;当使用 ng b
时会采用 index.prod.html
作为 index.html
的内容。
优化Tree-Shake
Angular 环境配置不光能替换配置;同时,根据这种文件替换形式,来帮助我们更友好的进行 Tree-Shake 动作,而且非常彻底。
那么什么情况下会遇到呢?例如不希望在开发环境下加载某个模块,以 NG-ALAIN 提供的 Mock功能 为例,并不希望在生产环境下依然加载它。
正常我们第一想到的是使用 environment.production
来区分环境进行动态加载,假设只希望开发环境下加载 NG-ZORRO 的按钮模块:
import { NzButtonModule } from 'ng-zorro-antd/button';
const moduels: Array<Type<any>> = [];
if (environment.production) {
moduels.push(NzButtonModule);
}
@NgModule({
imports: [BrowserModule, ...moduels],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
即便代码层面已经很明确不需要 NzButtonModule
模块,但对于编译而言依然需要先加载编译,再到 Tree-Shake 环节剔除它;但它依然会有一点狗皮膏药似的,还会包含一点点并不需要的代码在上面,这取决于目标模块是依赖关系。
因此,要想让它真正从我们文件中消失,最直接的办法就是让它不需要加载编译。这有两种方式可以做到:
粗暴
细心的读者可能早已发现为什么这种配置的替换是用 fileReplacements
来描述,没错,诚如 fileReplacements
意思,本质上就是文件的替换;并且这里还是一个数组,意味者允许加入更多的替换,但这类必须是符合 TypeScript 程序的文件类型。
因此,可以直接替换某个 .ts
文件,比如粗暴的把 app.module.ts
分为 app.module.prod.ts
,同时修改 angular.json
的配置:
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
},
{
"replace": "src/app/app.module.ts",
"with": "src/app/app.module.prod.ts"
}
]
温和
另一种方式是,将模块的导入放到 environment.ts
文件当中,例如:
// environment.ts
import { NzButtonModule } from 'ng-zorro-antd/button';
export const environment = {
production: false,
apiBaseUrl: `https://test.asdf.com/`,
modules: [NzButtonModule],
};
最后,再将 modules
数组导入到根模块下。
// app/app.module.ts
import { environment } from 'src/environments/environment';
@NgModule({
imports: [BrowserModule, ...environment.modules],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
结论
本篇只是 Angular 的一个简单运用,利用 Angular Cli 提供的文件替换能力,可以帮助我们解决不同环境下使用不同参数、模块、文件等。
总之,也算是侧面的说明 Angular Cli 的可塑性也还是很强的。
好久没有写文章了,这也是两年多前写了一半放在草稿箱里面,加工了一下,发表于此。
Happy Coding~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。