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

Скрыть переменные среды в вашем проекте StenCiljs

Как скрыть переменные среды в репо ваших проектах, разработанных с помощью Stenciljs или Ionic PWA Toolkit. Tagged с веб -компонентами, трафаретом, JavaScript, HTML.

Скрыть переменные среды в вашем проекте StenCiljs

В предыдущем Статья Я описал, как я реализовал переменные среды в своем Трафарет Проекты или в моих проектах, созданных с помощью Ионический PWA Toolkit Анкет

С момента этой публикации мы начали активно работать над нашим предстоящим редактором для презентаций PWA, DeckDeckgo и как проект открыт и опубликован на GitHub , мы подумали, что, возможно, было бы неплохой идеей не публиковать наши ключи API и Другое Firebase токены онлайн в нашем публичном репо 😉

По этой причине мне пришлось пойти на шаг дальше, чем мой предыдущий пост соответственно, мне пришлось найти и разработать решение, чтобы сэкономить отдельно наши ключи. Поэтому я рад поделиться своим решением с этим новым сообщением в блоге 😃

Примечание

Да, мы знаем, что наши переменные окружающей среды будут содержаться в нашем клиентском пакете и, следовательно, подвергаются воздействию любого с небольшим количеством ретро -инженерии Но мы подумали, что было бы немного чище, чтобы не толкать их в нашем репо.

Начиная

Проекты трафарета опираются на RULLUP Поэтому мы не собираемся заново изобретать колесо, мы просто собираемся использовать плагин Rollup’s Rollup Plagin-Replace который мы устанавливаем, выполняя следующую командную строку:

npm install rollup-plugin-replace --save-dev

Этот плагин позволит нам заменить значения во время пакета.

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

После установки плагина мы могли бы редактировать нашу конфигурацию в наших классах начальной загрузки соответственно, мы могли бы редактировать наш app.ts Файл, чтобы заменить значения, которые мы хотим скрыть. В этом конкретном посте мы собираемся скрыть URL -адрес API. Для этого мы собираемся заменить значения уникальным селектором (который будет автоматически заменен реальными значениями в течение времени объединения, как только мы реализовали все решение):

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

setupConfig({
    url: '<@API_URL@>',
    production: true
});

В моей предыдущей статье мы определили две разные среды, и поэтому я все равно буду предполагать, что наша цель – обрабатывать две среды соответственно Производство и Развитие Анкет

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

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

setupConfig({
    url: '<@API_URL@>',
    production: false
});

Обратите внимание, что мы используем <@ а также @> сделать наш селектор действительно уникальным. Эти атрибуты не статичны, если вы предпочитаете использовать других, это абсолютно для вас, без проблем. Затем вы должны просто подумать позже в этом уроке, ваши модификации, когда вы настраиваете плагин.

Определение значений селекторов

Чтобы завершить конфигурацию, теперь мы должны создать «где -то» некоторые файлы, которые будут содержать реальные значения для наших селекторов. Лично я выбрал решение, в котором я обрабатываю значения в json Файлы, размещенные в корне моего проекта и исключенные из GIT (я добавил их в список git .INGINER файлы). Поэтому мы могли бы, например, создать новый файл config.prod.json в корне проекта и отредактируйте его с помощью нашего селектора и реальных значений:

{
  "API_URL": "https://api.production.com"
}

Конечно, теперь мы также должны создать еще один файл конфигурации config.dev.json Для селектора и ценностей или нашей среды разработки:

{
  "API_URL": "http://localhost:3002"
}

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

Теперь, когда наша конфигурация готова, мы должны просто настроить и использовать плагин, который мы установили ранее, чтобы заменить селектор на реальные значения во время пакета. Для этой цели мы собираемся редактировать stencil.config.ts Как следующее:

import replace from 'rollup-plugin-replace';

// See my previous article for development detection

const dev: boolean = process.argv && process.argv.indexOf('--dev') > -1;

import devConfig from './config.dev.json';
import prodConfig from './config.prod.json';

const configValues = dev ? devConfig : prodConfig;

export const config: Config = {
    ...
    plugins: [
      replace({
        exclude: 'node_modules/**',
        delimiters: ['<@', '@>'],
        values: configValues
      }),
    ...
};

Вуаля, не более, не меньше 🎉 С этого момента каждый раз, когда вы будете в комплекте, значения конфигурации, которые вы сохраняли отдельно, или вы не совершали в своем репо, будут введены во время пакета, легкий Peasy 👻

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

Как я уже говорил во введении, это решение реализовано в нашем будущем редакторе PWA Presentations DeckDeckgo, и, поскольку этот проект является открытым исходным кодом, вам наиболее приятно взглянуть на решение, которое я реализовал. Вы заметите, что я реализовал тот же код и конфигурацию, что и выше, но вы не найдете ни одного config.prod.json или config.dev.json в нашем репо 😉

https://github.com/deckgo/deckdeckgo/tree/master/studio

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

Дэйвид

Оригинал: “https://dev.to/daviddalbusco/hide-environment-variables-in-your-stenciljs-project-56ge”

Читайте ещё по теме: