深入理解process.env的使用

「这是我参与2022首次更文挑战的第20天，活动详情查看：2022首次更文挑战」

前言

前段时间公司多端项目面临着超包的问题，综合各方面考虑，采用了收益率最高的Taro版本升级方案。在Taro升级的过程中，我偶然发现了官方文档中有一段关于环境变量process.env的使用提醒。但是，就短短的一小行描述，有点意犹未尽的感觉，我决定好好探索一下，从而彻底掌握环境变量的用法。

不要以解构的方式来获取通过 env 配置的 process.env 环境变量，请直接以完整书写的方式 process.env.NODE_ENV 来进行使用。

接下来我就开始探索之旅了。

环境变量的价值

在Taro3中，使用环境变量的最大好处：在编译阶段，会移除不属于当前编译类型的代码，只保留当前编译类型下的代码。开发过小程序的小伙伴应该深有体会，随着业务的增长，代码体积的增大，小程序超包问题简直是进行小程序开发过程中挥之不去的噩梦。各种类型小程序（微信小程序、支付宝小程序、京东小程序等）都对主包和总包的体积大小有所限制，每次进行技术方案评审的时候，死死盯着需求，生怕有一丝业务牵扯到主包的变动。

通过使用环境变量之后，如果可以进行代码体积的缩减，那这绝对是救命的法宝呀。

环境变量的探索

1. 官方使用方案

既然官方提供了环境变量的使用方法，那我们就先来探究一下官方的使用方案。真的有那么好用吗？让我们拭目以待。

我先来写一段测试代码来看一下效果。

我们分别在生命周期钩子和render函数中插入下面的代码进行测试：

    // componentDidMount钩子
    if (process.env.TARO_ENV === 'weapp') {
      this.setState({
        platform: 'weapp',
      });
    }

    if (process.env.TARO_ENV === 'alipay') {
      this.setState({
        platform: 'alipay',
      });
    }

    // render函数
    {
      process.env.TARO_ENV === 'weapp'
        ? (<Text>weapp12345</Text>)
        : (<Text>weapp67890</Text>)
    }
    {
      process.env.TARO_ENV === 'alipay'
        ? (<Text>alipay12345</Text>)
        : (<Text>alipay67890</Text>)
    }
复制代码

执行 run build:weapp 命令行，进行打包编译，然后我们来看一下编译结果。

企业微信截图_16458751481559.png

企业微信截图_16458751918295.png

哇，真的有效呀，而且很显著。那岂不是说，针对不同端的业务逻辑和不同品牌的定制业务都可以通过环境变量来控制呢？这样的话，对于不同端、不同品牌来说，其它条件一致的情况下，代码体积可以大大的减少呀。

2. 错误尝试

我是不太信邪的，官方不是说不要使用结构吗？那我非得试上一试，不撞南墙不回头。

第一次尝试：

我将 process.env.TARO 调整为赋值给变量，然后通过变量的方式进行判断处理，具体实现看代码：

    const env = process.env.TARO_ENV;
    
    // componentDidMount钩子
    if (env === 'weapp') {
      ...
    }

    if (env === 'alipay') {
      ...
    }
    
    // render
    {
      env === 'weapp'
      ...
    }
    {
      env === 'alipay'
      ...
    }
复制代码

看一下效果，难受的一批，果然，我大爷还是我大爷，这种方式确实不可行，对减少代码量没有丝毫作用。

企业微信截图_16458834656505.png

企业微信截图_16458834943903.png

本着程序猿的探索精神，我决定再试一次，说不定就会有奇迹诞生。

第二次尝试：

我决定将环境进行解构赋值，然后再进行判断处理，具体实现看代码：

    const { TARO_ENV } = process.env;
    
    // componentDidMount钩子
    if (TARO_ENV === 'weapp') {
      ...
    }

    if (TARO_ENV === 'alipay') {
      ...
    }
    
    // render
    {
      TARO_ENV === 'weapp'
      ...
    }
    {
      TARO_ENV === 'alipay'
      ...
    }
复制代码

难受，我难受。折腾是折腾了，但是结果还是原来的结果。不过，也不是没有收获，首先加深了对这个优化点的印象，其次，印证了官方所说的process.env直接使用的意义。