模块间共享Handlebars模板遇路径问题：如何跨模块引用模板？

硬写相对路径很容易因为目录层级变化失效，试试下面几种更可靠的方法：

1. 配置Handlebars的Partial查找目录 #

在你的构建工具（Webpack、Gulp等）里，把所有需要共享的模板目录添加到Handlebars的partial搜索路径中，引用时直接用模板文件名即可，不用写复杂的相对路径。

以Webpack + handlebars-loader为例，配置示例：

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.hbs$/,
        loader: 'handlebars-loader',
        options: {
          partialDirs: [
            // 当前模块的模板目录
            path.resolve(__dirname, 'src/module-one/templates'),
            // 其他模块的模板目录
            path.resolve(__dirname, 'src/other-module/templates/folder')
          ]
        }
      }
    ]
  }
};

配置完成后，直接引用模板名：

<div class="module-one-container">
    {{> my_template}}
</div>

2. 使用项目根目录绝对路径 #

如果你的构建工具支持解析根路径（以/开头），可以直接用从项目根出发的绝对路径引用模板，避免层级计算错误：

<div class="module-one-container">
    {{> /src/other-module/templates/folder/my_template}}
</div>

注意：部分工具可能需要额外配置才能识别根路径的模板引用。

3. 配置路径别名 #

在构建工具中给目标模板目录设置别名，引用时用别名代替冗长的路径，更直观也更易维护。

以Webpack为例，配置别名：

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '@shared-templates': path.resolve(__dirname, 'src/other-module/templates/folder')
    }
  }
};

引用时直接使用别名：

<div class="module-one-container">
    {{> @shared-templates/my_template}}
</div>

如果handlebars-loader不直接识别别名，可能需要在loader配置中额外处理别名解析。

另外，你提供的代码里有个小语法错误：模板引用的末尾多了一个右括号，正确写法应该是{{> ../../path/to/template/in/other-module/templates/folder/my_template}}，但即使修正，相对路径依然是不可靠的方案，更推荐上面的配置式方法。

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