如何在JHipster蓝图中交互上下文并解决模板错误

一、注入JHipster上下文 #

你的蓝图生成器必须正确继承JHipster官方的Angular生成器，才能自动注入完整上下文。在蓝图的generator.mjs中按如下方式实现：

import { AngularGenerator } from 'generator-jhipster/generators/angular';

export default class MyAngularBlueprintGenerator extends AngularGenerator {
  constructor(args, opts, features) {
    // 调用父类构造函数，完成上下文注入
    super(args, opts, features);
    // 此时this已绑定JHipster的上下文对象
  }
}

注意：如果未正确继承或调用super()，会导致上下文缺失，直接引发模板渲染错误。

二、获取上下文变量 #

在生成器代码中获取 #

通过this.context可以访问所有JHipster内置变量，比如实体配置、项目全局配置等：

async writing() {
  // 获取实体名称
  const entityName = this.context.entityClass;
  // 获取项目基础路径
  const basePath = this.context.baseName;
}

在模板中获取 #

JHipster使用EJS模板引擎，直接通过<%= 变量名 %>语法访问上下文变量，比如在Angular组件模板中：

<h1><%= entityName %> 管理页面</h1>

如果模板渲染报错"变量未定义"，优先检查：

• 生成器是否在renderTemplate时传入了this.context
• 变量名是否与JHipster上下文的属性名一致（可通过console.log(this.context)打印所有变量排查）

三、扩展上下文新增功能 #

直接添加自定义变量 #

在生成器的构造函数或prompting阶段，直接给this.context添加属性：

constructor(args, opts, features) {
  super(args, opts, features);
  // 新增固定值变量
  this.context.customButtonText = '导出数据';
}

之后模板里就能直接用<%= customButtonText %>调用。

通过用户输入扩展上下文 #

如果需要根据用户选择动态生成内容，可在prompting阶段添加自定义提问，并将答案存入上下文：

async prompting() {
  // 先执行父类的提问逻辑，确保基础上下文初始化
  await super.prompting();
  
  const customPrompts = [
    {
      type: 'confirm',
      name: 'enableCustomExport',
      message: '是否启用自定义导出功能？',
      default: false
    }
  ];
  
  const answers = await this.prompt(customPrompts);
  // 将用户选择存入上下文
  this.context.enableCustomExport = answers.enableCustomExport;
}

后续在模板或生成逻辑中，可通过<% if (enableCustomExport) { %>判断是否渲染对应功能代码。

四、模板渲染错误快速排查 #

1. 确认npm link生效：在目标项目中执行npm ls <你的蓝图包名>，检查是否指向本地蓝图目录
2. 验证上下文传递：在renderTemplate调用时，必须传入this.context作为第三个参数
3. 检查模板语法：确保EJS标签闭合正确，变量名无拼写错误
4. 打印上下文调试：在生成器的writing阶段添加console.log(this.context)，确认所需变量存在

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