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 包 @neuelabs/button 使用教程

    在前端开发中,按钮是最常见的 UI 元素之一。@neuelabs/button 是一个易于使用,并且具有高度定制性的 npm 包,可以帮助开发者快速创建漂亮的按钮。

    3 年前
  • npm包 @allmywallets/providers 使用教程

    在前端开发中,我们经常需要访问各种不同的钱包和支付平台。这些平台所提供的API和接口也不尽相同,对于开发者而言,如何在一个项目中统一使用这些服务呢?其实,可以使用npm包 @allmywallets/...

    3 年前
  • npm包gulp-lazysizes-data-srcset使用教程

    简介 在前端开发中,图片占据了很大的一部分,如果不加以优化,会导致网页加载速度变慢,影响用户体验。其中,懒加载是一种比较流行的图片优化方式,gulp-lazysizes-data-srcset就是一款...

    3 年前
  • npm 包 sequelize-express-findbyid 使用教程

    简介 sequelize-express-findbyid 是一个基于 Sequelize 和 Express 的 npm 包,它能够让你更加方便地完成 findById 的操作。

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

    前言 node-cryptonight-lite 是一个用于实现加密货币的 JavaScript 库,可以提供一些加密算法的支持。在本文章中,我们将介绍如何使用这个库来实现加密货币的矿机算法,并为初学...

    3 年前
  • NPM 包 ceci.css 使用教程

    简介 Ceci.css 是一款基于 CSS 类的样式框架,主要面向前端开发者,旨在提供一种易于学习、使用、扩展的 CSS 框架,来快速构建美观的网页界面。该框架采用了一系列命名规则来描述元素的样式,而...

    3 年前
  • npm 包 dogmadb.lex 使用教程

    在前端开发中,我们经常需要使用数据库来存储和管理数据。dogmadb.lex 就是一款基于 npm 平台的轻量级的数据库,它提供了一些简单易用的 API 来操作数据库。

    3 年前
  • npm 包 numeraljs-usd-locale 使用教程

    简介 numeral.js 是一个 JavaScript 的格式化和操作数字的库,它拥有很多语言的本地化支持。而 npm 包 numeraljs-usd-locale 则是为 numeral.js 提...

    3 年前
  • npm 包 react-letter-morph 使用教程

    1. 什么是 react-letter-morph ? react-letter-morph 是一个基于 React 的字母动画库,它可以用来实现一些有趣的字母动画效果,比如字母变形、颜色变化、字母间...

    3 年前
  • npm 包 noobgl-camera 使用教程

    如果您正在进行前端开发,并且需要在您的项目中使用 3D 相机,那么 noobgl-camera 将是您的理想选择。这是一个基于 npm 的 JavaScript 相机库,可以轻松地将相机集成到您的前端...

    3 年前
  • npm 包 noobgl-matrix 使用教程

    在前端领域中,我们经常需要处理各种矩阵计算,例如线性代数、图形处理、物理模拟等。而 noobgl-matrix 则是一个非常优秀的 npm 包,提供了丰富的矩阵操作 API,帮助我们轻松地完成这些计算...

    3 年前
  • npm包universal-matrix使用教程

    前言 作为一名前端工程师,我们在日常开发中或多或少都会用到各种各样的npm包。今天给大家介绍一下一个好用的npm包:universal-matrix。 universal-matrix是一个基于Jav...

    3 年前
  • npm 包 generator-sdgreactmpawebapp 使用教程

    在前端开发过程中,我们经常需要创建新的项目并进行配置。为了方便和快速地进行项目初始化和配置,我们可以使用 npm 包 generator-sdgreactmpawebapp。

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

    Kubernetes Dashboard 是一个基于 Kubernetes 的 Web 用户界面,它允许用户以图形化界面的方式管理和监控 Kubernetes 集群。

    3 年前
  • npm 包 ngx-enhance-credit-cards 使用教程

    前端开发中,我们经常需要对信用卡相关信息进行完善的验证,比如信用卡类型、过期时间等。而 ngx-enhance-credit-cards 就是一个非常方便、实用的 npm 包,它能够精确地验证信用卡信...

    3 年前
  • npm 包 mocha-enzyme-pack 使用教程

    在前端开发中,测试是一个不可或缺的部分。其中,自动化测试是最常用的方式之一。Mocha 与 Enzyme 联合使用,成为了前端自动化测试的标配。然而,安装、配置、初始化这些步骤都需要开发者耗费不少时间...

    3 年前
  • npm 包 react-native-swipeable-tabs 使用教程

    随着移动端应用的兴起,前端开发工程师对于移动端应用的开发需求也越来越高。其中,React Native 是一种使用 JavaScript 语言开发的移动应用开发框架,它使得前端工程师可以使用相同的代码...

    3 年前
  • devcamp-js-footer 包使用教程

    本文介绍了前端界面开发中一个基本的 npm 包 devcamp-js-footer,包含引入、使用、配置等方面,通过本文的阅读和实践,将会帮助读者更好地理解和使用该 npm 包。

    3 年前
  • npm 包 y9-node-redis-mq 使用教程

    y9-node-redis-mq 是一个 Node.js 的消息队列工具,基于 Redis 实现,用于实现分布式任务、广播消息等场景。 本文将介绍 y9-node-redis-mq 的使用方法,包括安...

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

    简介 edge-effects 是一个用于在网页边缘添加阴影效果的 npm 包,其使用简单方便且可自定义效果。本文将详细介绍 edge-effects 的使用方法并提供示例代码。

    3 年前

相关推荐

    暂无文章