С помощью Laravel Elixir

О .env

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

Laravels решает эту проблему, предоставляя файл .env. Этот файл может содержать любую переменную, которая может содержать разные значения во всех ваших средах (dev, test, live и т. Д.), И может быть прочитана Laravel. Это дает очень удобный способ управления поведением наших приложений в этих различных средах.

А как насчет JavaScript?

Иногда вы хотите использовать переменную из вашего файла .env в JavaScript. Возможно, вы хотите перенаправить на URL-адрес своего приложения или, например, хотите установить значение отладки для библиотеки JavaScript.

В этом случае следует рассмотреть несколько вариантов:

Глобальная переменная

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

В нашем файле шаблона это будет выглядеть примерно так:

<script>
 window.myVar = '{{ env('MY_VAR') }}';
</script>

Примечание: этот фрагмент должен быть включен до того, как вы получите доступ к этой переменной, поэтому я рекомендую вам поместить его в свою голову или, по крайней мере, где-нибудь перед включением JS.

Кроме того, в Laravel рекомендуется использовать помощник по настройке вместо прямого доступа к env.

Теперь вы можете использовать myVar в своем JavaScript, и он будет содержать значение вашего PHP-кода.

Это удобный и быстрый способ обработки переменных env в JavaScript, однако он не сработает, если вы попытаетесь включить файл JavaScript на другой веб-сайт, который не включает фрагмент кода для установки значения переменной. Это может иметь место, если вы работаете над виджетом, который можно включить на несколько веб-сайтов, или, например, хотите поделиться своим JavaScript с другими приложениями.

Компиляция переменных

Самый простой способ справиться с этим - скомпилировать наши переменные непосредственно в JavaScript. При этом мы можем использовать «заполнитель» в нашем файле JavaScript, и по мере компиляции кода этот заполнитель будет заменен фактическим значением значения нашего файла .env на тот момент. Это замечательно, если вы уже используете Laravel Elixir / Gulp для компиляции кода JavaScript.

Я нашел этот красивый пакет, который может передавать переменные в переменные process.env Webpack, поэтому вы можете легко получить к ним доступ, указав process.env.myVar в вашем JavaScript. . Обладая этими знаниями, я решил, что мы можем просто прочитать весь наш файл .env и передать его в Webpack, здорово :).

Чтобы упростить вам задачу, я обернул это в красивый простой пакет, который вы можете включить в свой Gulpfile (если вы используете Laravel Elixir и Webpack).

Инструкции по установке, которые помогут вам начать работу на GitHub: github.com/appstract/laravel-elixir-env

Я надеюсь, что это прояснит вам, когда использовать какую опцию для доступа к вашим переменным env в JavaScript.

Если у вас есть какие-либо вопросы или отзывы, сообщите нам об этом.

Удачного программирования!