npm 包 @everydayhero/react-markdown-loader 使用教程

前言

在前端开发中，我们经常需要使用 Markdown 语法来编写文档或者发布博客等。而在 Web 应用中，如果想要将 Markdown 转换成 HTML，我们可以使用一个强大的工具 —— @everydayhero/react-markdown-loader。

@everydayhero/react-markdown-loader 是一个 Webpack 的 loader，它可以将 Markdown 文件转换成 React 组件或者静态 HTML。在使用它之前，我们需要先配置好 Webpack。

安装

使用 npm 安装 @everydayhero/react-markdown-loader：

npm install @everydayhero/react-markdown-loader --save-dev

配置 Webpack

在 Webpack 的配置文件中添加以下内容：

-- -------------------- ---- -------
------- -
  ------ -
    -
      ----- --------
      ---- -
        -
          ------- ---------------
          -------- -
            -------- --------------------- ----------------------
          -
        --
        -
          ------- --------------------------------------
          -------- -
            -- --------- --
          -
        -
      -
    -
  -
-

这段代码的含义是：当 Webpack 碰到扩展名为 .md 的文件时，使用 babel-loader 和 @everydayhero/react-markdown-loader 对其进行处理。

配置项

@everydayhero/react-markdown-loader 支持以下的配置项：

• components：一个对象，指定自定义组件。键名为组件名，键值为组件本身。

示例：

{
  components: {
    /* 定义一个自定义组件 */
    CustomComponent: function CustomComponent() {
      return <div>通过配置项自定义的组件</div>;
    },
  },
},

• markedOptions：一个对象，指定 Marked 的选项。

示例：

-- -------------------- ---- -------
-
  -------------- -
    --------- ------
    ---- -----
    ------- ------
    --------- ------
    ----------- -----
    ------------ ------
  --
--

使用

以 React.js 为例：

import React from 'react';
import markdown from './example.md';

export default class App extends React.Component {
  render() {
    return <div dangerouslySetInnerHTML={{__html: markdown}} />;
  }
}

在以上代码中，我们将 example.md 做为一个组件引入，并使用 dangerouslySetInnerHTML 属性将 Markdown 转换后的 HTML 代码插入到页面中。

简化 using

@everydayhero/react-markdown-loader 还支持在配置文件中简化使用，可以通过以下代码实现整个过程的简化：

-- -------------------- ---- -------
-------------- - -
  ---
   - ----
   --
  -------- -
    ----------- ------- ------------- -- --- --- -- --------- ---------- ------
  --
  ------- -
    ---
     - -- ------ --
     --
    ------ -
      -
        -- ---- ---- - ---------------- --
        ----- ---------
        -- --- ------ ------ --
        ---- --------------------------------------
      --
    --
  --
--

这样，我们就可以直接在组件中使用 import 导入 Markdown 文件了：

import React from 'react';
import markdown from './example.md';

export default function App() {
  return <div dangerouslySetInnerHTML={{__html: markdown}} />;
}

结语

@everydayhero/react-markdown-loader 是一个非常好用且方便的工具，可以轻松将 Markdown 文件转换成 React 组件或者静态 HTML。使用它可以提高项目开发效率，同时也让我们的博客和文档更易于维护，是我们前端开发者不可或缺的一件利器。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/83652