umi插件开发仿dumi项目实现markdown文件转为页面

目录
  • 引言
  • 处理导入错误
  • loader返回渲染函数
  • 添加react处理loader
  • 用ts来写loader
    • 改变原来的loader
    • 创建新的loader
    • 配置webpack

引言

前面我们已经成功将.md文件通过import加载到react组件中，并能拿到文件内容进行展示。但是点击markdown的导航链接还是会报错：

这个报错和前面的报错有点相似，只是前面是无法解析链接，这里是无法解析对象。

处理导入错误

在react渲染页面时，是调用一个个渲染函数来渲染页面，我们来对比一下button页和markdown页加载页面的bundle对比一下

button页面导出的是一个Button函数，返回的是创建该页面的代码

markdown导出的是一个js对象

而报错提示我们markdown也应该导出为一个类或函数，否则无法识别，所以下一步，我们就需要将这个带有markdown正文的js对象转换为react渲染函数。

loader返回渲染函数

我们前面通过自定义loader，将markdown转为js对象导入，那么我们能不能将markdown对象转为react渲染函数，直接交给react渲染呢？我们直接将loader改成返回一个react函数组件

// /src/loaders/markdown/loader.js
function mdLoader(content) {
  return `
    import react from 'react'
    const content = ${JSON.stringify(content)};
    const Markdown = () => {
        return (<div>{content}</div>)
    }
    export default Markdown
  `
}
module.exports = mdLoader

重启后发现又报错了

添加react处理loader

上面的错误依然很熟悉，说无法解析返回的字符串，还告诉我们可能要添加其他loader来处理返回值。

umi默认配置的babel-loader可以用来处理react组件，我们将其添加到解析链中，注意babel的执行顺序是反的，所以要先写babel-loader再写md-loader：

  api.chainWebpack(async (memo) => {
    const babelInUmi = memo.module.rule('src').use('babel-loader').entries();
    const loaderPath = require.resolve('../loaders/markdown/loader.js');
    memo.module
        .rule('domi-md')
            .test(/\.md$/)
            .type('javascript/auto')
            // 用默认带的babel-loader来处理react组件
            .use('babel-loader')
            .loader(babelInUmi.loader)
            .options(babelInUmi.options)
            .end()
            .use('md-loader')
            .loader(loaderPath)
    return memo;
  });

完成配置后，markdown文件就会先经过md-loader转为react组件字符串，接着使用babel-loader转换为可执行渲染函数。

再次启动可以看到markdown文件内容已经能被渲染出来

用ts来写loader

前面说了我们目前只能用js来写loader，但是我们可以用一些小技巧，先绕过这个限制，使得不需要编译也能使用ts来写loader。让webpack还是加载原来的组件，但是原来的代码只做个代理，实际执行代码可以用ts来写：

改变原来的loader

// /src/loaders/markdown/loader.js
function mdLoader(content) {
  const options = this.getOptions({ 'handler': true })
  return options.handler.apply(this, [content])让
}
module.exports = mdLoader

创建新的loader

// /src/loaders/markdown/index.ts
export default function mdLoader(this: any, content: string) {
    return `
        import react from 'react'
        const content = ${JSON.stringify(content)};
        const Markdown = () => {
            return (<div>{content}</div>)
        }
        export default Markdown
    `
}

配置webpack

// /src/features/compile.ts
import MdLoader from '../loaders/markdown/index'
...
    .use('md-loader')
    .loader(loaderPath)
    .options({
        handler: MdLoader
    })
...

完整代码可查看feature/render-markdown

以上就是umi插件开发仿dumi项目实现markdown文件转为页面的详细内容，更多关于umi markdown文件转页面的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 一个HTML标签教你实现带动画的抖音LOGO效果

    一个HTML标签教你实现带动画的抖音LOGO效果

    目录 大家好，我是零一，今天给大家表演 仅用一个HTML标签实现带动画的抖音LOGO，涉及了很多知识点，欢迎交流讨论 先上结果，最终实现效果如下： 还原度应该还可以吧？ 抖音Logo结构 想要用CSS来画抖音的Logo，前提要先了解它的构造，一定是一些几何图形的拼接组合，因为之前很多业界大佬已经扒过抖音的Logo的结构了，我就拿来借用一下： 好的，有点复杂，简化一下，其实就是 4 个部分 每个颜色划出来的区域代表一个部分，所以最后是：1/4圆环 + 半圆 + 长条矩形 + 半径略大一些的1/4圆

  • glow工具在命令行读取Markdown好物分享

    glow工具在命令行读取Markdown好物分享

    目录 写在前面 准备工作 Glow的安装和使用 安装 使用 写在最后 写在前面 这篇文章推荐一个由Golang编写的一个命令行工具——Glow,这个CLI工具可以在命令行读取Markdown,Markdown对于码农来说也是非常重要的,几乎所有的文档全部都有Markdown的身影. 笔者热衷于使用命令行,感觉命令行使用起来非常舒爽,有的时候需要阅读Markdown,但是cat命令并没有加粗什么的,展示的Markdown阅读起来也不是很友好,这里推荐Glow来舒适的展示Markdown,效果图如下

  • unified如何处理markdown解析器详解

    unified如何处理markdown解析器详解

    目录 unified是什么 unified生态简介 工作原理 Parse Transform Stringify 牛刀小试 环境搭建 处理ESM类型包 最简用法 加载文档meta 一个实际使用例子: unified是什么 unified是用于文档处理的生态系统,核心包提供了文档处理的流程控制,具体功能由生态系统中各个插件提供.例如我们如果需要处理markdown,就需要使用markdown处理相关的插件.当然除了markdwon以外,还提供了处理HTML.JSX等的插件.其良好的扩展能力能让我们

  • 一文详解JavaScript 如何将 HTML 转成 Markdown

    一文详解JavaScript 如何将 HTML 转成 Markdown

    目录 npm script 参数配置 前言: 本篇带来:在 JavaScript 如何将 HTML 转成 Markdown?先收藏,总有一天要用到!! npm 我们主要是借助 Turndown这个库来实现的 npm 安装 npm i turndown es6 import 引入: import TurndownService from 'turndown' CommonJs require 引入: const TurndownService = require('turndown'); 接下来我

  • JavaScript+Node.js写一款markdown解析器

    目录 1. 准备工作 2. 处理图片&超链接 3. 处理blockquote 4. 处理标题 5. 处理字体 6. 处理代码块 7. 处理列表 8. 处理表格 9. 调用方法 1. 准备工作 首先编写getHtml函数,传入markdown文本字符串,这里使用fs读取markdown文件内容,返回值是转换过后的字符串. const fs = require('fs'); const source = fs.readFileSync('./test.md', 'utf-8'); const get

  • Vue3解析markdown并实现代码高亮显示的详细步骤

    Vue3解析markdown并实现代码高亮显示的详细步骤

    目录 具体实现步骤如下: 一.安装依赖库 二.在main.js文件中引入highlight.js及样式并创建一个自定义的全局指令 三.在Vue组件中应用marked解析及实现代码高亮 四.显示效果 Vue实现博客前端,需要实现markdown的解析,如果有代码则需要实现代码的高亮.Vue的markdown解析库有很多,如markdown-it.vue-markdown-loader.marked.vue-markdown等.这些库都大同小异.这里选用的是marked,代码高亮的库选用的是high

  • umi插件开发仿dumi项目实现markdown文件转为页面

    目录 引言 处理导入错误 loader返回渲染函数 添加react处理loader 用ts来写loader 改变原来的loader 创建新的loader 配置webpack 引言 前面我们已经成功将.md文件通过import加载到react组件中,并能拿到文件内容进行展示.但是点击markdown的导航链接还是会报错: 这个报错和前面的报错有点相似,只是前面是无法解析链接,这里是无法解析对象. 处理导入错误 在react渲染页面时,是调用一个个渲染函数来渲染页面,我们来对比一下button页和m

  • umi插件开发仿dumi项目加载markdown文件实现详解

    目录 引言 为什么不能直接展示markdown chainWebpack webpack loader 实现过程 新建插件 新建loader 新建测试文档 运行项目 解决文件加载类型错误 webpack ruletype 解决错误 引言 前面章节中我们已经顺利将tsx组件转换为页面展示,但是目前提供的功能和umi的约定式路由功能差不多,接下来我们将实现将markdown文件转换为页面展示. 为什么不能直接展示markdown 我们前面所使用的页面写法都是react组件式写法,umi通过webpa

  • umi插件开发仿dumi项目实现页面布局详解

    目录 实现思路 使用默认项目提供的layout文件 自定义主题 准备工作 主题插件功能 modifyAppData 插件代码 生成layout路由对象 使用同步伪代码来描述上面流程 运行检查 实现思路 上一章我们已经完成/docs目录下文件自动生路由功能,本章我们将在此基础上,实现自动生成页面导航的功能. 使用默认模板提供的layout展示路由切换 使用自定义主题插件 使用默认项目提供的layout文件 在我们创建默认umi项目后,会在/src/layouts下生成一个布局文件: 同时在上一章节

  • python 自动化将markdown文件转成html文件的方法

    一.背景 我们项目开发人员写的文档都是markdown文件.对于其它组的同学要进行阅读不是很方便.每次编辑完markdown文件,我都是用软件将md文件转成html文件.刚开始转的时候,还没啥,转得次数多了,就觉得不能继续这样下去了.作为一名开发人员,还是让机器去做这些琐碎的事情吧.故写了两个脚本将md文件转成html文件,并将其放置在web服务器下,方便其他人员阅读. 主要有两个脚本和一个定时任务: •一个python脚本,主要将md文件转成html文件: •一个shell脚本,主要用于管理逻

  • JavaWeb项目中dll文件动态加载方法解析（详细步骤）

    相信很多做Java的朋友都有过用Java调用JNI实现调用C或C++方法的经历,那么Java Web中又如何实现DLL/SO文件的动态加载方法呢.今天就给大家带来一篇JAVA Web项目中DLL/SO文件动态加载方法的文章. 在Java Web项目中,我们经常会用到通过JNI调用dll动态库文件来实现一些JAVA不能实现的功能,或者是一些第三方dll插件.通常的做法是将这些dll文件复制到 %JAVA_HOME%\jre\bin\ 文件夹或者 应用中间件(Tomcat|Weblogic)的bin

  • 利用java读取web项目中json文件为map集合方法示例

    前言 本文主要介绍了关于java读取web项目中json文件为map集合的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 实例介绍 假设当前项目web目录(/resource/test.json)下有一json文件如下: [ { "path": "content_111", "title": "文章1", "imgUrl": "../../../libs/img/ppt

  • 详解C 语言项目中.h文件和.c文件的关系

    详解C 语言项目中.h文件和.c文件的关系 在编译器只认识.c(.cpp))文件,而不知道.h是何物的年代,那时的人们写了很多的.c(.cpp)文件,渐渐地,人们发现在很多.c(.cpp)文件中的声明语句就是相同的,但他们却不得不一个字一个字地重复地将这些内容敲入每个.c(.cpp)文件.但更为恐怖的是,当其中一个声明有变更时,就需要检查所有的.c(.cpp)文件. 于是人们将重复的部分提取出来,放在一个新文件里,然后在需要的.c(.cpp)文件中敲入#include XXXX这样的语句.这样即

  • python导出chrome书签到markdown文件的实例代码

    python导出chrome书签到markdown文件,主要就是解析chrome的bookmarks文件,然后拼接成markdown格式的字符串,最后输出到文件即可.以下直接上代码,也可以在 py-chrome-bookmarks-markdown 中直接参见源码. from json import loads import argparse from platform import system from re import match from os import environ from

  • Spring 项目常用pom文件的依赖

    properties属性 <properties> <!--使用utf-8编码--> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <!--web--> <spring.version>4.3.14.RELEASE</spring.version> <!--数据库相关--> <mysql.version>6.0.

  • SpringBoot项目application.yml文件数据库配置密码加密的方法

    在Spring boot开发中,需要在application.yml文件里配置数据库的连接信息,或者在启动时传入数据库密码,如果不加密,传明文,数据库就直接暴露了,相当于"裸奔"了,因此需要进行加密处理才行. 使用@SpringBootApplication注解启动的项目,只需增加maven依赖 我们对信息加解密是使用这个jar包的: 编写加解密测试类: package cn.linjk.ehome; import org.jasypt.encryption.pbe.StandardP

随机推荐