0

我创建了一个将车把模板与 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
//   );

4

1 回答 1

0

如果您碰巧使用了 JetBrains IDE 之一，

  • 您可能可以使用他们的 File Watcher 来完成此操作。它完全按照您的要求执行 - 如果任何一个文件或作为组的一部分描述的任何文件发生更改（例如，*.mjml），它就会运行一个脚本。如果编写正确，该脚本会将 HTML 发送到由 JetBrains 的一部分 Live Edit 处理的外部浏览器窗口。在https://github.com/mjmlio/mjml/issues/53#issuecomment-719887303上有一个 JetBrains 部分的示例，除了 Handlebars 部分
  • 除了 Handlebars 支持之外，JetBrains 插件“MJML 支持”在 IDE 内部正是这样做的。

也许其他IDE也有类似的。

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

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

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

于 2021-11-01T19:08:07.467 回答