npm 包 node-mjml-mustache-nodemailer 使用教程

前言

随着互联网的发展,电子邮件成为了一种不可或缺的通信方式,而且越来越多的网站也需要通过邮件来与用户进行交互。在邮件的发送及渲染过程中,常常需要处理 HTML 页面及模板引擎,这也就引发了前端工程师对邮件渲染的考虑。

基于此,本文介绍了一种利用 npm 包 node-mjml-mustache-nodemailer 来实现邮件渲染,模板引擎以及邮件发送的方法。

什么是 npm?

npm 是 node.js 中的包管理工具,提供了一个丰富的代码库和强大的搜索和安装功能。在本文中,我们将使用 npm 包来进行项目开发。

什么是 node-mjml-mustache-nodemailer?

node-mjml-mustache-nodemailer 是一组功能强大的 npm 包,结合了两个著名的 node.js 包:nodemailermjml/mjmlnodemailer 是用于发送电子邮件的 node.js 库,可以通过 SMTP 或其他传输协议发送邮件。mjml/mjml 是一个基于 HTML 的邮件模板语言,可以通过简单的 HTML 标记来快速构建响应式邮件。

本文将介绍如何使用 node.js + mjml + mustache + nodemailer 实现创建 HTML 邮件,并将其发送到指定的收件人。

安装

在进行项目开发之前,首先需要安装必要的依赖库。通过 npm 可以很方便的完成依赖的安装。

--- ------- ----------------------------- ------

使用

安装完成后,我们需要在代码中引入相关库,如下所示:

----- --------- - ----------------
----- -------- - --------------------
----- ---------- - ----------------------

生成 HTML 邮件

HTML 邮件的创建很类似于普通的 HTML 页面。 mjml 提供了丰富的组件来让你构建你的邮件。

页面模板定义需要执行 mjml2html 函数,mjml模板编译成 html 格式,例如:

----- ------------ - -------
  ---------
    ----------------- -- -- ------------------
    ----------
      ---------- -
        ----------------- --------
      -
    -----------
  ----------
  ---------
    ------------
      -----------
        --------- ----------------------------------------------------------------------- ---------- ----------- --
        ----------- ------------------------ --
        -------- ---------------- -------------------------- -- -- ------------------
        ----------- ------------------------ --
        -------- ------------------- -------------------
        -------- ------------------- ----- ---- -- ---- - ------ --- ----- --- --- ------- --- --------- --- ---- -- --------- -- -------- ---- ----- ---------- -- --- ---- -- ----------- ----------- --- -------- --- --- ------ -- ---- ---- --- ---- --- --------- -- ------- ------ --- ----------------------
        -------- ---------------------- --- --- ---- --------- ------------------
        ---------- -------------------------- ------------- ----------------------- -- ----------------
      ------------
    -------------
  ----------
--------

----- ----------- - -----------------------
----- ---- - ----------------

上述代码中的 {{name}} 和 {{url}} 会被 Mustache 引擎动态替换成传入的值。

发送邮件

我们使用 Nodemailer 进行邮件的发送操作,代码如下:

-- ------ -------- ----------- ------ ----- ---- ----------
--- ----------- - ----------------------------
  -------- --------
  ----- -
      ----- ------------- -- ----- ---
      ----- -------------- -- ----- --
  -
---

-- ------
--- ----------- - -
  ----- ----------------- -- ------ -------
  --- --------------- -- ---- -- ---------
  -------- -------- ---------- -- ------- ----
  ----- ---- -- ---- ----
--

-- ---- ---- ---- ------- --------- ------
--------------------------------- ------- ----- -- -
  -- ------- -
      ------ -------------------
  -
  -------------------- -- ----- ---- --------------- ---------------
---

在实际发送中,需要正确填写 userpass 的值,同时设置正确的 fromto 地址即可。

示例代码

----- --------- - ----------------
----- -------- - --------------------
----- ---------- - ----------------------

----- -------- ------------------------ ---- -
  --- -
    ----- ------------ - -------
      ---------
        ----------------- -- -- ------------------
        ----------
          ---------- -
            ----------------- --------
          -
        -----------
      ----------
      ---------
        ------------
          -----------
            --------- ----------------------------------------------------------------------- ---------- ----------- --
            ----------- ------------------------ --
            -------- ---------------- -------------------------- -- -- ------------------
            ----------- ------------------------ --
            -------- ------------------- -------------------
            -------- ------------------- ----- ---- -- ---- - ------ --- ----- --- --- ------- --- --------- --- ---- -- --------- -- -------- ---- ----- ---------- -- --- ---- -- ----------- ----------- --- -------- --- --- ------ -- ---- ---- --- ---- --- --------- -- ------- ------ --- ----------------------
            -------- ---------------------- --- --- ---- --------- ------------------
            ---------- -------------------------- ------------- ----------------------- -- ----------------
          ------------
        -------------
      ----------
    --------
    ----- ----------- - -----------------------
    ----- ---- - ----------------
    ----- ----------- - ----------------------------
      -------- --------
      ----- -
          ----- ------------- -- ----- ---
          ----- -------------- -- ----- --
      -
    ---
    --- ----------- - -
      ----- ----------------- -- ------ -------
      --- --------------- -- ---- -- ---------
      -------- -------- ---------- -- ------- ----
      ----- --------------------- - ----- --- -- -- --- --------------- -- ------- ------- --------- 
    --
    ----- ------ - ----- ----------------------------------
    ------------------ --- ---------- ---- -- --- ---------- ---- ----------------

  - ----- ------- -
    --------------------
  -
-

------------------------- ----- --------------------------

每次执行此函数,将会向指定的电子邮件地址发送 HTML 邮件。

总结

在本文中,我们介绍了 npm 包 node-mjml-mustache-nodemailer 的使用方法。我们演示了如何使用 mjml 和 Mustache 引擎来生成模板,同时使用 nodemailer 库发送电子邮件。这个过程非常简单,使用 node-mjml-mustache-nodemailer,我们的邮件模板可以变得非常简洁和易于管理。当然,我们还可以利用 mjml 定制我们自己的 HTML 邮件模板,使邮件更加美观。

希望本教程可以对前端工程师们有所帮助。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005753b81e8991b448ea48f


猜你喜欢

  • npm 包 aws-lambda-invoker 使用教程

    简介 aws-lambda-invoker 是一款用于调用 AWS Lambda 函数的 NPM 包。该包提供了简单易用的 API,可以快速地在前端应用中使用 AWS Lambda 函数。

    3 年前
  • npm 包 flush-css-chunks-webpack-plugin 使用教程

    在前端开发中,优化代码加载速度、提高用户体验是一项重要的任务。其中,最常见的优化方式之一便是代码分割,即将代码按一定规则分成若干部分,并在需要时动态加载,以减少首次加载时间。

    3 年前
  • npm 包 callbag-from 使用教程

    在前端开发中,我们经常需要处理异步数据流,例如在 UI 交互中处理用户输入,或是处理来自 WebSocket 或 HTTP 请求的响应数据等等。为了更好地组织和处理这些数据流,我们会使用诸如 RxJS...

    3 年前
  • npm 包 es-t-dd 使用教程

    介绍 es-t-dd( es-test-double-decorator )是一个轻量的 JavaScript 库,提供了一种简单的方法来创建 mock 和 stub。

    3 年前
  • npm 包 @trigrou/zip-js 使用教程

    介绍 @trigrou/zip-js 是一个基于 JavaScript 的 zip 压缩库,可用于浏览器和 Node.js 环境,支持 zip 格式压缩和解压缩,以及加密和解密。

    3 年前
  • npm 包 vandux 使用教程

    vandux 是一个基于 Vue 框架的状态管理库。它提供了一系列的 API,用于管理应用程序的状态。vandux 与 Vuex 相似,但是更加轻量化,易于使用。在本篇文章中,我们将深入学习 vand...

    3 年前
  • npm 包 js-senc 使用教程

    在前端开发中,我们常常需要对数据进行加密和解密的操作。这时,npm 包 js-senc 就成了帮助我们实现这个目标的工具。这篇文章将详细介绍 npm 包 js-senc 的使用方法,包括安装和基本用法...

    3 年前
  • npm 包 pwact 使用教程

    什么是 pwact? pwact 是一款 npm 包,它为我们提供了一个简单易用的工具,可以将一个 PWA(渐进式 Web 应用程序)项目打包成一个可以被托管到任何静态文件服务器的单个 HTML 文件...

    3 年前
  • npm 包 senc 使用教程

    简介 senc 是一个用于字符串加密和解密的 npm 包,其主要基于 AES-256-CBC 算法实现。这个包能够使得字符串的加密和解密变得非常容易。此外,这个包使用起来十分方便,仅需几行代码即可完成...

    3 年前
  • npm 包 @nichoth/wslog 使用教程

    前言 前端开发是一个较为广泛的领域,其中涉及到的技术也是越来越多,其中,使用 npm 包来完成前端开发已经是非常常见的做法。而今天我们要介绍的是一个叫做 @nichoth/wslog 的 npm 包,...

    3 年前
  • npm 包 w20-material-theme 使用教程

    在前端开发中,使用主题风格可以大大提高开发效率和用户体验。w20-material-theme 是一个可用于 React、Angular 和 Vue 等前端框架的 NPM 包,它提供了 Google ...

    3 年前
  • npm 包 effects-middleware 使用教程

    在前端开发中,我们经常使用许多工具和框架来提高我们的开发效率。其中,npm 包就是我们常用的工具之一。今天我想向大家介绍一个非常有用的 npm 包:effects-middleware。

    3 年前
  • npm 包 proxyquire-stub-lambda-class 使用教程

    proxyquire-stub-lambda-class 是一个 Node.js 的模块,它提供了一个方便的方式在测试 AWS Lambda 代码时,将其相互独立地测试。

    3 年前
  • npm 包 stashinvest-node 使用教程

    stashinvest-node 是一个 npm 包,它提供了对 StashInvest API 的访问和互动。使用 stashinvest-node,您可以轻松地与 StashInvest 进行交互...

    3 年前
  • npm 包 react-native-uking-fast-image 使用教程

    在 React Native 开发过程中,图片渲染无疑是一个需要注意的问题。随着应用越来越复杂,图片越来越多,我们必须寻找一种快速而可靠的方式来处理图片。 在这篇文章中,我将向你介绍一种非常有用的 n...

    3 年前
  • npm 包 spider-screenshot 使用教程

    在前端开发中,我们经常需要爬取网站或者需要在特定的条件下生成网站的截图,这时候就需要使用到 node 包 spider-screenshot。该包基于 puppeteer 实现,能够在无需打开浏览器的...

    3 年前
  • npm 包 get-group-monitoring 使用教程

    前言 在现在的前端开发领域,通过各种 npm 包能够快速地构建出一个在细节上都十分优美的应用,而 get-group-monitoring 包就是其中一个十分优秀的 npm 包。

    3 年前
  • npm 包 ngdatediff 使用教程

    在现代的 Web 应用程序中,日期处理是一个非常重要的主题。为了追踪日期的变化或者做日期运算,我们需要一种方便易用的日期处理工具。npm 包 ngdatediff 是一个专门用于 AngularJS ...

    3 年前
  • npm 包 ngx-video-scrubber 使用教程

    ngx-video-scrubber 是一个基于 Angular 框架的视频滑块组件,能够提供视频播放时的滑块进度条,支持鼠标和触控操作,能够轻松地实现视频快进、快退、暂停等常见功能。

    3 年前
  • npm 包 react-native-scaling-drawer 使用教程

    介绍 react-native-scaling-drawer 是一款 React Native 的第三方组件库,用于实现一个可缩放抽屉效果的页面组件。它不仅支持简单、快捷的页面开发,而且还提供了丰富的...

    3 年前

相关推荐

    暂无文章