JavaScript编译vm模板（一）

近日接到一个需求，要在大促期间每日发发送日报邮件，内容采用html格式。不过开发过程中后端采用的是vm模板，且没有提供查看html结果的相应环境，只能通过Java生成html，在outlook里看效果。这就导致每次想要调整下样式都要重新发送邮件，且没法调试。为此需要用JavaScript直接编译vm生成html，这样就能在浏览器里看到效果

涉及到的npm包

• watchpack：用于监听文件变化，用于实现当vm文件变化时自动进行编译。webpack的watch功能就是通过该包实现
• velocityjs：JavaScript版的vm编译引擎，用于实现将vm编译为html

源码

const path = require("path");
const fs = require('fs');
const Watchpack = require("watchpack");
const velocity = require('velocityjs');

const wp = new Watchpack({
    aggregateTimeout: 100,
    poll: true,
    followSymlinks: true,
    ignored: "**/.git"
});

wp.watch({
    files: [
        path.join(__dirname, 'day.vm'),
        path.join(__dirname, 'hour.vm')
    ],
    startTime: Date.now() - 10000
});

wp.on("change", function (filePath, mtime, explanation) {
    console.log(filePath, '文件变化')
    let context = {};
    if (filePath.indexOf('day') !== -1) {
        context = {
            dt: ["11/01", "11/02", '11/03', '11/04']
        };
    } else if (filePath.indexOf('hour') !== -1) {
        context = {
            weekStr: '周三'
        };
    }
    fs.writeFileSync(
        filePath.replace('vm', 'html'),
        velocity.render(fs.readFileSync(filePath, 'utf-8'), context)
    )
});

相关文章

• JavaScript编译vm模板（二）