引言

前面章節(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文件的資料請關注腳本之家其它相關文章！

最新評論