在前端开发中，我们经常需要使用不同的开发环境，比如开发环境、测试环境、生产环境等。而每次在切换环境时手动修改代码是非常繁琐且容易出错的。为了解决这个问题，我们可以使用 npm 包 script-env。
script-env 简介
script-env 是一个基于 Node.js 的 npm 包，用于将脚本中需要根据不同环境进行变更的配置项打包到一个单独的环境变量文件中。其实现原理是将环境变量文件的内容读入内存中，根据环境变量的值来选择相应的配置项，然后在运行脚本时将其注入到全局变量中。
安装
在初始化项目时我们需要安装 script-env：
npm i -D script-env
使用
配置环境变量文件
首先我们需要在项目根目录下新建一个 .env 文件，然后在其中设置需要根据不同环境变更的配置项，示例如下：
# .env 文件 API_BASE_URL=http://localhost:3000/api
配置启动命令
然后我们需要在项目的 package.json 文件中配置启动命令，示例如下：
{
"scripts": {
"start": "script-env node src/index.js"
}
}其中 src/index.js 是我们的入口文件，start 是我们的启动命令。
运行脚本
最后，我们可以使用以下命令启动项目：
npm run start -- --env=production
其中 --env=production 用于设置环境变量，可以是开发环境 development、测试环境 test 或者生产环境 production。
如果不设置环境变量，则 script-env 会默认读取 .env 文件中的配置项，并在全局变量中注入名为 process.env 的对象，我们可以在代码中通过 process.env.API_BASE_URL 来获取配置项的值。
如果设置了环境变量，则 script-env 会优先读取同名的环境变量文件（比如 .env.production），如果不存在则读取 .env 文件中的配置项，并在全局变量中注入名为 process.env 的对象。
拓展
除了基本的使用方法，script-env 还提供了一些拓展功能：
支持多个环境变量文件
如果项目中存在多个环境变量文件（比如 .env.development、.env.test 和 .env.production），我们可以使用以下命令启动项目：
npm run start -- --env=production --env-file=.env.production --env-file=.env
其中 --env-file 用于指定环境变量文件的路径，可以指定多个，script-env 会按照指定的顺序读取文件，并覆盖相同的配置项（后面的文件会覆盖前面的文件）。
支持自定义环境变量名
默认情况下，script-env 会将读取到的配置项注入到全局变量中的名字为 process.env 的对象，如果我们想要自定义其名字，可以使用以下命令启动项目：
npm run start -- --env=production --env-file=.env.production --env-file=.env --env-name=myEnv
其中 --env-name 用于指定注入到全局变量中的名字，可以是任意的字符串。
总结
script-env 是一个非常方便的 npm 包，可以帮助我们简化项目开发中对环境变量的管理，并且提供了一些拓展功能，可以满足不同的需求。我们可以根据自己的实际情况来选择是否使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005517781e8991b448cec3a