react发送邮件

mailing 是一个使用react构建，测试，发送邮件的框架。使用方法如下：

1. 安装mailing-core相关依赖和环境

yarn add mailing-core mjml mjml-react nodemailer &&\
yarn add --dev mailing @types/mjml @types/mjml-react @types/nodemailer

2. 运行npx mailing 开启服务器，通过脚手架创建emails目录结构。

3. 配置邮件端口和相关认证信息。

const transport = nodemailer.createTransport({
  host: "smtp.sendgrid.net",
  port: 587,
  auth: {
    user: "apikey",
    pass: process.env.SEND_GRID_KEY,
  },
});

4. 发送测试邮件

import { sendMail } from "emails";
import Welcome from "emails/Welcome";

sendMail({
  subject: "My First Email",
  to: "tester@example.com",
  cc: "tester+cc@example.com",
  bcc: ["tester+bcc@example.com", "tester+bcc2@example.com"],
  component: <Welcome firstName="Amelita" />,
});

使用jest测试邮件发送

import { sendMail } from "emails";
import { getTestMailQueue, clearTestMailQueue } from "mailing/core";
import IssueNotification from "emails/IssueNotification";

describe("Example API", () => {
  it("sends an email when an issue is ready for review", () => {
    await clearTestEmailQueue();

    // SOMETHING THAT WILL SEND AN EMAIL e.g.
    // sendMail({
    //   to: "someone@something.com",
    //   subject: "test",
    //   component: <IssueNotification />
    // });

    const emails = await getTestMailQueue();
    expect(emails.length).toBe(1);
    expect(emails[0].subject).toMatch("Re: An issue title");
    expect(emails[0].html).toMatch("READY FOR REVIEW");
    expect(emails[0].html).toMatch("ready for QA");
  });
});

命令行cli

mailing init 初始化项目，开启服务
mailing preview 启动服务器预览
mailing 初始化和运行

总结

• 带有 React 组件的电子邮件模板
• 跨客户端工作的 MJML 组件（Outlook！）
  = 具有实时重新加载功能的预览服务器以实现快速开发
• 开发模式在浏览器中打开电子邮件而不是发送
• 确保电子邮件发送并具有正确内容的测试模式
  -与 js 框架如 next.js、redwood.js、remix 配合得很好
  -用 TypeScript 编写，灵感来自 Ruby on Rails 的 Action Mailer