sensordb2 e64a8defe5 3.17 | 1 年之前 | |
---|---|---|
.. | ||
example | 1 年之前 | |
node_modules | 1 年之前 | |
test | 1 年之前 | |
.npmignore | 1 年之前 | |
.travis.yml | 1 年之前 | |
LICENSE | 1 年之前 | |
README.md | 1 年之前 | |
index.js | 1 年之前 | |
package.json | 1 年之前 | |
runtime.js | 1 年之前 | |
test.sh | 1 年之前 |
Handlebars precompiler plugin for Browserify without magic.
Compiles Handlebars templates to plain Javascript. The compiled templates only have one copy of the Handlebars runtime so they are lightweight and fast!
Install hbsfy locally to your project:
npm install --save-dev hbsfy
You will also need Handlebars installed. Handlebars 1, 2, 3, and 4 are supported for now (use 4 for best results):
npm install --save-dev handlebars
Then use it as Browserify transform module with -t
:
browserify -t hbsfy main.js > bundle.js
where main.js can be like:
var template = require("./template.hbs");
document.body.innerHTML = template({ name: "Epeli" });
and template.hbs:
<h1>Hello {{name}}!</h1>
You can use --extensions
or -e
subarg option to configure custom extensions
for the transform:
browserify -t [ hbsfy -e html,htm ] main.js > bundle.js
You can specify how the templates are precompiled by using -p
or --precompiler
, which
might also be used with the -c
or --compiler
option, like so:
browserify -t [ hbsfy -p ember-template-compiler -c Ember.Handlebars ] main.js > bundle.js
By default the precompiler is the handlebars node module
and the compiler is "require('hbsfy/runtime')"
.
Options for the precompiler can be passed using a precompilerOptions
key.
Example:
Enable myUltimateHelper
only
browserify -t [ hbsfy --precompilerOptions [ --knownHelpersOnly --knownHelpers [ --myUltimateHelper ] ] ] main.js > bundle.js
See Handlebars API reference for details.
Using the --traverse
or -t
option will cause partials to be resolved using node's module resolution algorithm. Be sure to prefix relative paths with ./
or ../
as needed. Otherwise the algorithm assumes a node_module
is being referenced.
Example:
browserify -t [ hbsfy -t ] main.js > bundle.js
<!-- main.hbs -->
<div>{{> ./path/to/partial.hbs }}</div>
<!-- path/to/partial.hbs -->
<p>I'm a partial</p>
If you are using Common JS partial resolution (setting the --traverse
flag) and you are using Handlebars 4.0.0 or later, you can still use inline partials. Make sure to not use inline partial names that conflict with node_module
dependencies. The inline partial will be used over a dependency reference.
Transform can be configured from the package.json too.
{
"browserify": {
"transform": [
[
"hbsfy",
{
"extensions": [
"html"
],
"precompilerOptions": {
"knownHelpersOnly": true,
"knownHelpers": {
"myUltimateHelper": true
}
}
}
]
]
}
}
The precompiler
and compiler
keys are naturally available too.
See module-deps documentation for more information as this feature is implemented there (it's a part of Browserify itself).
The configure
method of the transform can be used to create new transforms
with different defaults.
var hbsfy = require("hbsfy").configure({
extensions: ["html"]
});
var browserify = require("browserify");
var b = browserify("./index.js");
b.transform(hbsfy);
b.bundle().pipe(fs.createWriteStream("./bundle.js"));
To register custom helpers, require the runtime and run registerHelper
to
create helper:
var Handlebars = require("hbsfy/runtime");
Handlebars.registerHelper("upcase", function(s) {
return s.toUpperCase();
});
Partials can be created by giving precompiled template to the registerPartial
function.
Handlebars.registerPartial('link', require("./partial.hbs"));
Checkout the example folder for details.
Note: if using the --traverse
option, partial registration is automatic.
This synchronous method can be used to enable all hsbfy functionality in another environment, such as node or a test runner (such as mocha).
// mocha-hbs.js
var fs = require("fs");
var hbsfy = require("hbsfy");
require.extensions['.hbs'] = function (module, filename) {
var file = fs.readFileSync(filename, "utf8");
var opts = { traverse: true };
return module._compile(hbsfy.compile(file, opts), filename);
}
$ mocha -r hbs:./mocha-hbs.js tests/
Remember to register your custom helpers as well! Ideally your templates themselves require
your helpers and runtime, and call registerHelper
. But if they don't, all helpers can be loaded at once as part of the require hook above:
// mocha-hbs.js
var fs = require("fs");
var hbsfy = require("hbsfy");
var runtime = require("hbsfy/runtime");
var helpers = require("./path/to/my/exported/helpers");
Object.keys(helpers).forEach(function (key) {
runtime.registerHelper(key, helpers[key]);
});
require.extensions['.hbs'] = function (module, filename) {
var file = fs.readFileSync(filename, "utf8");
var opts = { traverse: true };
return module._compile(hbsfy.compile(file, opts), filename);
}
This option accepts a function which takes one argument (the template file content) and returns a string which will be used as the source for the precompiled template object. The example below removes leading and trailing spaces to shorten templates.
hbsfy.configure({
processContent: function(content) {
content = content.replace(/^[\x20\t]+/mg, '').replace(/[\x20\t]+$/mg, '');
content = content.replace(/^[\r\n]+/, '').replace(/[\r\n]*$/, '\n');
return content;
}
});
@
prefix. #60--traverse
. #54processContent
option. #50findPartials
and compile
for use in utilities / test frameworks #49.null
nodes when traversing Handlebars AST.--traverse
). #47configure
method does not mutate the inner state of the module
anymore
handlebars-runtime
dependency and depend directly on
the handlebars
module as a peer dependency.
require("hbsfy/runtime")
instead of
require("handlebars-runtime")
.