如何使用 Browserify + Gulp 要求 Underscore 模板答案

【问题标题】：How to require Underscore templates with Browserify + Gulp如何使用 Browserify + Gulp 要求 Underscore 模板
【发布时间】：2015-01-22 15:43:53
【问题描述】：

我正在使用 Browserify 和 Gulp 设置一个 Backbone 项目，但似乎无法弄清楚如何在我的模块中使用 Underscore 模板（不是 Handlebars）。我最接近的是使用“node-underscorify”（至少看到一些东西并且没有错误），但它不太正确..

gulpfile.js

var gulp       = require('gulp');
var browserify = require('browserify');
var source     = require('vinyl-source-stream');
var buffer     = require('vinyl-buffer');
var uglify     = require('gulp-uglify');
var gulpif     = require('gulp-if');
var sass       = require('gulp-sass');

var env = process.env.NODE_ENV || 'dev';

gulp.task( 'js', function() {

    var bundler = browserify({
        entries:   ['./dev/js/app.js'],
        paths:     ['./templates/'],                                
        transform: ['node-underscorify']
    });

    return bundler
        .bundle()
        .pipe( source( 'bundle.js') )
        .pipe( buffer() )
        .pipe( gulpif( env === 'prod', uglify() ) )
        .pipe( gulp.dest( './js/' ) );
});

home.html

<h3>Hello <%= name %></h3>

HomeView.js（通过单独的 Gulp 任务从 CoffeeScript 编译）

(function() {
  var $, Backbone, _;
  $ = require('jquery');
  _ = require('underscore');
  Backbone = require('backbone');
  Backbone.$ = $;

  module.exports = Backbone.View.extend({

    template: require('home.html'),

    el: '#content',

    initialize: function() {
      console.log("home initialize");
      this.render();
    },

    render: function() {
      this.$el.html(this.template({
        name: 'Gulp!'
      }));
      return this;
    }

  });

}).call(this);

当我运行应用程序并点击 HomeView 时，浏览器会显示看起来像模块的原始 JS 的内容，包括未编译的模板 (?)

module.exports = function(obj){ var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');}; with(obj||{}){ __p+='
Hello '+ ((__t=( name ))==null?'':__t)+ '

\n\n'; } return __p; };

我尝试将 Underscore 模板函数应用到所需文件，但会产生 JS 错误..

template: _.template( require('home.html') ),

花费数小时阅读各种博客文章，尝试不同的解决方案——非常感谢任何帮助！

【问题讨论】：

找到了一个基于此SO post 的解决方案。一旦安装了npm install brfs --save-dev，需要在视图var fs = require('fs'); 中要求它，然后可以通过template: _.template(fs.readFileSync('./templates/home.html', 'utf8')), 加载和编译模板。现在可以了，但我想它不是真正的“预编译”？乐于接受更好的解决方案！
该模块看起来像已编译的模板代码。您的package.json 中有任何下划线配置吗？你用的是什么版本的 node-underscorify？
我同意@Ben 的观点——这是编译后的模板。除了node-underscorify，你用的是什么版本的browserify？ node-underscorify 有一个相当“旧”版本的 browserify 作为其开发依赖项。
@Ben，JMM：感谢您的见解。版本应该是最新的，刚刚通过npm install 安装，如下："browserify": "^8.1.1" 和"node-underscorify": "0.0.14" 所以，听起来我需要使用更旧的 Browserify？如果是这样，还有其他好的方法吗？
我刚刚升级到我项目中的那些版本，它仍然有效。虽然，我正在使用 bundler.transform(underscorify.transform(...)) 而不是 transform 数组注册转换。

标签： javascript backbone.js underscore.js gulp browserify

【解决方案1】：

我遇到了同样的问题。我终于通过构建 example gulp recipe 来完成这项工作，但根据 Ben 的评论，我在 underscorify 上明确调用 transform()，而不是使用变换数组。

我还选择沿途重命名捆绑的文件并将其输出到与源相同的目录中。

这是我的最终工作代码：

gulpfile.js

gulp = require("gulp");
browserify = require("browserify");
watchify = require("watchify");
underscorify = require("node-underscorify");
rename = require("gulp-rename");
source = require("vinyl-source-stream");  
gutil = require("gulp-util");

mainBundler = watchify(browserify("./js/main.js"));
mainBundler.transform(underscorify.transform());
gulp.task("watchify-main", bundleMain);
mainBundler.on("update", bundleMain);
mainBundler.on("log", gutil.log);

function bundleMain() {
return mainBundler.bundle()
    .on("error", gutil.log.bind(gutil, 'Browserify Error'))
    .pipe(source(".js/main.js"))
    .pipe(rename("main-bundle.js"))
    .pipe(gulp.dest("./js/"));
};

home.html

 <h3>Hello <%= name %></h3>

main.js

template = require("./templates/home.html");

module.exports = Backbone.View.extend({
    template : template,

    el: "#content",

    initialize: function() {
        // initialize code
    },

    render: function() {
        // render code
    }
});

【讨论】：