[本文摘自官方文档]

PostHTML 是一个通过 JavaScript 插件来处理 HTML 的工具。和 PostCSS 类似,PostHTML 本身很小,所有的转换都通过插件来完成,而这些插件只是一些 JavaScript 函数。

安装 PostHTML

$ npm install posthtml --save-dev

PostHTML API

.use() 接收一个函数作为参数,用于添加一个插件。比如:

var posthtml = require('posthtml');
var ph = posthtml()
    .use(function(tree) {
        return { tag: 'div', content: tree };
    });

.process() 用于运行添加的所有插件来处理 HTML,接收的第一个参数为字符串或者 PostHTMLTree,第二个参数是可选配置参数 options。运行完毕后返回一个对 象 { tree: PostHTMLTree, html: String }

举个栗子:

const posthtml = require('posthtml');

let html = `
    <myComponent>
        <myTitle>Super Title</myTitle>
        <myText>Awesome Text</myText>
    </myComponent>`;

posthtml()
    // 使用 use() 添加插件
    .use(require('posthtml-custom-elements')())
    // 使用 process() 执行转换
    .process(html/*, options */)
    .then(function(result) {
        console.log(result.html);
        // 会得到如下的 HTML
        // <div class="myComponent">
        //  <div class="myTitle">Super Title</div>
        //  <div class="myText">Awesome Text</div>
        // </div>
    });

结合 Gulp

安装:

npm install gulp-posthtml --save-dev

使用:

gulp.task('html', function() {
    let posthtml = require('gulp-posthtml');
    return gulp.src('src/**/*.html')
        .pipe(posthtml([ require('posthtml-custom-elements')() ]/*, options */))
        .pipe(gulp.dest('build/'));
});

结合 Koa

安装:

npm install -save koa-posthtml

使用:

'use strict'

import { join } from 'path'

import koa from 'koa'
import posthtml from 'koa-posthtml'

const app = koa()

// Setup View Engine
posthtml(app, {
  ext: 'html',
  root: join(__dirname, 'views'),
  options: {/* Options */},
  plugins: [/* Plugins */]
  writeResp: true
})

app.use(function * () {
  // Render index.html
  yield this.render('index')
})

app.on('error', (err) => console.error('=> Server error', err))

app.listen(3000, () => console.log('=> Server started'))