短篇巩固基础系列 -- 工程里的环境变量ENV

一、前言

今天我们来讲下“环境变量”，这个知识点也是平时工作中能够用到的知识点，废话不多说，立刻开始吧。

二、环境变量的生存环境

“环境变量”的生存环境分为：node环境、浏览器环境。根据环境的不同，设置“环境变量”的方式也不同，在下面的演示中，我们以webpack为基础开始演示。

2.1、node环境

在node环境里， 我们一般使用 cross-env 来设置环境变量，cross-env 是一个可以忽略操作系统来设置环境变量的第三方库。类似这样的库还有很多，这里就不一一例举了，大家请自行百度。

cross-env的使用：

   // package.json文件如下：
   {
       "scripts": "cross-env node_env=xxx"
   }

在node环境里，我们可以通过 process.env.node_env 来访问 node_env 这个环境变量。代码如下：

    // webpack.config.js文件如下：
    
    const webpack = require('webpack');
    
    console.log('访问node环境里的node_env:', process.env.node_env)
    
    module.exports = {
        mode: process.env.node_env
    }

2.2、浏览器环境

我们可以通过webpack的DefinePlugin插件实现能够在浏览器里访问的"环境变量"。

DefinePlugin的使用：

   // webpack.config.js文件 如下：
   
   const webpack = require('webpack');
   
   module.exports = {
       plugins: [
           new webpack.DefinePlugin({
               browser_env: JSON.stringify('xxx')
           })
       ]
   }

此时假设我们的项目是一个react项目，经过上面的设置，我们可以在react任意组件里访问到这个变量。代码如下：

    import React from 'react';
    
    export default class App extends React.Component {
        constructor(props){
            super(props)
        }
        componentDidMount(){
            console.log('browser_env:', browser_env);
        }
        render (){
            return <div></div>
        }
    }

三、最后

好啦，这篇文章就到这啦，我们下次再见。