尝试从handlebars和mjml配对时进行实时预览

Question

我已经创建了一个将handlebar模板与MJML框架相结合的文件。我的问题是，当我进行更改时，我不太确定如何预览实时输出。

我想要：·运行一个脚本，每次我的index.js文件有变化时都会执行fs.writeFile，然后进行实时服务。·或者直接预览主索引文件，不使用文件系统选项

任何指导都将不胜感激。

程序包文件

​

{
  "name": "g_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "start": "",
    "server": "",
    "dev": "",
    "build": ""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "concurrently": "^6.3.0",
    "handlebars": "^4.7.7",
    "live-server": "^1.2.1",
    "mjml": "^4.10.3"
  },
  "dependencies": {}
}

​

索引文件

​

// SET  "type": "module", in PACKAGE FILE TO USE IMPORT
import mjml2html from 'mjml'
import Handlebars from 'handlebars'
import fs from 'fs'

// PUT DUMMY CONTENT HERE
const context = {
    fullName: 'Bob Wiley',
    message: 'How are you feeling?',
    logo: 'https://picsum.photos/300/100',
  }

//   MJML GOES HERE
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  paddin"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>
        <mj-text color="#525252">
            {{#if activeUser}}
                Hi active user!
            {{else}}
                Hi inactive user
            {{/if}}
        </mj-text>
    </mj-column>
</mj-section>
</mj-body>
</mjml>
`)

// COMPILING
const mjml = template(context)
const {html} = mjml2html(mjml)
// console.log(html)

// WRITING TO OUTPUT FOLDER
fs.writeFile('./output/new.html', html.toString(), { encoding: 'utf8' }, function (err) {
  if (err) {
    return console.log(err)
  }
  console.log('The file was saved to the output folder')
})

// TEST FS WATCH
// setTimeout(
//     () => fs.writeFileSync("index.js", 
//     fs.writeFile('./output/new.html', html.toString(), { encoding: 'utf8' }, function (err) {
//         if (err) {
//           return console.log(err)
//         }
//         console.log('The file was saved to the output folder')
//       })
//     ), 3000
//   );

​

Answer 1

如果您碰巧使用了某个JetBrains IDE，

• 你也许可以用他们的文件观察器来实现这一点。它所做的正是您所寻求的--如果任何一个文件或任何被描述为组的一部分的文件发生变化(比如*.mjml)，它就会运行一个脚本。如果编写正确，脚本会将HTML发送到由Live Edit处理的外部浏览器窗口，Live Edit是JetBrains的一部分。在https://github.com/mjmlio/mjml/issues/53#issuecomment-719887303
• The JetBrains插件"MJML Support“中，除了Handlebar部分之外，还有一个JetBrains部件的示例。

也许其他IDE也有类似的功能。

也许您可以使用提供实时浏览器的浏览器加载项，而不是使用JetBrains实时编辑。

您可以编写JavaScript来做您需要做的事情。NPM提供了监视文件更改的包。请考虑将您完成的代码作为NPM包提供支持。我相信其他Handlebar/MJML用户也会感兴趣。MJML团队可能会愿意在他们的文档中列出您的包；他们会得到很多关于这方面的问题。

顺便说一句:除了StackOverflow之外，https://mjml.slack.com/是一个很好的MJML支持来源，你可能会在那里得到比这个更快的响应。(对不起！)