@ ecopages/ mdx (英语)
Ecopages第三方JSX运行时间(例如: @kitajs/html) (中文(简体) ). 对于React或Ecopages JSX MDX,取而代之的是自有的集成插件.
选择您的 MDX 路径
| 运行时间 | 插件 |
|---|---|
| 反应 | reactPlugin({ mdx: {} }) |
| 生态网页 | ecopagesJsxPlugin({ mdx: {} }) |
| 第三方 | mdxPlugin({ compilerOptions: { jsxImportSource: '...' } }) |
安装
bun add @ecopages/mdx @mdx-js/mdx @kitajs/html
@mdx-js/mdx 是同级依赖。 安装您设置的 JSX 运行时间 compilerOptions.jsxImportSource。 。 。 .
使用量
import { defineConfig } from '@ecopages/core/config';
import { mdxPlugin } from '@ecopages/mdx';
export default defineConfig({
integrations: [
mdxPlugin({
compilerOptions: {
jsxImportSource: '@kitajs/html',
},
}),
],
});
compilerOptions.jsxImportSource 实值 所需经费。 。 。 . react 财务报告和审定财务报表 @ecopages/jsx 被拒绝——使用 reactPlugin 或者说 ecopagesJsxPlugin 对于那些跑步时间.
MDX使用核心的共享路由渲染器. 它的页面模块正常化和页面浏览器Graph依赖性通过集成钩厂提供;编译器选项被MDX构建插件所消耗.
类型
import type { JsxImportSource, KnownJsxImportSource, StandaloneMdxCompilerOptions } from '@ecopages/mdx';
KnownJsxImportSource 实值 '@kitajs/html' | 'react' | '@ecopages/jsx'。 。 。 . JsxImportSource 还接受自定义运行时字符串.
何处 remarkPlugins, (中文(简体) ), rehypePlugins,以及 recmaPlugins 访问取决于插件 :
- 独立
mdxPlugin()带他们进去compilerOptions旁边jsxImportSource。它没有顶级插件列表. reactPlugin({ mdx })财务报告和审定财务报表ecopagesJsxPlugin({ mdx })把他们带到顶端mdx旁边compilerOptions,不要在内部接受compilerOptions。两者都使用共享MdxCompilerOptionsInput导出自@ecopages/mdx/core。 。 。 .
反应 MDX
不要单独使用 mdxPlugin() 用于反应应用程序 :
import { reactPlugin } from '@ecopages/react';
reactPlugin({
mdx: {},
});
提供 mdx 对象启用 MDX; 省略以禁用 MDX。 插件列表属于顶端 compilerOptions数字 :
import remarkGfm from 'remark-gfm';
reactPlugin({
mdx: {
compilerOptions: { format: 'mdx' },
remarkPlugins: [remarkGfm],
},
});
React MDX 加载器从文件过滤器中获取 mdx.extensions,替换 compilerOptions.mdxExtensions 而不是与它们合并。 声明自定义扩展名, 如 ['.react.mdx'] 仅指那些使用 React- plain 编译的文件 .mdx 在同一块中的文件保留在拥有其的整合中。 React所编译的 MDX 条目是 React 组件,必须通过 React 拥有的路由提供;参见 @ecopages/content-processor 内容输入所有权合同.
MDX中的依赖性发现
核心的MDX加载器插件在所有集成的MDX文件中自动发现顶级组件和样式表导入. projectRoot 需要并且来自应用程序配置( )rootDir如果缺少的话,装填器会扔出.
- 当地构成部分:当地最高级进口
eco.component()将声明添加到config.dependencies.components。 。 。 . - 样式表:相对和TSfig-异名的CSS进口(例如:.
import './post.css';或者说import '@/styles/post.css';)被从编译的JavaScript中剥去. 发现的路径在收集之前会保留在组件身份上;它们不会被复制到config.dependencies.stylesheets明确dependencies.stylesheets条目仍然对属性具有权威性,例如media。 。 。 . - 代码块和函数: 含有进口说明和功能内动态进口的Markdown编码块与高层无害环境管理申报区分开来,保持不变.
- 配置合成: 每个编译的 MDX 模块都与
bindComponentIdentity财务报告和审定财务报表attachDiscoveredDependencies如果export const config = { ... }已存在, 已发现组件与显性组件合并 。 独立渲染器保留了已存在的页面配置id财务报告和审定财务报表integration,将当前页面文件路径附后,并将导入的 MDX 版式传递到依赖性收藏中,其身份完整. - 原始地图数字 :
createMdxLoaderPlugin()以组件身份编辑编译器地图,并将结果返回到构建适配器。 设定includeSourceMap: false在其选项中省略地图.