将环境变量从package.json传递到React应用

Question

I'm building a React / Node / Express / Webpack (2.2.1) application and would like to know how to approach the following:

I would like an environment variable to be visible in the React client - the purpose being for certain api requests to use either the localhost or otherwise the IP address of the production server.

Is it possible to get an environment variable from running a script in package.json, to the webpack build, and then compiled and visible in the bundled javascript.

So in terminal run:

npm run build-dev // pass to Webpack something like APP_ENV="development"

or

npm run build-prod // pass to Webpack something like APP_ENV="production"

and the script definition being something like:

"scripts": {
    "build-dev": "webpack --define APP_ENV='development'"
}

...help greatly appreciated

Answer 1

CLI with --define option

--define option using webpack.DefinePlugin so you must pass a string value into app.

Demo

 "scripts": { "build-dev": "webpack --define APP_ENV=\\"'development'\\"" } 

config webpack.config.js plugins and pass process.env into app

APP_ENV="development" npm run build-dev nodejs set environment variables at the head of command.you can use webpack.EnvironmentPlugin to expose process.env into bundle.js that I have tested.

Demo

 "scripts": { "build-dev": "APP_ENV=development webpack" } 

Test

 describe('string-replace-webpack-loader', () => { it('environment exists', () => { expect(process.env.APP_ENV).toBe('dev'); }); it('replace environment variables', compile({ entry: './env.js', plugins: [ new webpack.EnvironmentPlugin(Object.keys(process.env)) ] }).then(({log}, files) => { expect(files['/bundle.js']).toMatch(/(["'])dev\\1/); })); });