通过 Browserify 加载 HTML 模板以与 knockout 组件一起使用

Question

我正在使用 browserify 和 knockout 并尝试为 knockout 组件模板加载 html 文件。我已经 browserify 成功加载 javascript 个文件，但我不清楚如何让它加载 html 个文件。

我正在尝试做这样的事情：

(function() {
  var ko = require('./lib/knockout/dist/knockout.js');
  var authenticationViewModel = require('./viewmodels/authentication.js');
  var authenticationView = require('./views/authentication.html');

  ko.components.register('authentication', {
    template: authenticationView,
    viewModel: authenticationViewModel
  });
})();

但是模板显然没有加载。有人可以向我解释一下这是如何实现的吗？

这就是我的 gulpfile.js 让 browserify 与 .js 文件一起工作的方法：

  gulp.task('browserify', function () {
    var browserified = transform(function(filename) {
      var b = browserify(filename);
      return b.bundle();
    });

    return gulp.src([paths.appJs])
      .pipe(browserified)
      .pipe(gulp.dest(paths.public));
  });

我正在研究 html-browserify 插件： https://www.npmjs.com/package/html-browserify

他们使用的示例如下所示：

gulp.task('js', function() {
  gulp.src('js/app.js')
    .pipe(browserify({
      insertGlobals: true,
      transform: html
    }))
    .pipe(concat('app.js'))
    .pipe(gulp.dest('./public/js'));
});

但我不清楚如何将此示例与我当前已经运行的代码相协调。

Answer 1

brfs应该是一个选项。

在我自己的一个应用程序中，我使用 gulp 读取一些模板文件，将它们组合成一个对象，并编写一个 JSON 文件，我将其加载到我的（浏览器化的）应用程序中。

Answer 2

我最终找到并使用了 partialify。它非常适合导入 html 文件作为依赖项。

  //Gulp Plugins
  var gulp = require('gulp');
  var browserify = require('browserify');
  var source = require('vinyl-source-stream');
  var partialify = require('partialify');

  //Browserify
  gulp.task('browserify', function() {
    return browserify()
      .add(paths.browserifyEntry)
      .bundle()
      .pipe(source('main.js'))
      .pipe(gulp.dest(paths.public));
  });

通过 Browserify 加载 HTML 模板以与 knockout 组件一起使用

Load HTML Template for use with knockout component via Browserify

javascript

knockout.js

browserify