在前端开发中，模板引擎是一种非常实用的工具，它可以让我们更容易地生成 HTML 代码。而 browserify-jst 是一个可以将 Underscore 或 Lodash 模板转换成 CommonJS 模块的 npm 包，可以让我们更高效地使用模板引擎。
安装
首先，我们需要安装 Node.js 和 npm。然后，在命令行输入以下命令来安装 browserify-jst：
$ npm install browserify-jst
使用
在脚本中使用
在脚本中使用 browserify-jst，我们需要这么写：
var jstify = require('browserify-jst');
var b = browserify();
b.transform(jstify);这里的 b 是一个 browserify 的实例，通过 transform 方法来添加 jstify 转换器。
在模板文件中使用
我们假设有一个名为 template.html 的 Underscore 模板文件，它的内容如下：
<div class="person"> <span>Name: <%= name %></span> <span>Age: <%= age %></span> <span>Email: <%= email %></span> </div>
我们可以将它转换成 CommonJS 模块并导出：
var _ = require('underscore');
var template = _.template(require('./template.html'));
module.exports = function (data) {
return template(data);
};这样，我们就可以在脚本中使用这个模板了：
var render = require('./render');
var html = render({
name: 'Tom',
age: 18,
email: 'tom@example.com'
});
document.body.innerHTML = html;在命令行中使用
如果我们想在命令行中使用 browserify-jst，可以这么写：
$ browserify -t browserify-jst template.js > bundle.js
这里的 template.js 就是上面说的模板文件，bundle.js 则是输出的 JavaScript 文件名。
示例代码
为了更好地理解 browserify-jst 的使用方法，我们可以看一下下面的示例代码，它实现了一个简单的人员列表：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------- ------------ ------- ------ --- --------------- ------- ------------------------- ------- -------
-- -------------------- ---- -------
-- -------
--- ------ - --------------------
--- ---- - -
-
----- ------
---- ---
------ -----------------
--
-
----- --------
---- ---
------ -------------------
-
--
--- ---- - ---
--- ---- - - -- - - ------------ ---- -
---- -- ----------------
-
----------------------------------------- - -----// render.js
var _ = require('underscore');
var template = _.template(require('./template.html'));
module.exports = function (data) {
return template(data);
};<!-- template.html -->
<div class="person">
<h2><%= name %></h2>
<ul>
<li>Age: <%= age %></li>
<li>Email: <%= email %></li>
</ul>
</div>我们可以在命令行输入以下命令来生成 bundle.js：
$ browserify -t browserify-jst main.js > bundle.js
然后，在浏览器中打开 index.html，就可以看到人员列表了。
指导意义
使用 browserify-jst 可以让我们更高效地使用模板引擎，提高前端开发效率。它还可以让我们避免在 HTML 中写过多的脚本，使得 HTML 更加清晰易读。同时，通过对示例代码的学习，我们还可以了解到 CommonJS 模块化开发的方法，以及 Underscore 模板的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8cccdc64669dde53da