Управление переменными среды для проектов Ionic 2/3

Разрабатываете экспресс-приложение на основе узлов? У вас есть dotenv, .env и т. Д. Вы разрабатываете приложение на Angular? ng CLI поддерживает переменные env. Но, используя Ionic CLI? Эта статья для вас!

Для проекта Ionic у вас может быть другой URL-адрес Backend (локальный, производственный и т. Д.) Или некоторые другие переменные конфигурации, основанные на сборках prod или dev. В ionic CLI нет простого способа передать некоторые флаги для изменения среды. Но нет ничего невозможного! Вот мой способ сделать это, мой технический директор называет это ultra-jugaad (на хинди), надеюсь, это поможет: P

ШАГ №1 - перекрестное соединение

установить этот модуль узла глобально,

npm i cross-env -g

ШАГ № 2 - Среда

Создайте эти файлы для установки переменных среды, в моем случае есть две среды prod и dev. Итак, у меня в папке три файла

SRC / среды / environment.ts

export var environment = {   //THIS IS FOR DEFAULT VALUES
     BASE_URL:’http://localhost:3000/api’,
     someVar:'someVal'
     ....
}

SRC / среды / environment.prod.ts

export var environment = {   //THIS IS FOR PROD VALUES
BASE_URL:’https://prod.server.com/api’,
     someProdVar:'someProdVal'
     ....
}

SRC / среды / environment.dev.ts

export var environment = {   //THIS IS FOR DEV VALUES
BASE_URL:’http://localhost:3000/api’,
     someDevVar:'someDevVal'
     ....
}

ШАГ № 3 - Используйте ценности окружающей среды

Поскольку environment.ts экспортируется, вы можете импортировать в любой инъекционный компонент / компонент, в котором используется значение. (Импортируйте только environment.ts, а не другие файлы)

Пример

import { environment as ENV } from ‘src/environments/environment’ ;
export class SomeLaLaClass{
   constructor(){
      console.log(ENV.BASE_URL); //prints base url value from env
   }
}

ШАГ №4 - Сценарий

создайте следующий скрипт в ./bin/www

script.js

var fs = require('fs');
function readWriteSync() {
let env = process.env.ENV;
if (!process.env.ENV) {
          env = 'dev';  //SETTING DEFAULT ENV AS DEV
}
var data = fs.readFileSync(`src/environments/environment.${env}.ts`, 'utf-8');
fs.writeFileSync('src/environments/environment.ts', data, 'utf-8');
console.log('readFileSync complete');
}
readWriteSync();

ШАГ # 5 - Крючки

Единственное, что сделало весь этот процесс возможным, - это перехватчики сборки Ionic CLI. Их можно добавить в package.json.

package.json

{
“name”: “My Awesome App”,
“description”: “Its awesome and you know it!”,
“version”: “0.0.1”,
“author”: “The Mankala”,
“homepage”: “http://mankala.com/",
“scripts”: {
“clean”: “ionic-app-scripts clean”,
“build”: “ionic-app-scripts build”,
“lint”: “ionic-app-scripts lint”,
“ionic:build”: “node ./src/bin/script.js ionic-app-scripts build”,
“ionic:serve”: “ionic-app-scripts serve”,
“ionic:watch:before”: “node ./src/bin/script.js”,
“ionic:build:before”: “node ./src/bin/script.js”
},
dependencies:{
      ...
      ...
}

ionic: watch: before - это перехватчик, вызываемый до ionic serve
(ionic: serve: before для Ionic 4 и более поздних версий)

ionic: build: before - это хук, вызываемый до ionic build

Сценарий вызывается перед сборкой / обслуживанием проекта, поэтому env копируется из env.prod или env.dev в env.

ШАГ # 6 - Казнь

Перехватчики используются для вызова скрипта перед подачей / сборкой, но нам нужно сообщить CLI о env, который нужно скопировать, для этого используется Шаг №1!

Для обслуживания вы можете перейти к терминалу и ввести (например, Dev Environment)

cross-env ENV=’dev’ ionic serve

Для сборки вы можете перейти в терминал и ввести (например, Prod Environment и платформа Android)

cross-env ENV=’prod’ ionic cordova build android 

Вот и все, пока Ionic CLI не представит функцию env, это работает хорошо!
Надеюсь, это поможет!