怎麼實作類似 Angular Environment 變數的功能?

General
1

我從頭起了一個小的 Typescript 專案想要練習，我想要讓 Environment 的 import 可以像是 Angular 產生的專案那樣自動帶入 Prod or Dev 的 Environment 變數。

目前的資料夾架構是這樣

env01

其中

//environment.ts
export const environment = { production: false, apiUrl: 'http://example.com/api/' };

//environment.prod.ts
export const environment = { production: true, apiUrl: 'http://prod.com/api/' };

//app.ts
import { environment } from "./environments/environments";
const apiUrl = environment .apiUrl;
/*do something else xxxx*/

請問要怎麼讓 ts build or run 的時候，可以 reference 到對的 env 檔案?

2

Angular 可以那樣子使用，是因為 webpack build tool 的關係，如果不依賴建置工具的情況下，要達到的可能性有點低

3

這應該是要用webpack/gulp之類的去根據你的指令做切換

4

感謝二位回覆

我最後的解法是這樣子，雖然好像滿奇怪的…

// environment.ts
import { environment as prodEnv } from "./environments.prod";
import { environment as devEnv } from "./environments.dev";
const ENV = process.env.NODE_ENV || "dev";
export const environment = (process.env.NODE_ENV === 'prod') ? prodEnv : devEnv;
5

你是用系統環境參數的方式解，這大概也是你目前的解法了
如果要乾淨點，應該在 import 的地方就先分開，然後下面就不需要動了(理論上，需要實驗)

// environment.ts
if(process.env.NODE_ENV === 'prod'){
    import { environment } from "./environments.prod";
}else{
    import { environment } from "./environments.dev";
}
const ENV = process.env.NODE_ENV || "dev";
export const environment = environment;
1個讚