NodeH1

系统环境变量

• Windows set NODE_ENV=production
• Linux NODE_ENV=production

可以在node环境中通过process.env 获取，为了平台兼容性，可以使用cross-env来设置环境变量cross-env NODE_ENV=production

除了在命令行指定环境变量外，如果通过npm运行，还可以的package.json中指定环境环境

jsx
{
  "name" : "foo",
  "config" : { "port" : "8080" },
  "scripts" : { "start" : "node server.js" }
}

config 中设置的变量（也叫做Per-Package Config Settings）通过npm_package_config_port 环境变量来读取

通过npm config set 或者npm_config_ 环境变量设置的变量，通过npm_config_port 来读取

添加下面的脚本来测试环境变量

jsx
"scripts": {
    "env": "node -p \"process.env.foo\"",
}

process.env.NODE_ENVH1

process.env.NODE_ENV 环境是一个重要的约定俗成的变量，用来标识当前的目标环境，如果是生产环境则值为production ，开发环境则为development

WebpackH1

Node环境变量只能在Node环境下才能获取到的，前端项目一般在浏览器环境运行，是无法获取到的。webpack.DefinePlugin 能够在编译时创建全局变量，让浏览器运行时环境获取到，可以通过这个插件将Node环境变量传递个运行时

bash
new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
});

ModeH2

Webpack4 可以设置mode参数，当mode 的值未procution时，会自动定义DefinePlugin以及NODE_ENV

jsx
// webpack.production.config.js
module.exports = {
  mode: 'production',
 ...
 plugins: [
   new TerserPlugin(/* ... */),
   new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
   new webpack.optimize.ModuleConcatenationPlugin(),
   new webpack.NoEmitOnErrorsPlugin()
 ]
}

EnvH2

Webpack中如果使用node环境变量外，还可以通过—-env 的命令行参数设置环境参数（在Webpack脚本中读取）

jsx
webpack --env NODE_ENV=local --env production --progress

module.exports = env => {
  // Use env.<YOUR VARIABLE> here:
  console.log('NODE_ENV: ', env.NODE_ENV); // 'local'
  console.log('Production: ', env.production); // true

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };
};

create-react-appH1

create-react-app中会把REACT_APP_ 开头的环境变量通过webpack.DefinePlugin 传入到运行时。

除了常规的node环境下定义的环境变量的方式外，create-react-app支持从.env 文件中读取环境变量

create-react-app 会读取文件

• .env: Default.
• .env.local: Local overrides. This file is loaded for all environments except test.
• .env.development, .env.test, .env.production: Environment-specific settings.
• .env.development.local, .env.test.local, .env.production.local:

命令会读取的文件

• npm start: .env.development.local, .env.local, .env.development, .env
• npm run build: .env.production.local, .env.local, .env.production, .env
• npm test: .env.test.local, .env.test, .env (note .env.local is missing)

指定额外的.env文件H2

需要配合env-cmd 使用

安装

jsx
npm install env-cmd --save

使用

jsx
{
  "scripts": {
    "build:staging": "env-cmd -f .env.staging npm run build"
  }
}