Angular 环境配置

共 4243字,需浏览 9分钟

 ·

2021-09-14 11:26

来源 | https://segmentfault.com/a/1190000040531172


如何使用环境配置

在实际开发中,总是需要针对不同的环境设定不同的参数,Angular 提供了一种应用环境机制,当使用 ng new 构建一个新项目时默认会在 src/environments 目录下针对开发环境与生产环境(environment.prod.ts)的配置项。
绝大多数情况下,我们生产环境的后端请求地址与开发环境是不一样,因此可以分别为其定义不同的域,例如:
// environment.tsexport const environment = {  production: false,  apiBaseUrl: `https://test.asdf.com/`};

对于生产环境可以为:

// environment.prod.tsexport 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.tsexport 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 的可塑性也还是很强的。


学习更多技能

请点击下方公众号



浏览 26
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报