NodeJS环境下Handlebars模板预编译与CSS内联构建时实现问询

完全能把CSS内联和Handlebars预编译这两步都放到构建阶段完成，这样运行时只需要调用预编译好的模板函数生成HTML，直接发送邮件就行，能大幅减少运行时的计算开销。下面给你详细讲实现思路和具体代码：

第一步：准备依赖 #

首先安装需要的工具包：

npm install handlebars juice fs-extra --save-dev

• handlebars：用来预编译模板
• juice：专门处理HTML的CSS内联（对邮件兼容性友好）
• fs-extra：比原生fs更方便的文件操作工具

第二步：编写构建脚本 #

创建一个构建脚本（比如build-email-templates.js），完成读取模板+注入CSS+内联样式+预编译模板+输出JS模块的全流程：

const fs = require('fs-extra');
const handlebars = require('handlebars');
const juice = require('juice');

async function buildEmailTemplates() {
  // 配置模板、CSS和输出路径（可以根据你的项目结构调整）
  const templateDir = './src/email-templates';
  const outputDir = './dist/email-templates';

  // 读取目录下所有Handlebars模板文件
  const templateFiles = await fs.readdir(templateDir);
  const hbsFiles = templateFiles.filter(file => file.endsWith('.hbs'));

  for (const hbsFile of hbsFiles) {
    const templatePath = `${templateDir}/${hbsFile}`;
    const cssPath = `${templateDir}/styles.css`; // 假设所有模板共用一套CSS，也可以为每个模板单独配CSS
    const outputPath = `${outputDir}/${hbsFile.replace('.hbs', '.template.js')}`;

    // 1. 读取模板和CSS内容
    const templateContent = await fs.readFile(templatePath, 'utf8');
    const cssContent = await fs.readFile(cssPath, 'utf8');

    // 2. 把CSS注入到模板的<style>标签中（如果模板本身没有<style>就直接添加）
    const templateWithCss = `<style>${cssContent}</style>${templateContent}`;

    // 3. 执行CSS内联处理——juice会自动把<style>里的样式转成元素的style属性
    // 可以配置选项，比如保留媒体查询适配移动端邮件
    const inlinedTemplate = juice(templateWithCss, {
      preserveMediaQueries: true
    });

    // 4. 预编译Handlebars模板成JS代码
    const precompiledTemplate = handlebars.precompile(inlinedTemplate);

    // 5. 把预编译后的代码包装成可导入的NodeJS模块
    const moduleContent = `
      const Handlebars = require('handlebars');
      module.exports = Handlebars.template(${precompiledTemplate});
    `.trim();

    // 确保输出目录存在
    await fs.ensureDir(outputDir);
    // 写入预编译好的模板文件
    await fs.writeFile(outputPath, moduleContent, 'utf8');

    console.log(`✅ 模板构建完成：${outputPath}`);
  }
}

// 执行构建脚本
buildEmailTemplates().catch(err => {
  console.error('❌ 模板构建失败：', err);
  process.exit(1);
});

第三步：运行时使用预编译模板 #

构建完成后，在你的邮件发送逻辑里，直接导入预编译好的模板函数，传入数据就能生成带内联样式的HTML：

const nodemailer = require('nodemailer');
const welcomeTemplate = require('./dist/email-templates/welcome.template.js');

// 生成邮件HTML
const emailHtml = welcomeTemplate({
  userName: '张三',
  verificationLink: 'https://your-app.com/verify'
});

// 发送邮件（示例用nodemailer，你可以替换成自己的邮件服务）
async function sendWelcomeEmail() {
  const transporter = nodemailer.createTransport({
    // 你的邮件服务配置
    service: 'Gmail',
    auth: {
      user: 'your-email@gmail.com',
      pass: 'your-app-password'
    }
  });

  await transporter.sendMail({
    from: '你的应用 <no-reply@your-app.com>',
    to: 'user@example.com',
    subject: '欢迎加入我们！',
    html: emailHtml
  });
}

sendWelcomeEmail();

一些额外的优化建议 #

• 如果不同模板需要不同的CSS，可以给每个模板配对应的CSS文件（比如welcome.css对应welcome.hbs），在构建脚本里动态匹配
• 运行时可以用handlebars.runtime代替完整的handlebars包，减少依赖体积：安装handlebars.runtime，然后把构建脚本里的require('handlebars')改成require('handlebars.runtime')
• 可以把构建脚本加到package.json的scripts里，比如"build:emails": "node build-email-templates.js"，方便一键构建

内容的提问来源于stack exchange，提问作者leros