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

umi插件開發(fā)仿dumi項目加載markdown文件實現(xiàn)詳解

 更新時間:2023年01月28日 09:37:54   作者:kukiiu  
這篇文章主要為大家介紹了umi插件開發(fā)仿dumi項目加載markdown文件實現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

引言

前面章節(jié)中我們已經(jīng)順利將tsx組件轉(zhuǎn)換為頁面展示,但是目前提供的功能和umi的約定式路由功能差不多,接下來我們將實現(xiàn)將markdown文件轉(zhuǎn)換為頁面展示。

為什么不能直接展示markdown

我們前面所使用的頁面寫法都是react組件式寫法,umi通過webpack將react組件打包,這是react項目通用的模式。由于webpack不認識markdown文件,所以我們直接引入markdown文件會報錯。所以我們只需要讓webpack認識markdown,通過自定義loader來加載markdown文件即可。

chainWebpack

umi提供chainWebpack插件api,通過 webpack-chain 的方式修改 webpack 配置。

webpack loader

loader是用于webpack解析文件的工具,不同的loader可以解析不同類型的文件,使其解析的內(nèi)容可被其他模塊使用。

我們需要解析markdown文件,那么就需要寫一個能認識markdown文件的loader,它的功能就是識別.md文件并將文件內(nèi)容解析成對象返回給import這個文件的代碼使用。

實現(xiàn)過程

新建插件

跟前面一樣,我們新建一個插件來處理文件解析:

// /src/features/compile.ts
import type { IApi } from 'umi';
export default (api: IApi) => {
  api.describe({ key: 'domi:compile' });
  api.chainWebpack(async (memo) => {
    const loaderPath = require.resolve('../loaders/markdown/loader.js');
    memo.module
      // 通過鏈式處理,向`webpack`添加了一條名為`domi-md`的處理規(guī)則
      .rule('domi-md')
        // 該規(guī)則用于處理`.md`文件
        .test(/\.md$/)
        // 給這個loader取個名字
        .use('md-loader')
        // loader的路徑
        .loader(loaderPath)
    return memo;
  });
};

新建loader

接下來創(chuàng)建loader文件,注意這里loader要使用js文件,因為webpack無法直接解析ts類型的loader,第一個入?yún)⑹俏募?nèi)容的字符串形式,我們先直接返回。

// /src/loaders/markdown/loader.js
function mdLoader(context) {
    return context
}  
module.exports = mdLoader

為什么`dumi`的loader是用`ts`寫的?

因為在`dumi`開發(fā)環(huán)境下,先將`ts`文件轉(zhuǎn)成了`js`,`webpack`在運行時其實還是加載的`js`形式的loader。

dumi: 編譯 => 啟動umi(webpack) => 開發(fā)環(huán)境

domi: 啟動umi(webpack) => 開發(fā)環(huán)境 

新建測試文檔

// /docs/markdown.md
# 我是markdown

運行項目

啟動項目可以看到markdown文件已經(jīng)正確解析到導航欄中了

點開鏈接一看,啥也沒有,報錯了

解決文件加載類型錯誤

看上面的報錯信息,意思好像是懶加載的組件元素類型錯誤,打開請求列表看看加載了什么東西

應該就是這里在加載markdown文件時,只導出了個url鏈接,我們打開鏈接看看

這里就返回了markdown內(nèi)容,看來目前不能直接從頁面打開。

我們換一種方式,在jsx中直接導入這個文件看看:

// /docs/index.tsx
import react from 'react'
import md from './markdown.md'
const Home = () => {
    return (<div>hello domi! {md}</div>)
}
export default Home

刷新頁面可以看到,import進來的對象確實只是一個地址,那我們直接放個iframe來顯示:

// /docs/index.tsx
import react from 'react'
import md from './markdown.md'
const Home = () => {
    return (<>
        <div>hello domi!</div>
        <iframe src={md} />
    </>)
}
export default Home

哈哈終于顯示出來了

webpack ruletype

當然上面并不是我們想要的效果,從前面的嘗試大概能判斷出來是webpack在打包時并沒有想我們想象那樣能直接導出我們想要的對象。這時候我們就要使用webpack一個配置ruletype,告訴他我們想要將markdown文件import成一個包含正文內(nèi)容的對象,而不是一個資源地址。

這里webpack將文件視為Resource資源,其將所有 .md 文件都發(fā)送到輸出目錄,并且其路徑將被注入到 bundle中,與我們常使用的在jsx中導入圖片等一樣,具體可參考資源模塊 | webpack 中文文檔 (docschina.org)

要改變這一默認行為,只需要配置時改變資源類型即可

// /src/features/compile.js
api.chainWebpack(async (memo) => {
    const loaderPath = require.resolve('../loaders/markdown/loader.js');
    memo.module
        .rule('domi-md')
            .test(/\.md$/)
            // 表示文件經(jīng)過這個loader處理后轉(zhuǎn)換為可導入的js模塊
            .type('javascript/auto')
            .use('md-loader')
            .loader(loaderPath)
    return memo;
});

重啟后運行,發(fā)現(xiàn)又報了另一個錯誤

解決錯誤

從報錯上看,意思大概是.md文件在經(jīng)過loader解析后,解析返回值失敗,還告訴我們可能需要其他loader來處理返回值。

這個就比較好理解了,因為上面我們指定了經(jīng)過loader處理后應該返回一個可導出的js模塊,而我們目前l(fā)oader只返回了markdown的正文內(nèi)容,并不是js數(shù)據(jù),所以我們只需要改動以下loader的返回值即可:

// /src/loaders/markdown/loader.js
function mdLoader(content) {
  return `
      const content = '${JSON.stringify(content)}'
      export default { content };
  `
}
module.exports = mdLoader

此時經(jīng)過loader處理后,將會導出一個帶有content屬性的對象,再改變一下導入展示的組件:

import react from 'react'
import md from './markdown.md'
const Home = () => {
    return (<div>hello domi! {md.content}</div>)
}
export default Home

重啟后可以看到如下所示,此時我們已經(jīng)成功通過loader加載到markdown文件顯示

以上就是umi插件開發(fā)仿dumi項目加載markdown文件實現(xiàn)詳解的詳細內(nèi)容,更多關于umi插件加載markdown文件的資料請關注腳本之家其它相關文章!

相關文章

最新評論