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文件的資料請關注腳本之家其它相關文章!
- python使用html2text庫實現(xiàn)從HTML轉(zhuǎn)markdown的方法詳解
- python 自動化將markdown文件轉(zhuǎn)成html文件的方法
- Python?mistune庫靈活的Markdown解析器使用實例探索
- Python自動創(chuàng)建Markdown表格使用實例探究
- uniapp中解析markdown支持網(wǎng)頁和小程序?qū)崿F(xiàn)示例
- 微信小程序?qū)崿F(xiàn)動態(tài)渲染Markdown示例詳解
- 一款功能強大的markdown編輯器tui.editor使用示例詳解
- unified如何處理markdown解析器詳解
- python markdown轉(zhuǎn)html自定義實現(xiàn)工具解析
相關文章
Qiankun Sentry 監(jiān)控異常上報無法自動區(qū)分項目解決
這篇文章主要為大家介紹了Qiankun Sentry 監(jiān)控異常上報無法自動區(qū)分項目解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11JavaScript架構localStorage特殊場景下二次封裝操作
這篇文章主要為大家介紹了JavaScript架構localStorage在特殊場景下的二次封裝操作,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-06-06