Giter Club home page Giter Club logo

handlebars-loader's Introduction

latest version downloads Build Status Coverage Status

handlebars-loader

A handlebars template loader for webpack.

Handlebars 4 now supported

Installation

npm i handlebars-loader --save

General Usage

webpack configuration

{
  ...
  module: {
    loaders: [
      ...
      { test: /\.handlebars$/, loader: "handlebars-loader" }
    ]
  }
}

Your JS making use of the templates

var template = require("./file.handlebars");
// => returns file.handlebars content as a template function

Details

The loader resolves partials and helpers automatically. They are looked up relative to the current directory (this can be modified with the rootRelative option) or as a module if you prefix with $.

A file "/folder/file.handlebars".
{{> partial}} will reference "/folder/partial.handlebars".
{{> ../partial}} will reference "/partial.handlebars".
{{> $module/partial}} will reference "/folder/node_modules/module/partial.handlebars".
{{helper}} will reference the helper "/folder/helper.js" if this file exists.
{{[nested/helper] 'helper parameter'}} will reference the helper "/folder/nested/helper.js" if this file exists, passes 'helper parameter' as first parameter to helper.
{{../helper}} {{$module/helper}} are resolved similarly to partials.

The following query (or config) options are supported:

  • helperDirs: Defines additional directories to be searched for helpers. Allows helpers to be defined in a directory and used globally without relative paths. You must surround helpers in subdirectories with brackets (Handlerbar helper identifiers can't have forward slashes without this). See example
  • runtime: Specify the path to the handlebars runtime library. Defaults to look under the local handlebars npm module, i.e. handlebars/runtime.
  • extensions: Searches for templates with alternate extensions. Defaults are .handlebars, .hbs, and '' (no extension).
  • inlineRequires: Defines a regex that identifies strings within helper/partial parameters that should be replaced by inline require statements.
  • rootRelative: When automatically resolving partials and helpers, use an implied root path if none is present. Default = ./. Setting this to be empty effectively turns off automatically resolving relative handlebars resources for items like {{helper}}. {{./helper}} will still resolve as expected.
  • knownHelpers: Array of helpers that are registered at runtime and should not explicitly be required by webpack. This helps with interoperability for libraries like Thorax helpers.
  • exclude: Defines a regex that will exclude paths from resolving. This can be used to prevent helpers from being resolved to modules in the node_modules directory.
  • debug: Shows trace information to help debug issues (e.g. resolution of helpers).
  • partialDirs: Defines additional directories to be searched for partials. Allows partials to be defined in a directory and used globally without relative paths. See example
  • preventIndent: Prevent partials from being indented inside their parent template.
  • ignorePartials: Prevents partial references from being fetched and bundled. Useful for manually loading partials at runtime
  • compat: Enables recursive field lookup for Mustache compatibility. See the Handlebars.js documentation for more information.
  • config: Tells the loader where to look in the webpack config for configurations for this loader. Defaults to handlebarsLoader.
  • config.partialResolver You can specify a function to use for resolving partials. To do so, add to your webpack config:
    handlebarsLoader: {
        partialResolver: function(partial, callback){
            // should pass the partial's path on disk to
            // to the callback. Callback accepts (err, locationOnDisk)
        }
    }

See webpack documentation for more information regarding loaders.

Full examples

See the examples folder in this repo. The examples are fully runnable and demonstrate a number of concepts (using partials and helpers) -- just run webpack in that directory to produce dist/bundle.js in the same folder, open index.html.

Change Log

See the CHANGELOG.md file.

License

MIT (http://www.opensource.org/licenses/mit-license)

handlebars-loader's People

Contributors

altano avatar atnartur avatar diurnalist avatar duncanbeevers avatar ericmatthys avatar ianmetcalf avatar kpdecker avatar kt0 avatar maadhattah avatar mattberkowitz avatar pcardune avatar rfunduk avatar ross-pfahler avatar simenb avatar sokra avatar toksea avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.