使用Node实现一个md文档自动转换html目标利用node实现一个实时的将md文档转换为html文件并在浏览器展示效果

目标

利用node实现一个实时的将md文档转换为html文件并在浏览器展示效果
实现思路

有了目标，剩下的就是思考一下怎么实现，整体思路如下
- 怎么在node中，将md文档转成html文档？社区有很多优秀的库实现，本次选择marked
- 怎么实时的将md文章转换成html文件呢？熟悉node的小伙伴应该能想到 fs.watchFile 这个API
- 怎么实现实时的在浏览器中预览转换生成的html呢？利用一个比较久远的库browser-sync实现

代码实现

引入需要使用的API和库

const fs = require('fs');
const path = require('path');
const marked = require('marked');
const browserSync = require('browser-sync');

定义路径

因为需要将md转成html，需要定义目标路径(md)和生产路径(html)

// 接受需要转换的文件路径
const target = path.join(__dirname, process.argv[2] || './test.md');
// 转换为html后保存的位置
let filename = target.replace(path.extname(target), '.html');
// 获取html的文件名, browserSync 使用
let indexPath = path.basename(filename);

监听文件

fs.watchFile 接受三个参数
1. Filename: 需要被 watch 的文件
2. Options: 选项配置，其中interval属性，指示轮询目标的频率
3. listener：有两个参数，当前的 stat 对象和之前的 stat 对象

// 监视文件的变化
fs.watchFile(target, { interval: 200 }, (curr, prev) => {
  // ...
});

监听文件做了哪些事情

利用 lisrener 判断文件是否变换，若是变化则继续

// 根据时间 判断文件是否变化
if (curr.mtime === prev.mtime) {
	return false;
}

读取md文件，转换成新的html
1. 首先需要读取md文件
2. 利用 marked 将md转换成 html
3. 使用GitHub的md文档样式文件本次使用的, 并将其读取
4. 定义一个模板，用于接收读取的md和css内容
5. 读取完md和css文件，将读取的内容替换致模板中

 // 读取文件 转换为新的html
fs.readFile(target, 'utf8', (err, data) => {
    if (err) {
        return throw err;
    }

    let html = marked(data);

    fs.readFile(path.join(__dirname, 'github.css'), 'utf8', (err, css) => {
        if (err) {
        return throw err
        }
        html = templates
        .replace('{{{content}}}', html)
        .replace('{{{styles}}}', css);
        fs.writeFile(
        target.replace(path.extname(target), '.html'),
        html,
        'utf8',
        err => {
            browserSync.reload(indexPath);
        }
        );
    });
});

定义的html模板

let templates = `<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>{{{styles}}}</style>
</head>

<body>
    <div class="wy">{{{content}}}</div>
</body>

</html>`;

总结

实现这个效果，简单使用两个简单的API、库便可以实现完成代码