郵件開發二三事

郵件相容性問題#

自從進入公司以後，一直在負責郵件開發的工作。想起來寫第一封郵件的時候，用 html、css 復原了設計稿以後，一發送，人傻了。。。頁面由於相容性問題變得奇奇怪怪的。

上網搜索了一些資料以後，發現是郵件客戶端不支持最新的 html5、css3。甚至不支持 flex 佈局，更別說 grid 佈局了，只支持基礎的 table 佈局。對於一個高度依賴 flex 佈局的前端來說，不讓我寫 flex。那我還不如讓我去死😇。還有許許多多其他的相容性問題，具體可以參考
https://www.infoq.cn/article/fxglbktqax4uztloxzd3
https://www.caniemail.com/

mjml#

在那個時間點（2021 年），網上推薦的解決方案都是使用mjml 。摘段官網的定義： MJML is a markup language designed to reduce the pain of coding a responsive email. Its semantic syntax makes it easy and straightforward and its rich standard components library speeds up your development time and lightens your email codebase. MJML’s open-source engine generates high quality responsive HTML compliant with best practices. 簡單來說，mjml 就是針對郵件開發的組件庫，提供了各種各樣的組件以供使用。不用考慮相容性問題，它會自動相容各個郵件客戶端。

簡單學習了 mjml components 的用法以後，在官網的 try it alive 頁面開始了開發工作，然後將 mjml 代碼和轉譯後的 html 代碼複製到 git 倉庫實現備份。如此即完成了一個郵件的開發工作。

react-email#

在此後的 2 年時間裡，一直採用 mjml 的解決方案編寫著各種郵件，大概有 40 多封。速度是越來越快，但是使用過程中仍然有一些痛點，例如不夠自由、不夠工程化、不支持發送測試郵件等。

大約在一年之前，react-email release 了 1.0 版本，當時 twitter 上就有一些開發者安利，它的官方簡介是： A collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript. 你懂的，這對前端開發者來說，簡直無法拒絕。所以我也一直在默默關注，但是我一直都沒有投入使用。該怎麼說，公司的郵件頁面每次變化都不太大，直接 copy 已有的 mjml 代碼改一改就行了。還是自己的惰性在作祟😆

上周終於正式用起來了，確實解決了很多痛點，例如

集成更加系統化、工程化，支持組件抽象

可以使用 email export 命令導出轉譯後的 html 代碼。再結合 cloudflare pages 流水線，方便實現線上郵件預覽。
默認集成 Resend 支持在開發過程中隨時發送測試郵件，預覽真實效果。
支持 tailwind css，使得響應式頁面開發更加簡單

import { Button } from '@react-email/button';
import { Tailwind } from '@react-email/tailwind';

const Email = () => {
  return (
    <Tailwind
      config={{
        theme: {
          extend: {
            colors: {
              brand: '#007291',
            },
          },
        },
      }}
    >
      <Button
        href="https://example.com"
        className="bg-brand px-3 py-2 font-medium leading-4 text-white"
      >
        Click me
      </Button>
    </Tailwind>
  );
};

一些思考#

郵件開發中還有一些痛點，例如

如何實現多個郵件客戶端的實時預覽的支持（更好的開發體驗）
web font 的支持差，無法還原設計效果
由於相容性問題無論是 mjml 還是 react-email css 屬性繼承不符合直覺（點名批評 163 郵箱）
公司後端郵件發送集成的是 mailgun。仍然需要手動將郵件 html 代碼複製粘貼。Resend 是否是更好的選擇？

~~後記：這篇博客從有想法到下筆，隔了整整一周。我太懶了，以後還是要勤快點~~