構建工具是如何用 node 操作 html/js/css/md 檔案的
阿新 • • 發佈：2018-12-23
構建工具是如何用 node 操作 html/js/css/md 檔案的
從本質上來說，html/js/css/md ... 原始碼檔案都是文字檔案，文字檔案的內容都是字串，對文字檔案的操作其實就是對字串的操作。
操作原始碼的方式又主要分成兩種：
- 當作字串，進行增、刪、改等操作
- 按照某種語法、規則，把字串讀取成一個物件，然後對這個物件進行操作，最後匯出新的字串
1. 操作 html 檔案
html 的語法比較簡單，並且一般操作 html 都是插入、替換、模板引擎渲染等在字串上的操作，所以使用第一種方式的比較多。
比如：
- html-loader
- html-webpack-plugin
- html-minifier
- handlebars 模板引擎
- pug 模板引擎
- ejs 模板引擎
一般以第二種方式來操作 html 的都是將 html 文字解析成 dom 樹物件，然後進行 dom 操作，最後再匯出成新的程式碼文字。
比如：
以 cheerio 為例，操作 html 文字：
cheerio 能夠載入一個 html 文字，例項化一個類 jQuery 物件，然後使用 jQuery 的 api 像操作 dom 一樣操作這段文字，最後匯出新的 html 文字。
const cheerio = require('cheerio'); const $ = cheerio.load('<h2 class="title">Hello world</h2>'); // 載入一個 html 文字 $('h2.title').text('Hello there!'); $('h2').addClass('welcome'); $.html(); // 匯出新的 html 文字 //=> <h2 class="title welcome">Hello there!</h2>
以 jsdom 為例，操作 html 文字：
jsdom 是用 js 將一個 html 文字解析為一個 dom 物件，並實現了一系列 web 標準，特別是 WHATWG 組織制定的 DOM 和 HTML 標準。
const jsdom = require("jsdom"); const { JSDOM } = jsdom; const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`); console.log(dom.window.document.querySelector("p").textContent); // "Hello world"
2. 操作 js 檔案
因為 js 語法比較複雜，僅僅是如字串一樣進行增刪改，只能做一些小的操作，意義不大。所以，一般操作 js 檔案都是採用的第二種方式。
在第二種方式中，一般是工具將 js 文字解析成抽象語法樹（AST，Abstract Syntax Tree，抽象語法樹），然後對這棵語法樹以面向物件的方式做增刪改等操作，最後再匯出成新的程式碼文字。
生成抽象語法樹的工具主要有：
以 acorn 為例，將 1 + 1 片段進行解析：
const acorn = require('acorn');
const tree = acorn.parse('1 + 1');
// tree 的 json 化表示
{
type: 'Program',
start: 0,
end: 5,
body: [{
type: 'ExpressionStatement',
start: 0,
end: 5,
expression: {
type: 'BinaryExpression',
start: 0,
end: 5,
left: { type: 'Literal', start: 0, end: 1, value: 1, raw: '1' },
operator: '+',
right: { type: 'Literal', start: 4, end: 5, value: 1, raw: '1' }
}
}],
sourceType: 'script'
}以 babel-parser 為例，將 1 + 1 片段進行解析：
const parser = require('@babel/parser');
const tree = parser.parse('1 + 1');
// tree 的 json 化表示
{
type: 'File',
start: 0,
end: 5,
loc: {
start: { line: 1, column: 0 },
end: { line: 1, column: 5 }
},
program: {
type: 'Program',
start: 0,
end: 5,
loc: {
start: { line: 1, column: 0 },
end: { line: 1, column: 5 }
},
sourceType: 'script',
interpreter: null,
body: [{
type: 'ExpressionStatement',
start: 0,
end: 5,
loc: {
start: { line: 1, column: 0 },
end: { line: 1, column: 5 }
},
expression: {
type: 'BinaryExpression',
start: 0,
end: 5,
loc: {
start: { line: 1, column: 0 },
end: { line: 1, column: 5 }
},
left: {
type: 'NumericLiteral',
start: 0,
end: 1,
loc: {
start: { line: 1, column: 0 },
end: { line: 1, column: 5 }
},
extra: { rawValue: 1, raw: '1' },
value: 1
},
operator: '+',
right: {
type: 'NumericLiteral',
start: 4,
end: 5,
loc: {
start: { line: 1, column: 0 },
end: { line: 1, column: 5 }
},
extra: { rawValue: 1, raw: '1' },
value: 1
}
}
}],
directives: []
},
comments: []
}3. 操作 css 檔案
css 的語法比 html 要複雜一些，一些簡單的操作如插入、替換，可以用直接以字串的方式操作，但如果是壓縮、auto prefix、css-modules 等複雜的功能時，就需要用第二種方式操作 css 了。
在第二種方式中，一般也是將 css 文字解析成一棵抽象語法樹，然後進行操作。
比如：
- postcss: 比如 css-loader、autoprefixer、cssnano 等的底層都是使用的
postcss來解析 - rework、reworkcss: 抽象語法樹解析器
- csstree: 比如 csso 的底層就是使用
csstree來解析
以 postcss 為例，操作 css 文字：
const autoprefixer = require('autoprefixer');
const postcss = require('postcss');
const precss = require('precss');
const css = `
.hello {
display: flex;
color: red;
backgroundColor: #ffffff;
}
`;
postcss([precss, autoprefixer({browsers: ['last 2 versions', '> 5%']})])
.process(css)
.then(result => {
console.log(result.css);
});輸出的文字：
.hello {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
color: red;
backgroundColor: #ffffff;
}以 rework 為例，操作 css 文字：
const css = require('css');
const ast = css.parse('body { font-size: 12px; }');
console.log(css.stringify(ast));輸出的文字：
body {
font-size: 12px;
}4. 操作 markdown/md 檔案
一般來說，操作 markdown 文字的目的有兩個：
- 作為編輯器編輯
markdown文字，或作為渲染器渲染markdown文字為html文字 - 從
markdown文字中讀取資訊、校驗嵌入的原始碼、優化格式等
所以，儘管 markdown 的語法也很簡單，但一般並不會直接去使用字串的方式去操作 markdown 文字，一般都是使用的第二種方式。
比如：
- markdown-it: 作為編輯器或渲染器的好手
- remark: 構建抽象語法樹進行操作的好手
以 markdown-it 為例，操作 markdown 文字：
const md = require('markdown-it')();
const result = md.render('# markdown-it rulezz!');
console.log(result);輸出的文字：
<h1>markdown-it rulezz!</h1>以 remark 為例，操作 markdown 文字：
const remark = require('remark')
const recommended = require('remark-preset-lint-recommended')
const html = require('remark-html')
const report = require('vfile-reporter')
remark()
.use(recommended)
.use(html)
.process('## Hello world!', function(err, file) {
console.error(report(err || file))
console.log(String(file))
})校驗錯誤提示：
1:1 warning Missing newline character at end of file final-newline remark-lint
⚠ 1 warning輸出的文字：
<h2>Hello world!</h2>後續
更多部落格，檢視 https://github.com/senntyou/blogs
版權宣告：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）