6 个脚手架工具中的环境变量配置 - 《前端烂笔头》

前言
各个脚手架工具的环境变量
总结

前言

环境变量 （environment variables）这个概念，在前端工程化盛行之时，便悄悄的进入了前端的视野。前端远古时代没有工程化的概念，开发环境、测试环境、生成环境全靠大家手动配置。而现如今 webpack 、 snowpack 、 rollup 等打包工具大行其道，我们不得不将它重视起来。在现代前端开发的一整个链路中， 环境变量 起到一个项目的配置枢纽作用，个人拙见，不喜轻喷。

各个脚手架工具的环境变量

是门面上不乏各式各样的脚手架工具，如 Vue CLI 、 UmiJS 、 Vite 、 create-react-app 、 Nuxt.js 、 Next.js 等等，上述这些工具我想作为一名前端开发，多少都会接触过一两个，如果你是高级玩家，想必不用再往下看了，因为通过阅读文档，以及自己的实验，就能知道如何在这些脚手架工具下获取环境变量。但对致力于从 0 到 1 搭建一套前端项目开发环境的新手前端来说，这篇文章可以好好看看，兴许对你会有所帮助。

Vue CLI

一定要先看官方文档，不要上来就开整，很多配置内部是有约定的，所以别乱来。文档说的很清楚，三种模式 development、 test、 production，分别代表开发、测试、生产。

可以在命令行这样设置：

"scripts": {
  "serve": "vue-cli-service serve",
  "build:beta": "vue-cli-service build --mode development",
  "build:release": "vue-cli-service build --mode production",
  "lint": "vue-cli-service lint"
}

文件名对应 mode 配置，当你运行指令 npm run build:beta 时，便可以在页面内部获取 .env.development 内设置的变量，如下所示：

<template>
  <img alt="Vue logo" src="./assets/logo.png">
</template>
<script>
export default {
  name: 'App',
  setup() {
    console.log('env', process.env)
  }
}
</script>

这里要特别注意一点，Vue CLI 在打包生产环境的时候，一定要使用 production 模式，因为内部 webpack 构建代码的时候，会根据 NODE_ENV 来选择不同的构建脚本，生产环境肯定会做很多优化，所以切记。

有了环境变量之后，在项目内一些测试环境、生产环境需要的资源，便可以动态配置。

Vite

Vite 2.0 是今年刚出来的新脚手架，香气四溢。我发现上一篇文章《Vite 2.0 + React + Ant Design 4.0 搭建开发环境》中，获取环境变量有更好的方式，这是我从官方文档中发现的。

首先 package.json 做如下修改：

"scripts": {
  "dev": "vite --mode development",
  "build:beta": "vite build --mode beta",
  "build:production": "vite build --mode production",
  "serve": "vite preview"
},

在 vite.config.js 中，可以通过如下形式拿到 mode：

export default ({ mode }) => defineConfig({
    ...
})

在页面中，我们通过在根目录设置 .env.document 、 .env.beta 、 .env.production 来设置相应环境的变量，上述三个脚本内的文件最好是如下形式：

VITE_BASE_URL=http://www.development.baidu.com
VITE_BUILD_ENV=beta

在页面内部通过 import.meta.env 获取，打印结果如下所示：

UmiJS

同样先看看官方文档的描述，如下所示：

关键词 UMI_ENV ，这里我举例 config 的配置形式，创建一个基础 umi 项目，配置如下所示：

config.beta.js 的代码如下：

export default {
  define: {
    'process.env.BUILD_ENV': 'beta'
  }
}

config.release.js 的代码如下：

export default {
  define: {
    'process.env.BUILD_ENV': 'release'
  }
}

运行项目的过程中，你可以在内部脚本中，通过 process.env.BUILD_ENV 获取相应的环境变量。这里的环境变量名，可以自定义。

Nuxt.js

它配置环境变量就比较简单了，修改 package.json 如下所示：

"scripts": {
  "dev": "NODE_ENV=development nuxt",
  "build:beta": "NODE_ENV=beta nuxt build",
  "build:production": "NODE_ENV=production nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
}

设置好后，在项目中通过 process.env.NODE_ENV 获取，运行 yarn dev 打印结果如下所示：

当然， nuxt.config.js 内部也可以通过 env 配置，这里不做赘述。

create-react-app

官方文档说它只有两个环境，一个是开发环境 development，另一个便是生产环境 production。那怎么添加测试环境呢，内部页面没法判断生产环境是正式还是测试。经过我一番搜索，找到一个工具库 — dotenv-cli。将其安装到 devDependencies ：

yarn add dotenv-cli -D

然后我们修改 package.json 如下：

"scripts": {
  "start": "react-scripts start",
  "build:beta": "dotenv -e .env.beta react-scripts build",
  "build:production": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

煮鱼， .env.beta 对应的根目录的 .env.beta，而 build:production 的指令，默认对应的是 .env.production，如下所示：

运行打包后，你可以在内部页面通过 process.env.REACT_APP_TITLE 拿到环境变量，具体的值可以自己配置，但是请以 REACT_APP_ 开头，否则内部无法识别。否则打包的时候，默认就会获取 .env.production 上的变量。

我尝试打完测试包后运行项目，打印 process.env 如下所示：

Next.js

不跟你多 BB，直接上 package.json ：

"scripts": {
  "dev": "BUILD_ENV=development next dev",
  "build:beta": "BUILD_ENV=beta next build",
  "build:production": "BUILD_ENV=production next build",
  "start": "next start"
}

同样， Next.js 只有开发环境和生产环境，没有区分正式和测试，这边就通过 BUILD_ENV 的环境变量来区分 beta 和 production。接下来要配置一下 next.config.js ：

module.exports = {
  env: {
    BUILD_ENV: process.env.BUILD_ENV
  }
}

通过这样的配置之后，在页面中便可以通过 process.env.BUILD_ENV 获取到环境变量，启动开发环境，打印结果如下：

总结

现如今的前端工程化已经深入人心，如果你想获得一些前端岗位上的竞争优势，你必须要尝试着，自己去从 0 到 1 架构出一个项目，包括后续的上线、优化、迭代。一直有前辈在前面庇护，你永远都不会有实质性的成长，日积月累你就会开始进入一个“温水煮青蛙”的状态，先从环境变量的管理开始吧，加油。