node 全局变量 process.env 定义变量

我们在开发的时候会有生产环境（production）和开发环境（development），这两种环境中可能用到不同的配置，比如上线的时候本地域名替换成线上域名，如何区别使用它们，是我今天要谈到的一个问题。

Node.js 中有一个全局的对象 process，这个对象无需 require() ,它控制着 Node.js 的进程的信息。

控制台输入 node 进入 REPL 环境，输入 process.env 可看到一个对象。

C:\Users\Administrator\Desktop\所有的样式表>node
> process.env

我们接下来结 env 添加一个 NODE_ENV 属性，我们通过这个 NODE_ENV 来判断开发环境和生产环境。

那么如何设置使用它那？思路就是使用 cross-env 实现跨平台设置 NODE_ENV。

首先安装 cross-env：

npm install --save cross-env

打开 package.json 文件修改 script 的内容：

"scripts": {
  "dist": "cross-env NODE_ENV=production webpack"//新增的代码 cross-env NODE_ENV=prod
},

然后去修改 webpack.config.js 的内容：

console.log("☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆");
console.log(process.env.NODE_ENV);
console.log("☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆");

最后还是像启用项目一样启用 package.json 就行了。

npm run dist

就会看到控制台已经输出，我们定义的变量：

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
production
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

如果我们把变量放在 webpack.config.js 的 mode 里面：

mode:process.env.NODE_ENV

完全可以在组件里面进行访问：例如App.js 里面

import React, { Component } from 'react'
console.log(process.env.NODE_ENV)
export default class App extends Component {
    render() {
        return (
            <div>
                <h1>Hello World！</h1>
            </div>
        )
    }
}