5

I've been trying to get environment variables to work in my documentation build.
I've had some success with adding a dotenv-webpack plugin and substituting values that way. This has the downside of needing a .env file of some kind

I would like to have my build know of environment variables automatically ie. everything that is output from printenv

I've tried adding this to package.json: TEST_ENV_VAR=working docusaurus start" But when I log the process.env object there is nothing there.

How can I make this work?

4

2 回答 2

9

我创建了一个插件，将功能添加dotenv-webpack到 Docusaurus2 的 webpack 配置中。

https://www.npmjs.com/package/docusaurus2-dotenv

您应该能够npm install docusaurus2-dotenv、启用systemvar并将其添加到您的插件部分，并且您的systemvar值将可以访问，例如process.env.PATH。

这将允许您使用.env文件（如果您决定在将来使用它们），以及在 CI 期间创建或存在于构建代码的机器上的任何环境变量。

docusaurus.config.js

module.exports = {
  ..., // other docusaurus2 config
  plugins: [
    [
      "docusaurus2-dotenv",
      {
        systemvars: true,
      },
    ],
  ],
}
于 2020-05-08T20:25:38.480 回答
1

构建时环境变量

有两个步骤：

  • 跑npm i --save-dev dotenv
  • 在您的docusaurus.config.js中，只需添加：
require('dotenv').config()
  • 确认您的.env目录包含环境变量，例如
ENVIRONMENT_VARIABLE_1=hello_there

您的.env文件将被加载，您process.env.ENVIRONMENT_VARIABLE_1现在可以使用。

运行时环境变量：

process.env例如，要在 React 组件中使用变量，请执行上述内置环境变量步骤，然后使用customFieldsdocusaurus 配置对象的字段：

const config = {
  ...
  customFields: {
    'ENVIRONMENT_VARIABLE_1': process.env.ENVIRONMENT_VARIABLE_1,
    'ENVIRONMENT_VARIABLE_2': process.env.ENVIRONMENT_VARIABLE_2,
  },
  ...
}

在我的打字稿组件中，通过以下方式访问它们：

const {siteConfig} = useDocusaurusContext();

  return <div>{`${siteConfig.ENVIRONMENT_VARIABLE_1}`}</div>;

阅读docusaurus 文档中的自定义配置以获取更多信息。

评论

Jonny Nabors 的回答（和包装）对我来说是不必要的，实际上让我感到困惑。如果您希望您的构建过程使用您的环境变量，请使用本周已下载 2200 万次的极受欢迎的 npm 包（dotenv，而不是他的包（docusaurus2-dotenv），这对我不起作用。

如果您需要在运行时使用环境变量同时避免像我上面所做的那样将其添加到配置对象中，那么他的包可能更有用？不过，在那种情况下，我也找到了另一种解决方案，就是使用以 . 开头的环境变量REACT_APP_。

于 2021-12-14T23:32:49.357 回答