简介
@phenomic/helpers-transform 是一个由 Phenomic 团队维护的 npm 包，它能够帮助你在构建过程中，将 Markdown 和 HTML 文件转换成 React 组件，便于在项目中重用和渲染。
使用步骤
- 安装
在项目的根目录下，运行以下命令进行安装：
npm install --save @phenomic/helpers-transform
- 配置
在项目的配置文件中，添加以下代码，以告诉 Phenomic 如何使用 @phenomic/helpers-transform：
-- -------------------- ---- -------
-
---------- -
----------------------------------- -
-------------- - ------- --
--------------- - ------- --
----------- ----------------
---
------------------------------------- -
-------
---
------------------------------- -
---------- -
--------------------- ----
---------------- ----
---------------------------- -
----------- ------
--
-
--
--
--------- -
-------
-
-在上述代码中，我们使用了 @phenomic/plugin-renderer-react 和 @phenomic/plugin-transform-loader 两个插件，这些插件将会在下文中介绍。通过添加 @phenomic/helpers-transform 插件，并配合 Remark 插件商城中的其他插件，我们可以将项目中的 Markdown 文件自动转换为 React 组件。
- 编写 Markdown 文件
在项目中的任意目录下，编写 Markdown 文件，例如 /src/posts/hello-world.md：
# Hello, World! 这是我的第一篇博客，欢迎大家阅读！
请注意，这里的文件名及其所在的目录结构都是任意的，你可以结合自己的项目需求来自由选择。
- 渲染 Markdown 文件
在你的项目中，你可以通过上述配置文件中的插件，来渲染上述所创建的 Markdown 文件。具体路径是自己决定的，例如，在模板文件 /src/index.js 中，我们可以像如下代码那样调用这个 Markdown 文件：
import React from "react";
import ReactDOM from "react-dom";
import MarkdownComponent from "../posts/hello-world.md";
ReactDOM.render(
<MarkdownComponent />,
document.getElementById("root")
);编译后的代码将会在浏览器中渲染出 Markdown 文件内容。
插件介绍
除了我们在上面的配置文件中使用过的插件之外，还有许多插件可以结合使用，进一步扩展 @phenomic/helpers-transform 的功能。这里，我们介绍几个常用的插件：
1. remark-breaks
在 Markdown 文件中，通常需要通过两个以上的空格来实现换行。使用 remark-breaks 插件后，可以直接在文本后添加两个空格，即可实现同样的效果。
2. remark-rehype
remark-rehype 插件可以将 Markdown 文件转换成 HTML 格式，方便在一些不支持 Markdown 解析的环境中进行渲染。
3. remark-toc
remark-toc 插件可以生成 Markdown 文件的目录，方便阅读和导航。
结语
@phenomic/helpers-transform 可以轻松地将 Markdown 文件转换成 React 组件和 HTML 格式，为你的项目提供一种快捷有效的内容管理的方式。在使用时，可以相对灵活的选择不同的插件，满足不同需求的定制化需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672ec0520b171f02e1f02