自动进口

MDX 中自动导入组件的注释插件 .

使用量

此插件搜索组件文件目录, 然后在您的 MDX 构建过程中自动生成默认导入 . 这意味着您的内容编辑器可以自由并移除MDX中的组件,而不必担心不断更新进口.

要使用此插件, 请把它提供给您的 MDX 引擎 remarkPlugins 矩阵,并提供选项对象包含要搜索的目录列表和要导入的文件的 glob 模式.

选项

type Options = {
  directories: Array<string>;
  patterns: Array<string>;
  name?: (path: string): string;

  additionals: Array<{
    importPath: string;
    defaultImport: string;
    namedImports: Array<{ name: string; alias?: string }>;
  }>;
};

directories: 要搜索要导入的文件的目录名称序列.

patterns: 数组 快速块 要导入文件的样式.

name: 一个可选函数,它取出要导入的文件的绝对路径并返回该文件默认导入的标识符。 默认使用文件名, 例如 /path/to/Component.jsx 导入为 Component,生成的导入将 import Component from "/path/to/Component.jsx"。 。 。 .

additional: 指定额外固定导入的一组对象:

• importPath: 要导入的文件的路径 。 这将被插入为- is, 因此建议使用软件包名称或绝对路径 .

• defaultImport: 用于默认导入的标识符.

• namedImports: 指定命名导入对象的一组:

  • name: 要导入的项目的标识符
  • alias: 一个可选的标识符,用于别名导入到 as。 。 。 .

所以,一个额外的导入与结构 { importPath: "package", defaultImport: "default", namedImports: [{name: "named", alias: 'alias'}]} 将输入为 import default, {named as alias} from "package"。 。 。 .

这也可以用于仅具有副作用的导入,如CSS文件,不指定任何默认或已命名的导入,即: { importPath: "/path/to/styles.css" }。 。 。 .

配置示例

天体

//astro.config.mjs

import { defineConfig } from "astro/config";

import mdx from "@astrojs/mdx";
import remarkAutoImport from "@cloudcannon/remark-auto-import";

// https://astro.build/config
export default defineConfig({
  integrations: [mdx()],
  markdown: {
    remarkPlugins: [
      [
        remarkAutoImport,
        {
          directories: ["src/components"],
          patterns: ["*.*"],
        },
      ],
    ],
    extendDefaultPlugins: true,
  },
});

下一个.js

//next.config.mjs

import remarkFrontmatter from "remark-frontmatter";
import remarkAutoImport from "@cloudcannon/remark-auto-import";
import nextMDX from "@next/mdx";

const withMDX = nextMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [
      remarkFrontmatter,
      [
        remarkAutoImport,
        {
          directories: ["components"],
          patterns: ["*.js"],
        },
      ],
    ],
  },
});

const nextConfig = {
  // Configure pageExtensions to include md and mdx
  pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
  // Optionally, add any other Next.js config below
  reactStrictMode: true,
  images: { unoptimized: true },
};

export default withMDX(nextConfig);