随着电子邮件的使用越来越广泛，如何制作美观、完整的邮件成为了一个重要的问题。npm 包 html-mailer 提供了一个非常简单的解决方案，可以帮助你快速制作出漂亮的邮件。本文将介绍 html-mailer 的使用方法和示例代码，帮助更多的前端开发者更快地学习和使用该工具。
html-mailer 概述
html-mailer 是一个使用 Node.js 编写的 npm 包，它旨在提供一种简单、快速、可重用的方法来创建 HTML 邮件。它支持 HTML、CSS 和内联图片，并可以通过命令行工具或 JavaScript 来使用。
安装 html-mailer
安装 html-mailer 很简单，只需在终端中运行以下命令即可：
npm install html-mailer -g
加上 -g 参数可以将 html-mailer 安装为全局命令行工具，以在任何地方使用它。
使用 html-mailer
html-mailer 有两种使用方式：命令行工具和 JavaScript API。下面将逐一介绍这两种使用方法。
使用命令行工具
使用命令行工具可以快速创建 HTML 邮件，并通过命令行参数来指定邮件的各种属性。
创建邮件模板
首先，我们需要创建一个名为 template.html 的 HTML 模板文件。这个文件的结构基本可以按照标准的 HTML 文档来写，但是需要注意一些邮件的特殊属性。
在 head 标签中，需要添加以下代码来告诉邮件客户端如何显示邮件：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="x-apple-disable-message-reformatting" />
此外，需要在每个链接和图片的标签上添加 style 属性来指定其样式，比如：
<a href="https://example.com" style="color: #336699; text-decoration: none;">Example</a> <img src="https://example.com/logo.png" width="200" height="100" style="display: block; border: 0; margin: 0; padding: 0;">
在 body 标签中，可以按照自己的需求来组织邮件的内容。注意，所有的 CSS 样式都需要写在标签的 style 属性内，不能使用外部样式文件或 <style> 标签。
使用命令行工具
假设我们已经创建了一个名为 template.html 的邮件模板，接下来可以使用以下命令来构建邮件：
html-mailer template.html -o mail.html -t "My Mail" -g "https://example.com" -f "sender@example.com" -t "recipient@example.com"
该命令的各个参数的作用如下：
-o：输出文件的路径，默认为output.html。-t：邮件的标题。-g：邮件的预览链接。-f：发件人地址。-t：收件人地址。可以使用多个-t参数来指定多个收件人。
当命令执行完毕后，将会在当前目录下生成一个名为 mail.html 的 HTML 文件，可以直接用来发送邮件。
使用 JavaScript API
如果需要更复杂的邮件，可以使用 JavaScript API 来构建邮件。使用 JavaScript API 可以更好地控制邮件的生成过程，并且可以重用相同的代码来生成不同的邮件。
创建邮件模板
与使用命令行工具类似，使用 JavaScript API 时也需要先创建一个 HTML 模板文件。但是在模板文件中需要添加一些特殊的标记，以便 JavaScript API 可以识别并替换它们。
以下是一个简单的邮件模板示例：
-- -------------------- ---- -------
------
------
--------- ----- ----------
----- --------------- ---------------------------- ------------------ ------------------ ----------------- --
----- ------------------------- ------------------- -------------- --
----- ------------------------------------------- --
-------
------
--------- -- ---- -------
------- -- ---- ----------
---- ------- -------- --- ----------- ------------ --------- ------ --------------- ------ ------- -- ------- -- -------- ----
--------- --- ------- --- ---------
---------------
----- ------ ------
-------
-------在这个模板中，我们使用了三对大括号的标记 {{{ }}} 来表示需要在生成邮件时替换的内容。
使用 JavaScript API
下面是一个使用 JavaScript API 构建邮件的例子：
-- -------------------- ---- ------- ----- ------ - ----------------------- ----- -- - -------------- -- ------ ----- -------- - -------------------------------- -------- -- -------------- ----- -------- - - ------ ------------------- ----- ----- ----- --------- -------------------------------- ------- ----- ---- ----------------------- -- ----- -------- - ----------------------- ---------- -- ---- ---- ---- ----------------------------- ----------
在这个例子中，我们首先使用 fs 模块读取邮件模板文件，然后用数据来替换模板中的标记。最后，将生成的 HTML 写入文件供进一步处理和发送邮件。
示例代码
下面是一个更完整的 JavaScript API 示例代码，可以根据自己的需要进行修改和扩展。
-- -------------------- ---- -------
----- ------ - -----------------------
----- ---------- - ----------------------
----- -- - --------------
----- - --------- - - ----------------
----- -------- ------------------ -
-- ---- ---- --
----- ----------- - ----------------------------
----- -------------------
----- ----
------- -----
----- -
----- ---------------------
----- -------------
--
---
-- ------
----- -------- - ----- --------------------------------------- --------
-- --------------
----- -------- - ----------------------- ----------
-- ----
----- ----------- - -
----- ----- ---- -----------------------
--- -------------------
-------- ---------------
----- ---------
--
----- ----------------------------------
-
-- ------- -------- --
----- -------- ------ -
----- -------- - -
------ -------------------
----- ----- -----
--------- --------------------------------
------- ----- ---- -----------------------
---------- -------------------
--
----- -------------------
-
-------在这个例子中，我们首先引入了一些必要的模块，如 nodemailer、fs 和 util。然后，我们定义了一个名为 sendMail 的异步函数，用于构建并发送邮件。接着，我们在主函数中调用了 sendMail 函数来发送一封邮件。
总结
html-mailer 是一个非常实用的 npm 包，可以帮助前端开发者快速构建漂亮的 HTML 邮件。本文介绍了 html-mailer 的安装和使用方法，并提供了一些示例代码供读者参考和扩展。希望读者可以通过本文了解 html-mailer 的基本操作和使用方法，并能在实际项目中灵活运用该工具来创建高质量的邮件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725b81e8991b448e8859