结合Handlebars与MJML开发时如何实现输出内容实时预览

方案一：监听文件变动+静态服务实时预览（满足第一个需求） #

步骤1：补充依赖安装 #

你已经安装了concurrently和live-server，只需额外安装监听node文件变动的nodemon：
npm install nodemon -D
提前在项目根目录创建output文件夹，避免写入文件时报错。

步骤2：修改package.json的scripts配置 #

"scripts": {
  "start": "node index.js",
  "server": "live-server ./output --port=8080",
  "watch:build": "nodemon index.js",
  "dev": "concurrently \"npm run watch:build\" \"npm run server\"",
  "build": "node index.js"
}

步骤3：运行测试 #

执行npm run dev，浏览器会自动打开http://localhost:8080 展示生成的邮件页面。每次修改index.js的模板或上下文数据保存后，nodemon会自动重新执行编译生成新的html文件，live-server检测到文件变动会自动刷新页面，实现实时预览。

方案二：无文件写入实时预览（满足第二个需求） #

如果你不想生成本地html文件，可以搭建轻量Express服务，访问时实时编译返回渲染结果。

步骤1：安装依赖 #

npm install express -D

步骤2：修改index.js为服务模式 #

import mjml2html from 'mjml'
import Handlebars from 'handlebars'
import express from 'express'
const app = express()
const port = 3000

// 测试数据
const context = {
    fullName: 'Bob Wiley',
    message: 'How are you feeling?',
    logo: 'https://picsum.photos/300/100',
    activeUser: false
}

// MJML模板
const template = Handlebars.compile(`
<mjml>
<mj-head>
<mj-title>Little MJML/Handlebars App</mj-title>
<mj-preview>Preview text trick&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;</mj-preview>
</mj-head>
<mj-body>
    <mj-section background-color="#FF5733" padding-bottom="0">
        <mj-column padding="10px" width="70%">
            <mj-text font-style="italic" font-size="18px" color="#FFFC33">Little MJML/Handlebars App</mj-text>
        </mj-column>
        <mj-column width="30%">
            <mj-image width="60px" src={{logo}} />
        </mj-column>
    </mj-section>
    <mj-section background-color="#FAFAFA">
        <mj-column padding="30px">
            <mj-text font-style="italic" font-size="15px" font-family="Helvetica Neue" color="#626262">
            Hello {{fullName}},
            </mj-text>
            <mj-text color="#525252">{{message}}
            </mj-text>
        </mj-column>
    </mj-section>
    <mj-section background-color="#FAFAFA">
    <mj-column padding="30px">
        <mj-text color="#525252">
            {{#if activeUser}}
                Hi active user!
            {{else}}
                Hi inactive user
            {{/if}}
        </mj-text>
    </mj-column>
</mj-section>
</mj-body>
</mjml>
`)

// 访问根路径时实时编译返回html
app.get('/', (req, res) => {
  const mjml = template(context)
  const {html} = mjml2html(mjml)
  res.send(html)
})

app.listen(port, () => {
  console.log(`预览服务运行在 http://localhost:${port}`)
})

步骤3：修改scripts配置 #

"scripts": {
  "dev": "nodemon index.js"
}

执行npm run dev，访问http://localhost:3000 即可查看效果，修改代码保存后刷新页面就能看到最新结果，全程不会生成本地文件。

注意事项 #

原index.js存在两处小错误，修改后可避免编译警告：

• <mj-column paddin"10px" 修正为 <mj-column padding="10px"
• 删掉多余的空闭合标签</mj-text>

内容的提问来源于stack exchange，提问作者Jason G