Рубрики
Без рубрики

Переменные среды с помощью Stagrys

Как обрабатывать переменные среды в проектах, разработанных с помощью STARTJS или IONIC PWA Toolkit. Теги с WebComponents, трафаретом, JavaScript, HTML.

Переменные среды с помощью Stagrys

Я заметил, что вопрос относительно того, как обрабатывать переменные среды в Трафарет Проекты или проекты, созданные с Ionic PWA Toolkit часто всплывает 🤔

Как я реализовал решение для обработки таких параметров в Пульт дистанционного управления моего проекта Deckdeckgo. , прогрессивное веб-приложение альтернативу для простых презентаций, я думал об передаче моей небольшой реализации в этой новой статье.

Кредиты

Следующее решение было вдохновлено тем, что был разработан в ионном основном проекте. Одна из точек входа для меня обнаружила метод setuppcconfig в их исходном коде. Поэтому слава к потрясающей ионной команде ❤ ️

Начиная

Решение, описанное в этом руководстве, как и для цели для обработки двух сред, A Развитие и а Производство среда. В каждом из них мы собираемся определить переменную, которая указывает на другую конечную точку URL.

Обратите внимание, что приведенный ниже пример был разработан с помощью Ionic PWA Toolkit.

Настройка сред

Чтобы начать нашу реализацию, мы собираемся определить интерфейс, который должен содержать нашу переменную (S) и метод настройки, который направлен на «нажать» его значение в окно объект. Это означает, что когда наше приложение начнется, мы собираемся позвонить в этот метод, чтобы определить переменные среды, которые следует использовать во время выполнения для всего приложения.

Как я показываю код моего собственного проекта, вы можете найти ссылки на имена Deckdeckgo. или его короткая форма Пузырька . Просто замените их имя вашего проекта в вашу реализацию.

Для реализации интерфейса и функции вы можете, например, создать новый файл под названием Окружающая среда - config.tsx :

// The interface which define the list of variables
export interface EnvironmentConfig {
    url: string;
}

export function setupConfig(config: EnvironmentConfig) {
    if (!window) {
        return;
    }

    const win = window as any;
    const DeckGo = win.DeckGo;

    if (DeckGo && DeckGo.config && 
        DeckGo.config.constructor.name !== 'Object') {
        console.error('DeckDeckGo config was already initialized');
        return;
    }

    win.DeckGo = win.DeckGo || {};
    win.DeckGo.config = {
        ...win.DeckGo.config,
        ...config
    };

    return win.DeckGo.config;
}

Теперь, когда мы создали функцию настройки, нам нужно будет использовать ее, когда приложение запускается. Поскольку наша цель – две две разные среды, мы впервые собираемся изменить основной класс приложений app.ts быть тем, который определяет и использует Производство окружающая обстановка. Мы собираемся потреблять вышеуказанный метод, который мы создали и определили наш URL для производства.

import {setupConfig} from 
                '../app/services/environment/environment-config';

setupConfig({
    url: 'https://api.production.com'
});

Затем мы собираемся создать второй класс Bootstraping рядом с ним, чтобы быть тем, кто собирается загрузить Развитие конфигурация. Для этого давайте создадим в дополнение к главному классу файл под названием app-dev.ts который будет содержит следующее:

import {setupConfig} from 
                '../app/services/environment/environment-config';
// When serve locally: http://localhost:3002
setupConfig({
    url: location.protocol + '//' + location.hostname + ':3002'
});

Запуск приложения

Теперь, когда у нас есть два разных точка входа, чтобы начать наше приложение, мы должны быть в состоянии выбрать между ними при запуске наших командных строк. Для этой цели мы идем, во-первых, чтобы изменить файл конфигурации track.config.ts Для того, чтобы сделать GlobalScript Переменная свойства.

let globalScript: string = 'src/global/app.ts';

const dev: boolean = 
           process.argv && process.argv.indexOf('--dev') > -1;
if (dev) {
    globalScript = 'src/global/app-dev.ts';
}
export const config: Config = {
     ...
     globalScript: globalScript,
     ...
};

Как вы можете заметить в вышеуказанном коде, конфигурация проверит параметр --dev Чтобы проверить, хотите ли мы использовать Развитие среда или по умолчанию один, Производство Отказ

Чтобы пройти этот параметр из командной строки, мы просто собираемся добавить новый сценарий для нашего package.json Отказ Рядом с NPM запустить начало Мы собираемся создать новую цель NPM запустить Dev который стремится начать приложение для Развитие окружающая обстановка.

"scripts": {
    "build": "stencil build",
    "start": "stencil build --watch --serve", // Production
    "dev": "stencil build --dev --watch --serve" // Development
}

Чтение переменных

Теперь, когда мы настроили конфигурацию и скрипты, чтобы переключаться между обеими средами, у нас есть только одна окончательная часть для реализации, тот, который в отношении фактически читает значения, в нашем примере, чтение значения нашего URL.

Для этого я предлагаю создать Singleton, который стремится загрузить параметры конфигураций в память один раз и выставить Получить Метод, который должен позволять нам запросить определенные переменные (так как у нас может быть более одной среды переменные 😉). Мы могли бы создать, что новый сервис в новом отдельном файле под названием Environment-Config.service.tsx :

import {EnvironmentConfig} from './environment-config';

export class EnvironmentConfigService {

    private static instance: EnvironmentConfigService;

    private m: Map;

    private constructor() {
        // Private constructor, singleton
        this.init();
    }

    static getInstance() {
        if (!EnvironmentConfigService.instance) {
            EnvironmentConfigService.instance =
                              new EnvironmentConfigService();
        }
        return EnvironmentConfigService.instance;
    }

    private init() {
        if (!window) {
            return;
        }

        const win = window as any;
        const DeckGo = win.DeckGo;

        this.m = new Map(Object.entries(DeckGo.config) as any);
    }

    get(key: keyof EnvironmentConfig, fallback?: any): any {
        const value = this.m.get(key);
        return (value !== undefined) ? value : fallback;
    }
}

Вот и это, это было последнее произведение, необходимое для реализации переменных среды в трафаретной проекте или приложении Ionic PWA Toolkit 🎉

Чтобы получить переменную, вы теперь можете просто позвонить в любом месте вашего кода вашего сервиса и попросить значение параметра, как в следующем примере:

const url: string = 
                EnvironmentConfigService.getInstance().get('url');
console.log('My environment variable value:', url);

Вишня на торте 🍒🎂

Как я уже сказал, это решение реализуется в дистанционном управлении My Project Deckdeckgo и угадать, что этот проект является открытым исходным кодом. Поэтому, если вы хотите проверить конкретный пример такой реализации, вы можете просматривать или клонировать репозиторий Deckdeckgo 😃

git clone https://github.com/deckgo/deckdeckgo

До бесконечности и за пределами 🚀

Дэйвид

Оригинал: “https://dev.to/daviddalbusco/environment-variables-with-stenciljs-h6”