Gathering detailed insights and metrics for handlebars-mix
Installations
npm install handlebars-mixDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
16.13.0
NPM Version
8.1.0
Releases
Unable to fetch releases
Contributors
1
Unable to fetch Contributors
Languages
1
JavaScript
JavaScript (100%)
Developer
cfarhad
Download Statistics
Total Downloads
532
Last Day
3
Last Week
6
Last Month
15
Last Year
137
GitHub Statistics
3 Stars
6 Commits
1 Watching
1 Branches
1 Contributors
Maintainers
1
Package Meta Information
Latest Version
1.0.2
Package Id
handlebars-mix@1.0.2
Unpacked Size
13.25 kB
Size
5.07 kB
File Count
16
NPM Version
8.1.0
Node Version
16.13.0
Total Downloads
Cumulative downloads
Total Downloads
532
Last day
200%
3
Compared to previous day
Last week
-25%
6
Compared to previous week
Last month
87.5%
15
Compared to previous month
Last year
29.2%
137
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
3
Dev Dependencies
3
Versions
handlebars-mix plugin for Laravel-mix
you can use this plugin for compile handlebars templates to html
install
1npm install --save handlebars-mix
or
1yarn add handlebars-mix
Usage
in your webpack.mix.js
1const mix = require('mix'); 2require('handlebars-mix'); 3 4mix.handlebars('**/*.hbs', '/public/pages/*.html');
Parameters
- Input: multiple files:
**/*.hbsor single file:/src/pages/index.hbs - output: multiple files:
/public/*.htmlor single file:/public/index.html
example
Configuration
The plugin has the following config defaults. These are required for handlebars to map all dependencies for compiling handlebars templates.
1module.exports = { 2 data: 'src/markup/data', 3 decorators: 'src/markup/decorators', 4 helpers: 'src/markup/helpers', 5 layouts: 'src/markup/layouts', 6 partials: 'src/markup/partials', 7};
Custom Configuration
If you would like to enforce your own folder structure simply create handlebars.config.js or hbs.config.js in your project root.
1module.exports = { 2 data: 'views/json', 3 helpers: 'views/tools', 4 layouts: 'views/templates', 5 partials: 'views/partials', 6};
Features
frontmatter
The plugin has built in support for frontmatter yaml. Processed yaml data will be passed into the templates before compilation. frontmatter yaml data will preferably be at the top of the template file such as the following exampl
source - eaxmple-hbs
1--- 2title: This is a heading 3desc: this is a paragraph 4names: 5 - bob 6 - jane 7 - mark 8--- 9{{!< mainlayout}} 10 11<h1>{{title}}</h1> 12<p>{{desc}}</p> 13<ul> 14{{#each names}} 15 <li>{{this}}</li> 16{{/each}} 17</ul>
output - example.html
1<html> 2 <body> 3 <h1>This is a heading</h1> 4 <p>this is a paragraph</p> 5 <ul> 6 <li>bob</li> 7 <li>jane</li> 8 <li>mark</li> 9 </ul> 10 </body> 11</html>
Handlebars Layouts
The plugin has built in support for handlebars-layouts. The advanced example shows how to take advantage of handlebars layouts. Please refer to their documentation for more information.
Handlebars Helpers
The plugin is also including all helpers found in the npm package handlebars-helpers. Please refer to their documentation for example usages.
Note
| you can not use multiple files and compile their to single file
run html files
1const mix = require('laravel-mix'); 2const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); 3 4mix.webpackConfig(() => { 5 return { 6 plugins: [ 7 new BrowserSyncPlugin({ 8 host: 'localhost', 9 port: 3003, 10 watch: true, 11 server: { baseDir: ['dist'] } 12 }) 13 ] 14 }; 15});
No vulnerabilities found.
No security vulnerabilities found.