Переменные окружения в изоморфном приложении JS: найти и заменить Webpack?

Question

Я использую webpack для объединения изоморфного приложения JS (based on this example), чтобы браузер выполнял тот же код, что и сервер. Все идет гладко, за исключением того, у меня есть config.js с некоторыми параметрами, которые тянули в из переменных окружения на сервере:

module.exports = { 
    servers: 
    auth: process.env.AUTH_SERVER_URL, 
    content: process.env.CONTENT_SERVER_URL 
    } 
} 

На сервере это большое, но когда WebPack делает это для клиента process пуст, и это не работает.

Я надеюсь, что есть что-то вроде «найти и заменить» плагин webpack, который заменит их своим содержимым только в этом файле?

"…config.js content…".replace(/process\.env\.([a-z0-9_]+)/, function(match, varName) { 
    return process.env[varName]; 
}) 

Answer 1

В вашем webpack.config.js, использовать следующие preLoaders (или postLoaders),

module: { 
    preLoaders: [ 
     { test: /\.js$/, loader: "transform?envify" }, 
    ] 
    } 

Другой способ использования в webpack.DefinePlugin:

plugins: [ 
    new DefinePlugin({ 
     'process.env': Object.keys(process.env).reduce(function(o, k) { 
     o[k] = JSON.stringify(process.env[k]); 
     return o; 
     }, {}) 
    }) 
] 

ПРИМЕЧАНИЕ: старый метод, использующий envify-loader осуждался:

DEPRECATED: используйте transform-loader + envify вместо этого.

Answer 2

Да; выглядит как envify-loader было простым решением.

Я просто добавил следующее моих WebPack погрузчиков:

{ 
    test: /config\.js$/, loader: "envify-loader" 
} 

И config.js (и только этот файл) модифицируется, чтобы включить любые ссылочные переменные окружения статически :)

Answer 3

Обратите внимание, что использование DefinePlugin, как предложено в принятом ответе, потенциально опасно, поскольку оно полностью предоставляет process.env. Как уже отмечал Тобиас, на самом деле есть плагин EnvironmentPlugin, который делает именно это с добавленной способностью «белый список», используя внутреннюю область DefinePlugin.

В вашем webpack.config.js:

{ 
    plugins: [ 
    new webpack.EnvironmentPlugin([ 
     'NODE_ENV', 
     'WHITELISTED_ENVIRONMENT_VARIABLE' 
    ]) 
    ] 
} 

Answer 4

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

Я пока не вижу решения. Это то, что я сделал.

В publicEnv.js:

// List of the env variables you want to use on the client. Careful on what you put here! 
const publicEnv = [ 
    'API_URL', 
    'FACEBOOK_APP_ID', 
    'GA_ID' 
]; 

const isBrowser = typeof window !== 'undefined'; 
const base = (isBrowser ? window.__ENV__ : process.env) || {}; 

const env = {}; 
for (const v of publicEnv) { 
    env[v] = base[v]; 
} 
export default env; 

В шаблоне HTML файл страницы у меня есть:

import publicEnv from 'publicEnv.js'; 

... 

<script> 
    window.__ENV__ = ${stringify(publicEnv)}; 

    // Other things you need here... 
    window.__INITIAL_STATE__ = ${stringify(initialState)}; 
</script> 

Так что теперь я могу получить значение переменного окр на оба фронтэнде и бэкэнде с:

import publicEnv from 'publicEnv.js'; 

... 

console.log("Google Analytic code is", publicEnv.GA_ID); 

Надеюсь, это поможет.