如何将环境变量传递给 Docusaurus v2

How to pass env var to Docusaurus v2

我一直在尝试让环境变量在我的文档构建中起作用。
我在添加 dotenv-webpack 插件并以这种方式替换值方面取得了一些成功。 缺点是需要 .env 某种文件

我想让我的构建自动知道环境变量，即。 printenv

输出的所有内容

我试过将此添加到 package.json： TEST_ENV_VAR=working docusaurus start" 但是当我记录 process.env 对象时，那里什么也没有。

我怎样才能使这个工作？

我创建了一个插件，将 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,
      },
    ],
  ],
}

构建时环境变量

有两个步骤：

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

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

运行时间环境变量：

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

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>;

阅读 Custom Configurations 文档中的更多信息。

评论

(and package) was unnecessary for me and actually confused me. If you want your build process to use your environment variables, use the extremely popular npm package that has been downloaded 22 million times this week (dotenv, rather than his package (docusaurus2-dotenv)，这对我不起作用。

如果您需要在运行时使用环境变量同时避免像我上面那样将其添加到配置对象，也许他的包更有用？不过，既然如此，我也找到了另一种解决方案，就是使用以REACT_APP_.

开头的环境变量

我的问题是为什么我们不能使用process.env.VARIABLE？

了解如何 Docusaurus.useDocusaurusContext works，开发人员可以使用 import siteConfig from '@generated/docusaurus.config'; 读取配置变量。所以解决方案看起来像：

docusaurus.config.js

const config = {
  customFields: {
    // application environment (i.e. staging or prod)
    env: process.env.REACT_APP_ENV,
  },
  ...
}

myUtil.ts

import siteConfig from '@generated/docusaurus.config';

if (siteConfig.customFields.ENV === 'prod') {
 // do something for prod
}

然后，使用

重新启动服务器 
export REACT_APP_ENV="prod"
yarn start

直接将 docusaurus.config.js 导入应用程序会导致错误 process is not defined。这需要一个webpack配置，我不想进入。

注意：此方法未记录，请谨慎使用。