Mailing 是一个强大的工具，允许开发者使用 React 和 MJML 构建专业的 HTML 邮件模板。本文将介绍如何从零开始使用 Mailing 来创建、测试和发送邮件。

环境准备与安装

首先确保你的开发环境满足以下要求：

• Node.js 16+
• macOS 或 Linux 系统（暂不支持 Windows）
• npm 或 yarn 包管理器

# 使用 npm 安装
npm install --save mailing-core next react react-dom
npm install --save-dev mailing

# 或使用 yarn 安装
yarn add mailing-core next react react-dom
yarn add --dev mailing

初始化项目：

# 初始化项目并启动预览服务器
npx mailing

# 强制使用 TypeScript 模式
npx mailing --typescript

MJML 基础

MJML 是一种专门用于邮件设计的标记语言，解决了传统 HTML 邮件在不同客户端中的兼容性问题。

import React from 'react';
import { Mjml, MjmlBody, MjmlSection, MjmlColumn, MjmlText } from '@faire/mjml-react';

const GreetingEmail = ({ user }) => (
  <Mjml>
    <MjmlBody>
      <MjmlSection>
        <MjmlColumn>
          <MjmlText>Hello {user.name}!</MjmlText>
          <MjmlText>Welcome to our platform.</MjmlText>
        </MjmlColumn>
      </MjmlSection>
    </MjmlBody>
  </Mjml>
);

GreetingEmail.subject = ({ user }) => `Greetings ${user.name}!`;
export default GreetingEmail;

构建第一个邮件模板

接下来，我们创建一个简单的欢迎邮件模板。

// emails/WelcomeTemplate.tsx
import React from 'react';
import { Mjml, MjmlBody, MjmlSection, MjmlColumn, MjmlText } from '@faire/mjml-react';
import BaseLayout from './components/BaseLayout';
import Button from './components/Button';

interface WelcomeProps {
  username: string;
  activationUrl: string;
}

const WelcomeTemplate: React.FC<WelcomeProps> = ({ username, activationUrl }) => (
  <BaseLayout>
    <Mjml>
      <MjmlBody>
        <MjmlSection>
          <MjmlColumn>
            <MjmlText fontSize="20px" color="#333333">
              Hello, {username}!
            </MjmlText>
            <MjmlText fontSize="16px" color="#666666">
              Click the button below to activate your account.
            </MjmlText>
            <Button href={activationUrl}>
              Activate Account
            </Button>
          </MjmlColumn>
        </MjmlSection>
      </MjmlBody>
    </Mjml>
  </BaseLayout>
);

WelcomeTemplate.subject = ({ username }) => `Welcome ${username}!`;
export default WelcomeTemplate;

配置邮件传输服务

你可以选择 SendGrid、Postmark 或 SES 作为邮件传输服务。

import nodemailer from 'nodemailer';
import { buildSendMail } from 'mailing-core';

// SendGrid 配置
const transporter = nodemailer.createTransport({
  host: "smtp.sendgrid.net",
  port: 587,
  auth: {
    user: "apikey",
    pass: process.env.SENDGRID_API_KEY,
  },
});

export const sendMail = buildSendMail({
  transport: transporter,
  defaultFrom: "NoReply ",
});

实时预览与开发模式

启动预览服务器后，访问 http://localhost:3883 可以查看所有邮件模板的实时预览。

# 启动预览服务器
npx mailing preview

发送邮件示例

import sendMail from './emails';
import WelcomeTemplate from './emails/WelcomeTemplate';

async function sendWelcome(userEmail, userName) {
  try {
    await sendMail({
      to: userEmail,
      subject: `Welcome ${userName}!`,
      component: <WelcomeTemplate username={userName} activationUrl={generateActivationLink()} />,
    });
    console.log('Email sent successfully');
  } catch (error) {
    console.error('Failed to send email:', error);
  }
}

单元测试

为确保邮件内容正确，编写单元测试是非常重要的。

import { render } from '@testing-library/react';
import WelcomeTemplate from '../emails/WelcomeTemplate';

describe('Welcome Email', () => {
  it('renders correctly with user name', () => {
    const { getByText } = render(
      <WelcomeTemplate username="Test User" activationUrl="https://test.com" />
    );
    expect(getByText('Hello, Test User!')).toBeInTheDocument();
  });
});

生产环境部署

在生产环境中，请确保禁用预览功能，并设置正确的 API 密钥。

# .env.production
SENDGRID_API_KEY=production_key
DISABLE_PREVIEWS=1
NODE_ENV=production