如何在Angular6应用的构建系统中将MJML邮件模板转为HTML

嘿，刚好我之前在Angular项目里处理过类似的MJML转译需求，给你几个实用的方案，从简单到进阶都有：

方案一：用MJML CLI + npm脚本（最快捷） #

这是最容易上手的方式，不需要额外的构建工具配置，直接用官方的MJML命令行工具：

1. 先确保已经安装了MJML CLI（如果还没装的话）：

npm install mjml-cli --save-dev

2. 在你的package.json里添加一个专门处理MJML转译的脚本，同时把它和Angular的构建流程绑定：

"scripts": {
  "build:mjml": "mjml src/app/mail-templates/*.mjml -o src/app/mail-templates/html/ --minify",
  "build": "npm run build:mjml && ng build",
  "start": "npm run build:mjml && ng serve"
}

• 解释一下这个命令：mjml后面是你的MJML模板文件路径（这里假设所有MJML都在src/app/mail-templates/下），-o指定转译后的HTML输出目录，--minify可以让输出的HTML自动压缩，可选。
• 这样每次执行npm run build或者npm start时，都会先把所有MJML文件转成HTML，再执行Angular的构建/启动命令。

方案二：用Gulp实现更灵活的转译流程（适合复杂需求） #

如果需要监听MJML文件变化自动转译，或者有更多自定义处理逻辑，可以用Gulp来搭建任务流：

1. 安装依赖：

npm install gulp gulp-mjml mjml --save-dev

2. 在项目根目录新建gulpfile.js，编写转译和监听任务：

const gulp = require('gulp');
const mjml = require('gulp-mjml');
const mjmlEngine = require('mjml');

// 转译MJML到HTML的任务
gulp.task('build-mjml', function() {
  return gulp.src('./src/app/mail-templates/*.mjml')
    .pipe(mjml(mjmlEngine, {
      minify: true,
      validationLevel: 'strict' // 开启严格校验，可选
    }))
    .pipe(gulp.dest('./src/app/mail-templates/html/'));
});

// 监听MJML文件变化，自动重新转译
gulp.task('watch-mjml', function() {
  gulp.watch('./src/app/mail-templates/*.mjml', gulp.series('build-mjml'));
});

// 默认任务：执行转译
gulp.task('default', gulp.series('build-mjml'));

3. 更新package.json的脚本，把Gulp任务和Angular流程结合：

"scripts": {
  "build:mjml": "gulp build-mjml",
  "watch:mjml": "gulp watch-mjml",
  "build": "npm run build:mjml && ng build",
  "start": "npm run watch:mjml & ng serve"
}

这样启动开发服务器时，只要修改MJML文件，对应的HTML就会自动更新，不用手动重新构建。

方案三：集成到Angular Webpack配置（进阶） #

如果你的项目已经自定义了Webpack配置，可以添加MJML loader来让Webpack自动处理MJML文件：

1. 安装mjml-loader：

npm install mjml-loader --save-dev

2. 在自定义的Webpack配置文件里添加loader规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.mjml$/,
        use: [
          'html-loader',
          'mjml-loader'
        ]
      }
    ]
  }
};

3. 然后在Angular组件里就可以直接导入MJML文件，Webpack会自动把它转成HTML：

import { Component } from '@angular/core';
import mailTemplate from './welcome.mjml';

@Component({
  selector: 'app-mail-sender',
  template: mailTemplate
})
export class MailSenderComponent {}

这种方式适合需要在组件中直接使用MJML模板的场景，不用提前转译。

注意事项 #

• 转译后的HTML文件如果需要作为静态资源使用，记得在angular.json的assets配置里添加输出目录，确保构建时会复制到dist文件夹：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/app/mail-templates/html"
]

• 可以根据自己的项目结构调整路径，确保MJML源文件和输出HTML的路径符合你的项目规范。

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