webpack DefinePlugin Использование env переменных из файла в javascript. Пример конфигурации
Primary tabs
DefinePlugin позволяет определить какие литералы на что надо заменить в коде при его сборке, именно там с помощью вебпака можно экспортировать переменные из файлов окружения в ваше-фронт приложение
Базования идея (требуется установить npm-пакет dotenv):
const webpack = require('webpack'); const dotenv = require('dotenv'); module.exports = () => { // разбираем .env файл const env = dotenv.config().parsed; // собираем объект замен const envKeys = Object.keys(env).reduce((prev, next) => { prev[`process.env.${next}`] = JSON.stringify(env[next]); return prev; }, {}); return { plugins: [ new webpack.DefinePlugin(envKeys) ] };
На практике можно использовать слияние локального и глобального кофигов (с проверкой существования локального, который можно поместить в gitignore и не хранить в репозитории):
const webpack = require('webpack'); const dotenv = require('dotenv'); const fs = require('fs') module.exports = () => { // ------- load env const frontEnvPath = './.env.front'; const frontEnvLocalPath = './.env.front.local'; var env = dotenv.config({path: frontEnvPath}).parsed; try { if (fs.existsSync(frontEnvLocalPath)) { let envLocal = dotenv.config({path: frontEnvLocalPath}).parsed; env = {...env, ...envLocal} // объединяем конфигурации } } catch (err) { console.error(frontEnvLocalPath + ' file:', err); } //-------------------- // собираем объект замен const envKeys = Object.keys(env).reduce((prev, next) => { prev[`process.env.${next}`] = JSON.stringify(env[next]); return prev; }, {}); return { plugins: [ new webpack.DefinePlugin(envKeys) ] };
Источники:
- Идея взята из примера: https://medium.com/@trekinbami/using-env...
- DefinePlugin: https://webpack.js.org/plugins/define-pl...
- Log in to post comments
- 2017 reads