如何在npm script脚本中使用.env文件内定义的环境变量

以下为三种常用实现方案，可按需选择： #

方案一：跨平台通用方案（推荐，无需手动加载环境变量） #

使用dotenv-cli工具直接读取.env文件注入到脚本执行环境，兼容所有操作系统：

• 第一步先安装开发依赖：
  npm install dotenv-cli --save-dev
• 第二步修改package.json中的scripts配置：

"scripts": {
  "shopify-login": "dotenv -- shopify login --store=$SHOPIFY_STORE_URL",
}

配置完成后直接执行npm run shopify-login即可自动替换为你需要的目标命令。 #

方案二：无额外依赖的Mac/Linux方案 #

不需要安装第三方包，手动在执行前加载.env文件即可：

• 修改package.json中的scripts配置：

"scripts": {
  "shopify-login": "shopify login --store=$SHOPIFY_STORE_URL",
}

• 执行命令时先加载.env文件：
  source .env && npm run shopify-login

方案三：无额外依赖的Windows方案 #

根据你使用的终端类型调整：

• 若使用CMD终端：
  1. 修改scripts配置：

  "scripts": {
    "shopify-login": "shopify login --store=%SHOPIFY_STORE_URL%",
  }
  

  2. 执行前先加载变量：set .env && npm run shopify-login
• 若使用PowerShell终端：
  1. scripts配置和Mac/Linux一致，使用$SHOPIFY_STORE_URL即可
  2. 执行前运行命令加载变量：Get-Content .env | ForEach-Object { $name, $value = $_.split('='); Set-Item env:\$name $value }，之后再执行npm run shopify-login即可。

注意：所有方案都需要保证你的.env文件存放在项目根目录，和package.json文件处于同一层级，否则需要额外指定.env文件的读取路径。

内容的提问来源于stack exchange，提问作者Cenasa