尝试在配对时从车把和 mjml 中获取实时预览

Question

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

我愿意： • 运行一个脚本，每当我的index.js 文件发生更改时，该脚本都会执行 fs.writeFile，然后实时提供该文件 • 或直接预览主索引文件，无需 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 支持”在 IDE 内部执行此操作，除了 Handlebars 支持之外。

也许其他IDE也有类似的。

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

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

顺便说一句：除了 StackOverflow 之外，MJML 支持的一个重要来源是 https://mjml.slack.com/ 您可能会在那里得到比这里更及时的响应。 （对不起！）

Answer 2

您已经使用了

live-server

，只需在新创建的 html 文件

new.html

上启动服务器（右键单击文件和

Open with Live Server

）并运行脚本。它将写入 html 的更改，并且

live-server

观察程序将自动重新加载文件并将内容注入到您的模板中。

您可以将其与

nodemon

配对，以便每次保存脚本时自动运行脚本。

希望有帮助

Answer 3

mjml 预处理器现在可以处理这个问题，正如 https://thoughtbot.com/blog/building-templated-emails-with-mjml 中所描述的那样，尽管 vscode 扩展还不支持这种风格。

我添加了一个PR来解决这个问题来解决这个问题，但是在他们合并之前我已经发布了一个启用该功能的分叉版本：MJML - 使用自定义配置路径

所以基本上你需要添加

.mjmlconfig.js

文件，如下所示：

const { compile } = require("handlebars");

const data = {
  firstName: "Ivan",
  lastName: "Kerin",
  phoneNumber: "911111111",
  position: "developer",
};

module.exports = {
  preprocessors: [(template) => compile(template)(data)],
  packages: [],
};

然后使用此扩展，MJML - 使用自定义配置路径将

mjml.mjmlConfigPath

设置设置为

.mjmlconfig.js

，您的预览现在应该从扩展本身渲染车把模板。