使用Node實現一個md文檔自動轉換html

時間 2019-11-05

標籤使用 node 實現一個文檔自動轉換 html 欄目 HTML 简体版

原文原文鏈接

目標javascript

利用node實現一個實時的將md文檔轉換爲html文件並在瀏覽器展現效果css
實現思路html

有了目標，剩下的就是思考一下怎麼實現，總體思路以下java
- 怎麼在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');
複製代碼

定義路徑node

由於須要將md轉成html，須要定義目標路徑(md)和生產路徑(html)git

// 接受須要轉換的文件路徑
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);
複製代碼

監聽文件github

fs.watchFile 接受三個參數npm
1. Filename: 須要被 watch 的文件
2. Options: 選項配置，其中interval屬性，指示輪詢目標的頻率
3. listener：有兩個參數，當前的 stat 對象和以前的 stat 對象

// 監視文件的變化
fs.watchFile(target, { interval: 200 }, (curr, prev) => {
  // ...
});
複製代碼

監聽文件作了哪些事情api

利用 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>`;
複製代碼