欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

umi插件開(kāi)發(fā)仿dumi項(xiàng)目實(shí)現(xiàn)markdown文件轉(zhuǎn)為頁(yè)面

 更新時(shí)間:2023年01月28日 09:25:28   作者:kukiiu  
這篇文章主要介紹了umi插件開(kāi)發(fā)仿dumi項(xiàng)目實(shí)現(xiàn)markdown文件轉(zhuǎn)為頁(yè)面方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

引言

前面我們已經(jīng)成功將.md文件通過(guò)import加載到react組件中,并能拿到文件內(nèi)容進(jìn)行展示。但是點(diǎn)擊markdown的導(dǎo)航鏈接還是會(huì)報(bào)錯(cuò):

這個(gè)報(bào)錯(cuò)和前面的報(bào)錯(cuò)有點(diǎn)相似,只是前面是無(wú)法解析鏈接,這里是無(wú)法解析對(duì)象。

處理導(dǎo)入錯(cuò)誤

react渲染頁(yè)面時(shí),是調(diào)用一個(gè)個(gè)渲染函數(shù)來(lái)渲染頁(yè)面,我們來(lái)對(duì)比一下button頁(yè)和markdown頁(yè)加載頁(yè)面的bundle對(duì)比一下

button頁(yè)面導(dǎo)出的是一個(gè)Button函數(shù),返回的是創(chuàng)建該頁(yè)面的代碼

markdown導(dǎo)出的是一個(gè)js對(duì)象

而報(bào)錯(cuò)提示我們markdown也應(yīng)該導(dǎo)出為一個(gè)類或函數(shù),否則無(wú)法識(shí)別,所以下一步,我們就需要將這個(gè)帶有markdown正文的js對(duì)象轉(zhuǎn)換為react渲染函數(shù)。

loader返回渲染函數(shù)

我們前面通過(guò)自定義loader,將markdown轉(zhuǎn)為js對(duì)象導(dǎo)入,那么我們能不能將markdown對(duì)象轉(zhuǎn)為react渲染函數(shù),直接交給react渲染呢?我們直接將loader改成返回一個(gè)react函數(shù)組件

// /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

重啟后發(fā)現(xiàn)又報(bào)錯(cuò)了

添加react處理loader

上面的錯(cuò)誤依然很熟悉,說(shuō)無(wú)法解析返回的字符串,還告訴我們可能要添加其他loader來(lái)處理返回值。

umi默認(rèn)配置的babel-loader可以用來(lái)處理react組件,我們將其添加到解析鏈中,注意babel的執(zhí)行順序是反的,所以要先寫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')
            // 用默認(rèn)帶的babel-loader來(lái)處理react組件
            .use('babel-loader')
            .loader(babelInUmi.loader)
            .options(babelInUmi.options)
            .end()
            .use('md-loader')
            .loader(loaderPath)
    return memo;
  });

完成配置后,markdown文件就會(huì)先經(jīng)過(guò)md-loader轉(zhuǎn)為react組件字符串,接著使用babel-loader轉(zhuǎn)換為可執(zhí)行渲染函數(shù)。

再次啟動(dòng)可以看到markdown文件內(nèi)容已經(jīng)能被渲染出來(lái)

用ts來(lái)寫loader

前面說(shuō)了我們目前只能用js來(lái)寫loader,但是我們可以用一些小技巧,先繞過(guò)這個(gè)限制,使得不需要編譯也能使用ts來(lái)寫loader。讓webpack還是加載原來(lái)的組件,但是原來(lái)的代碼只做個(gè)代理,實(shí)際執(zhí)行代碼可以用ts來(lái)寫:

改變?cè)瓉?lái)的loader

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

創(chuàng)建新的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插件開(kāi)發(fā)仿dumi項(xiàng)目實(shí)現(xiàn)markdown文件轉(zhuǎn)為頁(yè)面的詳細(xì)內(nèi)容,更多關(guān)于umi markdown文件轉(zhuǎn)頁(yè)面的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • 詳解如何發(fā)布TypeScript編寫的npm包

    詳解如何發(fā)布TypeScript編寫的npm包

    這篇文章主要介紹了如何發(fā)布TypeScript編寫的npm包實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-12-12
  • Javascript調(diào)用XML制作連動(dòng)下拉列表框

    Javascript調(diào)用XML制作連動(dòng)下拉列表框

    Javascript調(diào)用XML制作連動(dòng)下拉列表框...
    2006-06-06
  • 微信小程序 Nginx環(huán)境配置詳細(xì)介紹

    微信小程序 Nginx環(huán)境配置詳細(xì)介紹

    這篇文章主要介紹了微信小程序 Nginx環(huán)境配置詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下
    2017-02-02
  • JavaScript原型Prototype詳情

    JavaScript原型Prototype詳情

    這篇文章主要介紹了JavaScript原型Prototype,在JavaScript中,函數(shù)是一個(gè)包含屬性和方法的Function類型的對(duì)象。而原型(Prototype?)就是Function類型對(duì)象的一個(gè)屬性。具體內(nèi)容需要的朋友可以參考下面文章的介紹
    2021-12-12
  • JavaScript 對(duì)象詳細(xì)整理總結(jié)

    JavaScript 對(duì)象詳細(xì)整理總結(jié)

    這篇文章主要介紹了JavaScript 對(duì)象詳細(xì)整理總結(jié)的相關(guān)資料,需要的朋友可以參考下
    2016-09-09
  • JavaScript數(shù)組去重方案

    JavaScript數(shù)組去重方案

    這篇文章主要介紹了JS數(shù)組方案,先總結(jié)一下我們數(shù)組的方法:pop、push、shift、unshift、slice、splice、sort、reverse、concat、join、indexOf、lastIndexOf、map、forEach,下面文章將詳細(xì)對(duì)他們做個(gè)詳細(xì)介紹,需要的朋友可以參考一下
    2021-09-09
  • 微信小程序 判斷手機(jī)號(hào)的實(shí)現(xiàn)代碼

    微信小程序 判斷手機(jī)號(hào)的實(shí)現(xiàn)代碼

    這篇文章主要介紹了微信小程序 判斷手機(jī)號(hào)的實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下
    2017-04-04
  • 前端工程化cjs?umd?esm?打包差異詳解

    前端工程化cjs?umd?esm?打包差異詳解

    這篇文章主要為大家介紹了前端工程化cjs?umd?esm?打包差異詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • 本地存儲(chǔ)localStorage設(shè)置過(guò)期時(shí)間示例詳解

    本地存儲(chǔ)localStorage設(shè)置過(guò)期時(shí)間示例詳解

    這篇文章主要為大家介紹了本地存儲(chǔ)localStorage設(shè)置過(guò)期時(shí)間示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-01-01
  • 為什么我們要做三份 Webpack 配置文件

    為什么我們要做三份 Webpack 配置文件

    前端從開(kāi)發(fā)到部署前都離不開(kāi) Webpack 的參與,本文結(jié)合了我們自己在開(kāi)發(fā)中碰到的種種問(wèn)題解決方案,同時(shí)借鑒了很多開(kāi)源項(xiàng)目的配置來(lái)介紹一種用 3 個(gè) JS 文件來(lái)配置 Webpack 的方法。
    2017-09-09

最新評(píng)論