【前端邮件模版福音】邮件模板一键生成Email HTML，让你不再需要写行内样式

场景：

后端需要一个HMTL邮件模板，让前端提供，但是邮件模板对内联或者引入CSS支持度并不理想，所以需要把写一些行内样式来调整，行内样式又不太能够复用样式和便捷性不太好

有了需求，使用Node.js写了一个小工具Demo

// 新建一个文件夹
npm init

安装依赖

npm install cheerio@1.0.0-rc.12 -s
npm install css@3.0.0 -s

index.js写入如下代码

const fs = require('fs');
const cheerio = require('cheerio');
const css = require('css');

// 读取HTML文件
const inputFile = 'input.html'; // 输入的HTML文件名
const outputFile = 'output.html'; // 输出的HTML文件名

fs.readFile(inputFile, 'utf8', (err, html) => {
    if (err) {
        console.error('Error reading file:', err);
        return;
    }

    // 加载HTML文档
    const $ = cheerio.load(html);

    // 获取所有内部样式表
    const styleTags = $('style');
    styleTags.each((index, element) => {
        const styleContent = $(element).text();

        // 解析内部样式表
        const parsedCSS = css.parse(styleContent);

        // 遍历样式规则，并将样式应用到相应的元素上
        parsedCSS.stylesheet.rules.forEach((rule) => {
            if (rule.type === 'rule') {
                const selectors = rule.selectors;
                const declarations = rule.declarations;

                // 查找匹配的元素，并将样式应用为行内样式
                selectors.forEach((selector) => {
                    $(selector).each((index, element) => {
                        const $element = $(element);

                        // 将样式规则应用为行内样式
                        declarations.forEach((declaration) => {
                            $element.css(declaration.property, declaration.value);
                        });

                        // 移除class名
                        $element.removeAttr('class');
                    });
                });
            }
        });

        // 删除内部样式表
        $(element).remove();
    });

    // 保存修改后的HTML文档
    fs.writeFile(outputFile, $.html(), 'utf8', (err) => {
        if (err) {
            console.error('Error writing file:', err);
            return;
        }

        console.log('Successfully!');
    });
});

写点测试模板

终端运行命令生成脚本

node index.js

如下图，已经生成了文件output，这文件就是给后端提供的模板Html，下次要改文件编辑input.html中的样式再运行 node index.js就可以生成新的模板了

生成内容，如下

这样一通操作，增强了邮件模板的可维护性，以便于持续开发

好了，写到这里，如果有问题，或者有更好的方法，欢迎留言交流。