当配对在一起时，试图从车把和html中获得实时预览

Question

我已经创建了一个将车把模板与MJML框架结合在一起的文件。我的问题是我不太确定如何预览实时输出，因为我做了更改。

我想:•运行一个脚本，将fs。每次我的index.js文件有变化时，writeFile，然后live服务它•或直接预览主索引文件w/o fs选项

如有任何指导，将不胜感激。

包文件

{
"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 (JetBrains的一部分)处理的外部浏览器窗口。有一个JetBrains部分的例子，除了Handlebars部分，在https://github.com/mjmlio/mjml/issues/53#issuecomment-719887303
• JetBrains插件"MJML支持"除了Handlebars支持之外，在IDE内部完全做到了这一点。

可能其他ide也有类似的。

也许你可以使用提供实时浏览器的浏览器插件，而不是使用JetBrains Live Edit。

你可以写JavaScript来做你所需要的。NPM有监视文件更改的包。请考虑将完成的代码支持为NPM包。我相信其他Handlebars/MJML用户也会感兴趣。MJML团队可能愿意在他们的文档中列出您的包;他们对此有很多问题。

顺便说一句:除了StackOverflow之外，还有一个很好的MJML支持来源是https://mjml.slack.com/，您可能会得到比这个更及时的响应。(对不起!)