Как установить process.env перед запуском браузерного скрипта?

Вместо жесткого кодирования переменных среды тут и там используйте подключаемый модуль envify.

npm install envify 

Этот плагин автоматически изменяет process.env.VARIABLE_HERE тем, что вы передали в качестве аргумента для envify.

Например:

browserify index.js -t [ envify --DEBUG app:* --NODE_ENV production --FOO bar ] > bundle.js

В вашем приложении process.env.DEBUG будет заменено на app:*, process.env.NODE_ENV будет заменено на production и так далее. На мой взгляд, это чистый и элегантный способ справиться с этим.

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

process.env.NODE_ENV = 'production';
require('app.js');

Другой способ (более чистый) - использовать преобразование, например envify, которое заменяет ваш NODE_ENV в коде на строку значение напрямую.

Опция 1

Я думаю, что ваш подход в целом должен работать, но я бы не стал писать напрямую в process.env, так как я почти уверен, что он будет перезаписан в комплекте. Вместо этого вы можете создать глобальную переменную, например __env, а затем в фактическом коде пакета установить для нее значение process.env в вашем файле ввода. Это непроверенное решение, но я считаю, что оно должно работать.

Вариант 2

Используйте localStorage и позвольте вашему основному сценарию читать оттуда переменные при инициализации. Вы можете установить переменные в localStorage вручную или даже позволить серверу предоставить их, если они у вас есть. Разработчик просто откроет консоль и наберет что-то вроде loadEnv('production'), он сделает XHR и сохранит результат в localStorage. Даже при ручном подходе все еще есть преимущество, заключающееся в том, что их не нужно жестко кодировать в html.

Если руководство не звучит достаточно хорошо, а сервер тоже тупик, вы можете просто включить все переменные из всех сред (если они у вас где-то есть) в пакет, а затем использовать оператор switch, чтобы выбрать правильные на основе некоторых условий (например, .localhost, производственный хост).

Думая об этом, вы определенно выходите за рамки Browserify с вашими потребностями. Он может сделать пакет для вас, но если вы не хотите, чтобы эта информация была в пакете, вы сами по себе.

Поэтому я решил, что задача веб-сервера — вставить переменные среды. В моем сценарии требовались разные регистраторы для каждой среды (например, «локальный», «тест», «продукт»).

код:

var express = require('express')
  , replace = require('replace');

...

var app = express();
var fileToReplace = <your browserified js here>;
replace({
  regex: 'ENV_ENVIRONMENT'
  , replacement: process.env.ENVIRONMENT
  , paths: [fileToReplace]
});

...

app.listen(process.env.PORT);

Я жестко закодировал «ENV_ENVIRONMENT», но вы можете создать объект в своем package.json и сделать его настраиваемым.

Это, безусловно, работает, и это имеет смысл, потому что это, возможно, единственная точка входа на сервер, которая у вас есть.

Сначала мне удалось записать файл json, а затем импортировать этот файл json в любое место, где нужно было прочитать среду.

Итак, в моем файле глотка:

import settings from './settings';
import fs from 'fs';
...
fs.writeFileSync('./settings.json', JSON.stringify(settings));

В файле settings.js:

if(process.env.NODE_ENV) {
    console.log('Starting ' + process.env.NODE_ENV + ' environment...');
} else {
    console.log('No environment variable set.');
    process.exit();
}

export default (() => {
    let settings;

    switch(process.env.NODE_ENV) {
        case 'development':
            settings = {
                baseUrl: '...'
            };
            break;
        case 'production':
            settings = {
                baseUrl: 'some other url...'
            };
            break;
    }

    return settings;
})();

Затем вы можете импортировать файл settings.json в любой другой файл, и он будет статическим, но будет содержать вашу текущую среду:

import settings from './settings.json';
...
console.log(settings.baseUrl);

Я пришел сюда в поисках более чистого решения... удачи!

Я сталкиваюсь с этой проблемой при создании изоморфных реагирующих приложений. Я использую следующее (хорошо, немного хакерское) решение:

Я назначаю env объекту window, конечно, я не раскрываю все env vars, только те, которые могут быть общедоступными (без секретных ключей паролей и т.п.).

// code...
const expose = ["ROOT_PATH", "ENDPOINT"];
const exposeEnv = expose.reduce(
    (exposeEnv, key) => Object.assign(exposeEnv, { [key]: env[key] }), {}
);
// code...
res.send(`<DOCTYPE html>
// html...
<script>window.env = ${JSON.stringify(exposeEnv)}</script>
// html...
`);
// code...

затем в точке входа клиентов моих приложений (о да, у вас должна быть одна точка входа) я делаю это:

process.env = window.env;

YMMV АКА WFM!