Question

我正在使用browserify和knockout，并且正在尝试为敲除组件模板加载html文件。我有浏览器成功加载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中使用浏览器来处理.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组件一起使用

2 个答案: