在前端开发中，HTML 邮件是一个需要被注意的方面，因为它们需要被格式化和测试以确保在各种不同的邮件客户端上都能够正确地呈现。而 mjml-scaff 是一款可靠的 npm 包，可以帮助我们在开发 HTML 邮件时更加高效、准确地排版和测试。
介绍 mjml-scaff
mjml-scaff 是一个基于 MJML 的脚手架工具，它可以帮助我们快速创建基于 MJML 的 HTML 邮件模板。MJML （Mailjet Markup Language）是一种基于 XML 的开源框架，用于快速构建响应式电子邮件模板。相比于让我们手写 HTML、CSS 和表格来构建 HTML 邮件的方式，使用 MJML 可以更快速、准确地排版邮件，并且支持响应式设计。
开始使用 mjml-scaff
安装
首先，您需要确保已经安装了 Node.js。然后，您可以使用 npm 包管理器在您的项目中安装 mjml-scaff：
npm install mjml-scaff --save-dev
使用
安装完成后，您可以在项目目录下运行以下命令来创建一个新的 MJML 邮件模板：
npx mjml-scaff -n <template-name>
其中 <template-name> 是您想要为邮件模板命名的名称。
运行此命令后，将自动在项目的 src 目录下创建一个以 <template-name> 命名的文件夹，其中包含 MJML 邮件模板、相关的 CSS 和图像文件。
接下来，你可以进入新创建的文件夹中，并编辑 template.mjml 文件，以便根据你的需求来改变样式和布局。
编译
在创建 MJML 邮件模板后，您需要将它们编译成最终的 HTML 邮件模板，以便能够在真实的邮件客户端中预览。
使用 mjml-scaff，您可以很容易地将您的 MJML 邮件模板编译为 HTML 邮件模板：
npx mjml <path-to-template>/template.mjml -o <path-to-template>/template.html
其中 <path-to-template> 是您的 MJML 邮件模板所在的目录路径。运行此命令后，将在 <path-to-template> 目录下生成一个名为 template.html 的文件，这就是最终的 HTML 邮件模板。
示例代码
以下是一个简单的 MJML 邮件模板示例：
-- -------------------- ---- -------
------
---------
----------------- -- -- ---------------------
---------------
------- ---------------- ------------ --
----------- ---------- ----- -------------------------- --
---------- -------------------------- --------------- ------------------ --
----------------
----------
---------
------------
-----------
--------- ------------- -------------------------------------- --
----------- --
-------- ------------------------- -------------------
-------- ----------------------- --- ------- -- --- -- ----------- ------ ------- ------- ------- -- --- ------ --- -------- -- ---------- ---------------
---------- ------------------------------ -------------- ---------------------- ---------------
------------
-------------
----------
-------结论
使用 mjml-scaff，我们可以快速创建 MJML 邮件模板，并在开发期间自动进行编译和测试，从而提高我们在开发 HTML 邮件时的效率和精确性。这非常有助于我们节省时间、降低成本，并且确保邮件在各种不同的邮件客户端上都能够正确地呈现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067356890c4f7277583bc1