原文地址：http://hiihl.com/articles/2018/1/6/setupblog2.md
使用react + koa2 + Markdown + webpack + typescript 從零手?jǐn)]個人博客，本篇介紹如何實現(xiàn)webpack-loader之a(chǎn)rticles-loader，其中涉及到Ramda.js的使用，帶你了解函數(shù)式編程；同時，了解此部份內(nèi)容以后，博主后續(xù)將帶你了解ant.design如何將markdown文件轉(zhuǎn)化為在線組件demo文檔。
目錄結(jié)構(gòu)
lib 編譯后的代碼
src
transforms 解析器，目前只有一個markdown.js，未來可能會有擴展
markdown.js 最終解析markdown文件的代碼
utils 工具集
executor.js 子線程執(zhí)行解析markdown的執(zhí)行器
runTask.js 調(diào)試時使用，單線程執(zhí)行解析
scheduler.js 多線程解析markdown的調(diào)度器
source-handler.js 構(gòu)建文件樹的handler
index.js 入口文件
首先要知道，一個webpack loader需要輸出什么；
從上圖紅框部份可以看到，loader最終調(diào)用了callback方法，并返回了一段module.exports的字符串；
此處export出去的module就是最終項目中import某個module所得到的對象，如上一篇文章中的import articles from '../articles.DOCS'，
如何實現(xiàn)一個webpack loader，更詳細(xì)的請參考writing a loader。
實現(xiàn)分析
index.js
const fs = require('fs');
const path = require('path');
const R = require('ramda');
const sourceHandler = require('./utils/source-handler');
const scheduler = require('./utils/scheduler');
const defaultRoot = path.resolve(process.cwd(), 'articles');
const concat = obj => key => value => obj[key] = R.sortBy(
R.compose((date) => new Date(date).getTime(), R.prop('date'))
)(R.union(obj[key], [value])).reverse();
/* 中間省略，完整代碼請移步https://github/hihl/blog */
const markdown = sourceHandler.traverse(root, filePath => {
const content = fs.readFileSync(filePath).toString();
pickedPromises.push(new Promise(resolve => {
scheduler.queue({
filePath,
content,
callback(err, result) {
const parsedMarkdown = JSON.parse(result);
const category = parsedMarkdown.meta.category;
const fileKey = '/' + filePath.split('/').slice(-4).join('/');
const date = filePath.split('/').slice(-4, -1).join('-');
const { title, summary } = parsedMarkdown.meta;
mds[fileKey] = {
key: fileKey,
title,
summary,
content: parsedMarkdown.content,
category,
tags: parsedMarkdown.meta.tags,
date
};
const value = { key: fileKey, title, summary, date};
concat(categories)(category)(value);
R.forEach(key => concat(tags)(key)(value), parsedMarkdown.meta.tags);
resolve();
}
});
}));
});
看上述代碼，sourceHandler.traverse將會解析root目錄下的文件，
并將有效的filePath傳到回調(diào)方法，
而回調(diào)方法中將讀取文件內(nèi)容，并轉(zhuǎn)為task添加到調(diào)度器中，
調(diào)度器執(zhí)行完該任務(wù)后，將result傳到回調(diào)方法callback中，
callback中做最后的組裝，拼裝需要導(dǎo)出module所需的數(shù)據(jù)，包括所有按日期排序的類別、標(biāo)簽及文章
解析文件樹
source-handler.js
function readDirs(filter, dir) {
return R.filter(filter)(fs.readdirSync(dir));
}
/**
* 構(gòu)建文件樹，并解析md文件
* 目錄結(jié)構(gòu)為
* root
* |-- year 年份
* |-- month 月份
* |-- day 日期
* |-- filename 文件名(全路徑)
*/
function readFilesTreeStructure(root, fn) {
return R.pipe(
R.map(year => R.pipe(
R.pipe(
R.map(month => R.pipe(
R.pipe(
R.map(day => R.pipe(
R.map(filename => {
const filePath = path.join(root, year, month, day, filename);
fn(filePath);
return filePath;
}),
R.objOf(day)
)(readDirs(R.endsWith('.md'), path.join(root, year, month, day)))),
R.reduce(R.mergeDeepLeft, {})
),
R.objOf(month)
)(readDirs(R.and(R.lte(1), R.gte(maxDay(year, month))), path.join(root, year, month)))),
R.reduce(R.mergeDeepLeft, {})
),
R.objOf(year)
)(readDirs(R.and(R.lte(1), R.gte(12)), path.join(root, year)))),
R.reduce(R.mergeDeepLeft, {})
)(readDirs(R.lt(0), root));
}
exports.traverse = function(root, fn) {
if (!root || !isDirectory(root)) {
return {};
}
return readFilesTreeStructure(root, fn);
};
看上述代碼，readFilesTreeStructure的作用是，從根目錄root開始，解析出json結(jié)構(gòu)的文件樹，并把每個解析到的合法的文件路徑傳給回調(diào)方法fn，
期間還過濾了非法的年月日目錄及非法文件后綴。
下來詳細(xì)講解下上述代碼，再次之前，請大家先了解下Ramda:
1、首先看最外層的pipe，先是readDirs(R.lt(0), root)讀取錯root目錄下，目錄名是數(shù)字且大于0(R.lt(0))的子目錄[years]
2、再對讀出來的子目錄做一次map、reduce，reduce操作是將map出來的數(shù)組合并成一個Object，即{}，接下來再看map操作得出的是怎樣的數(shù)組
3、map中再次做了類似1、2的步驟，先是readDirs，只不過讀取的目錄變成path.join(root, year)，過濾條件變成了R.and(R.lte(1), R.gte(12))
4、下來是對步驟3中讀取的目錄做一次map、reduce，通過R.objOf(year)把reduce后得到的對象解析為{ [year]: reduce的結(jié)果 }的結(jié)構(gòu)，
5、重復(fù)以上步驟，最終解析出來的結(jié)構(gòu)就是{[year]:{[month]:{[day]:filename}}}
下面貼一段不使用Ramda的代碼作為對比，區(qū)別大家自行感受。
function readDirs(filter, dir) {
return fs.readdirSync(dir).filter(filter);
}
function readFilesTreeStructure(root, fn) {
return readDirs(o => o > 0, root)
.map(year => {
const months = readDirs(o => o >=1 && o <= 12, path.join(root, year))
.map(month => {
const days = readDirs(o => o >=1 && o <= maxDay(year, month), path.join(root, year, month))
.map(day => {
return readDirs(o => o.endsWith('.md'), path.join(root, year, month, day))
.map(filename => {
const filePath = path.join(root, year, month, day, filename);
fn(filePath);
return filePath;
});
})
.reduce((result, value) => {/*一段merge的代碼*/}, {});
return {
[month]: days
};
})
.reduce((result, value) => {/*一段merge的代碼*/}, {});
return {
[year]: months
};
})
.reduce((result, value) => {/*一段merge的代碼*/}, {});
}
解析markdown文件內(nèi)容
在上述步驟中，我們解析出了文件樹結(jié)構(gòu){[year]:{[month]:{[day]:filename}}}，過程中調(diào)用了fn(filePath)，此fn即為index.js中的回調(diào)方法，
該方法首先先讀取出文件內(nèi)容const content = fs.readFileSync(filePath).toString();，再組裝成task，丟到executor中執(zhí)行解析
executor的邏輯非常簡單，將content丟給transforms/markdown.js解析
const YFM = require('yaml-front-matter');
module.exports = function MT(markdown) {
const ret = {};
const raw = YFM.loadFront(markdown);
ret.content = raw.__content;
delete raw.__content;
ret.meta = raw;
return ret;
};
我們每個markdown文件頭部都是一段yaml配置，包括該文章的title、標(biāo)簽、分類及簡要，使用yaml-front-matter這個庫解析，
對于文章的內(nèi)容部份__content，本文并沒有做更多解析，因為圖個簡單，全部交給了react-markdown。
小結(jié)
articles-loader的分析就到此結(jié)束了，其中的思路大體和dva解析markdown的思路一致的，先了解此問，再去看dva部份代碼，相信是有所幫助的；
下一篇，我們將介紹，如何使用leanCloud給站點添加訪問量統(tǒng)計，敬請期待。
博客地址：http://hiihl.com 源碼地址：https://github.com/hihl/blog
