我尝试过使用.env.development
和.env.production
文件添加环境变量到我的Gatsby项目中,并且效果很好。
我想在环境变量缺失时使构建失败,但是似乎找不到如何启用这个功能。
我已经阅读了Gatsby环境变量文档,但似乎看不出它如何工作?这是否可行?
我相信它在内部使用dotenv/webpack定义插件。
我尝试过使用.env.development
和.env.production
文件添加环境变量到我的Gatsby项目中,并且效果很好。
我想在环境变量缺失时使构建失败,但是似乎找不到如何启用这个功能。
我已经阅读了Gatsby环境变量文档,但似乎看不出它如何工作?这是否可行?
我相信它在内部使用dotenv/webpack定义插件。
我相信还有其他方法可以做到这一点,但经过一些快速的测试,这种方法对我来说似乎运作良好。
在你的 gatsby-config.js
文件中,你可以选择显式地引入 dotenv
,这样你就可以在配置中使用那些环境变量。
我添加了以下内容,现在只要指定的环境变量不存在,Gatsby 构建就会失败。
// Load the environment variables, per
// https://www.gatsbyjs.org/docs/environment-variables/#server-side-nodejs
require('dotenv').config({
path: `.env.${process.env.NODE_ENV}`,
})
function checkEnv(envName) {
if (typeof process.env[envName] === 'undefined' || process.env[envName] === '') {
throw `Missing required environment variables: ${envName}`
}
}
try {
checkEnv('NODE_ENV')
checkEnv('EXAMPLE_MISSING_ENV')
checkEnv('EXAMPLE_API_KEY')
} catch (e) {
throw new Error(e)
}
// The rest of the config file
const envVariablesList = [
"ENV1",
"ENV2",
"ENV3",
];
function envVarChecker(vars: string[]): string | undefined {
return vars.find(
(item) => process.env[item] === undefined || process.env[item] === ""
);
}
export const onPreInit: GatsbyNode["onPreInit"] = ({ actions }) => {
const emptyEnv = envVarChecker(envVariablesList);
if (emptyEnv !== undefined) {
throw new Error(`Env variable: ${emptyEnv} is empty!`);
}
};
如果任何一个声明的变量缺失,在构建过程的早期阶段(预引导阶段)就会失败。
build.sh
:source ./.env.development # this line will set env variables
if [ "$API_KEY" = 927349872349798 ] ; then
npm run build
fi
另一个问题出现了;一些开发人员可能希望在Windows上运行它。因此最好使用著名的cross-env包。
npm i cross-env
secure-build
:
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
"secure-build": "cross-env-shell \"./build.sh\""
},
运行它:
npm run secure-build