如何在Remix的.mdx文件中访问.env环境变量？

Remix处理MDX依赖@remix-run/mdx包，下面是几种实用的实现方式，按推荐程度排序：

1. 通过自定义MDX Wrapper传递loader数据（推荐） #

这种方式既符合Remix的路由数据规范，又能优雅地给MDX传递环境变量：

步骤1：在路由loader中暴露环境变量 #

注意：只有前缀为REMIX_PUBLIC_的环境变量能安全暴露给客户端，不要传递敏感信息。

// app/routes/your-mdx-route.tsx
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { MdxWrapper } from "~/components/MdxWrapper";
import YourMdxContent from "./your-content.mdx";

export async function loader() {
  return json({
    publicApiUrl: process.env.REMIX_PUBLIC_API_URL,
    publicAppName: process.env.REMIX_PUBLIC_APP_NAME,
  });
}

export default function MdxRoute() {
  return (
    <MdxWrapper>
      <YourMdxContent />
    </MdxWrapper>
  );
}

步骤2：编写MDX Wrapper组件 #

通过MDXProvider把loader数据注入到MDX的全局组件上下文：

// app/components/MdxWrapper.tsx
import { useLoaderData } from "@remix-run/react";
import { MDXProvider } from "@mdx-js/react";

type LoaderData = {
  publicApiUrl: string;
  publicAppName: string;
};

export function MdxWrapper({ children }: { children: React.ReactNode }) {
  const envData = useLoaderData<LoaderData>();

  // 定义可在MDX中直接使用的组件
  const mdxComponents = {
    EnvVar: ({ key }: { key: keyof LoaderData }) => (
      <span>{envData[key]}</span>
    ),
    // 也可以封装带环境变量的业务组件
    ApiLink: ({ path }: { path: string }) => (
      <a href={`${envData.publicApiUrl}${path}`}>
        访问：{envData.publicApiUrl}{path}
      </a>
    ),
  };

  return <MDXProvider components={mdxComponents}>{children}</MDXProvider>;
}

步骤3：在MDX中使用 #

直接调用封装好的组件即可：

# 欢迎来到{<EnvVar key="publicAppName" />}

我们的API地址是：<EnvVar key="publicApiUrl" />

查看用户列表：<ApiLink path="/users" />

2. 在MDX中直接使用useLoaderData（快速方案） #

如果不需要封装组件，也可以直接在MDX中嵌入React表达式调用钩子：

import { useLoaderData } from "@remix-run/react";

# 快速获取环境变量

{() => {
  const data = useLoaderData();
  return (
    <div>
      <p>API地址：{data.publicApiUrl}</p>
      <p>应用名称：{data.publicAppName}</p>
    </div>
  );
}}

注意：这种写法需要确保MDX所在的路由有对应的loader返回数据。

3. 编译时注入环境变量（静态场景） #

如果环境变量是静态不变的，可以通过Babel插件在编译时直接替换变量值，适合纯静态MDX内容：

步骤1：安装依赖 #

npm install babel-plugin-transform-inline-environment-variables --save-dev

步骤2：配置Remix的MDX选项 #

在remix.config.js中添加Babel插件配置：

// remix.config.js
module.exports = {
  mdx: async () => {
    return {
      babelOptions: {
        plugins: [
          [
            "transform-inline-environment-variables",
            {
              // 指定要注入的环境变量
              include: ["REMIX_PUBLIC_API_URL", "REMIX_PUBLIC_APP_NAME"],
            },
          ],
        ],
      },
    };
  },
};

步骤3：在MDX中直接使用 #

# 静态注入的环境变量

API地址：{process.env.REMIX_PUBLIC_API_URL}
应用名称：{process.env.REMIX_PUBLIC_APP_NAME}

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