handlebars.js - 我应该如何构建我的模块以使用 hbsfy 和 browserify？

Question

我想使用 browserify和 hbsfy Handlebars 转换为模块化我正在编写的 Web 应用程序中的 JavaScript。

使用 gulp，我设置了运行 browserify 和 hbsfy 的任务，以使用对我的模块进行分组的源结构将几个 js 和 hbs 文件编译为一个文件:

/src
  - /javascript
    - app.js
    - /module-one
      - module-one.js
      - module-one.hbs
    - /moduleTwo
      - module-two.js
      - module-two.hbs

然而，当从另一个模块引用一个模块时，这是有问题的——需要使用脆弱的相对路径，如果模块被移动或进一步嵌套，则需要更新这些路径。

子栈写在 Avoiding ../../../../../../..在他的(伟大的)browserify 手册中。在那里，他建议将应用程序模块存储在 node_modules 下的目录中。 .

很高兴我开始这样做，但很快就遇到了 hbsfy 不再编译我的模板的问题。根据 docs ，browserify 只会转换顶级文件，如果 global 只会转换 node_modules 中的文件。选项设置为 true .

这解决了我的问题，但文档指出:

Use global transforms cautiously and sparingly, since most of the time an ordinary transform will suffice.

我不相信我的用例不寻常——我应该以不同的方式存储我的模块吗？还是我错过了一 block 拼图？

Answer 1

我在 hbsfy 中找到了一个简单的例子，它可能对你有帮助 https://github.com/epeli/node-hbsfy/blob/master/example/index.js

这取决于您正在查看的框架是什么，如果您正在做 angularjs，您可以在 https://github.com/mallim/sbangular/blob/master/src/main/resources/js/login/LoginCtrl.js 中看到一个示例

在这种情况下，具体代码如下:

  app.run(['$templateCache', function($templateCache) {
    $templateCache.put('login.html', require('./login.html') );
  }]);

login.html 实际上与 LoginCtrl.js 在同一个文件夹中