What is the process. The env. NODE_ENV

Process.env.node_env is probably the most familiar environment variable. It is often used when using frameworks or libraries to distinguish between different environments (development, test, production, etc.) so that we can configure the project accordingly, such as whether to enable sourceMap, API address switching, etc. So why is process.env.node_env used to distinguish environments? How did it come about?

Let’s start with the official explanation of process and process.env:

  • process

The Process object is a global variable that provides information that controls the current Node.js process. As an object, it is always available to Node.js applications, so require() is not required.

  • process.env

The process.env attribute returns an object containing information about the user’s environment.

In the Node environment, when we print process.env, we find that it does not have a NODE_ENV attribute. Process.env.node_env is injected into package.json scripts.NODE_ENV is user-defined, not node.

{
  "scripts": {
    "dev": "NODE_ENV=development webpack --config webpack.dev.config.js"}}Copy the code

We can see that NODE_ENV is assigned to development, and when NPM run dev is executed, we can access process.env.node_env in the webpack.dev.config.js script and the script it introduces. It cannot be accessed in other scripts.

How do I access it in other scripts

As mentioned earlier, NODE_ENV injected in scripts can only be accessed by webpack’s build scripts, not by webpack’s packaged source code. In this case, you can create global variables using Webpack’s DefinePlugin.

const webpack = require('webpack');
module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"development"'}})]Copy the code

Of course DefinePlugin can define more than process.env.node_env. You can also define other global variables as needed. Once the definition is complete, it can be used directly in the project code.

Cross-platform cross-env

Setting NODE_ENV =XXX directly on Windows will cause an error. Cross-env can provide scripts for setting environment variables, so that we can set environment variables in Unix mode, which is compatible with Windows.

  1. The installationcross-env
npm install cross-env --save
Copy the code
  1. inNODE_ENV=XXXAdd in front of thecross-env.
"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server"
}
Copy the code

Env file

If there are too many environment variables that need to be configured and all of them are not beautiful or easy to maintain in the scripts command, configure the environment variables in the. Env file and use the dotenv plug-in to load the.

  1. The installationdotenv
npm install dotenv --save
Copy the code
  1. create.envfile
NODE_ENV = development # This is a comment API_URL = https://abc.comCopy the code
  1. Introduce and configure early in the programdotenv. The path to the. Env file can be configured in the config function. Specific referenceDotenv document
require('dotenv').config()
Copy the code

This allows you to use environment variables in your program.

In real projects, we would normally set NODE_ENV in scripts and load different. Env files from different NODE_ENV commands.

Here’s an example:

There is a project with a simple project structure as follows:

├ ─ ─ env ├ ─ ─. Env. Dev ├ ─ ─ the env. Test ├ ─ ─ the env. Pre └ ─ ─ the env. The PRD ├ ─ ─ webpack. Config. JsCopy the code

The.env.*** file is configured with variables corresponding to each environment, for example:

#.env.test file API_URL = https://abc-test.com #.env.pre file API_URL = https://abc-pre.com #.env. PRD file API_URL = https://abc.comCopy the code

Load env configuration in webpack.config.js:

require('dotenv').config({ path: path.resolve(__dirname, './env/.env.' + process.env.NODE_ENV) })
Copy the code

Finally, don’t forget to set NODE_ENV in scripts:

# dev
cross-env NODE_ENV=dev

# test
cross-env NODE_ENV=test

# pre
cross-env NODE_ENV=pre

# prd
cross-env NODE_ENV=prd
Copy the code

Vue CLI can also load. Env files. For details, see Vue CLI – Environment Variables and Modes