parcel-plugin-handlebars-json 
【What is Parcel】【What is Handlebars】
Install
Using plugins in Parcel could not be any simpler. All you need to do is install them and save in your package.json. Plugins should be named with the prefix parcel-plugin-, e.g. parcel-plugin-foo. Any dependencies listed in package.json with this prefix will be automatically loaded during initialization.
Install with npm:
$ npm install --save parcel-plugin-handlebars-jsonInstall with yarn:
$ yarn add parcel-plugin-handlebars-jsonThe plugin will process any templated handlebars file extensions (.hbs, .handlebars and .html)
Examples
Configuration
The plugin has the following config defaults. These are required for handlebars to map all dependencies for compiling handlebars templates.
module.exports = {
data: 'src/markup/data',
"base-url": "",
decorators: 'src/markup/decorators',
helpers: 'src/markup/helpers',
layouts: 'src/markup/layouts',
partials: 'src/markup/partials'
};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.
module.exports = {
data: 'views/json',
"base-url": "",
helpers: 'views/tools',
layouts: 'views/templates',
partials: 'views/partials',
"precompiled-src": 'src/partials/precompiled',
"precompiled-dest": 'src/js/precompiled.js',
};Features
Reads form JSON
The original plugin has built in support for frontmatter yaml. I edited it to pull content from JSON files:
Source - content.json
{
"title": "This is a heading",
"desc": "this is a paragraph",
"names": [
"bob",
"jane",
"mark"
]
}
Source - example.hbs
{{!< mainlayout}}
<h1>{{title}}</h1>
<p>{{desc}}</p>
<ul>
{{#each names}}
<li>{{this}}</li>
{{/each}}
</ul>
Output - example.html
<html>
<body>
<h1>This is a heading</h1>
<p>this is a paragraph</p>
<ul>
<li>bob</li>
<li>jane</li>
<li>mark</li>
</ul>
</body>
</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.
Absolute and Relative File Paths / og:image & og:url
During compilation, Parcel converts all file paths into relative paths. This includes og:image and the og:url.
To keep these and other urls absolute, you must set the absolute path in the handlebars.config.js or hbs.config.js exports.
module.exports = {
"base-url": "" // SET URL HERE
};You can configure projects with multiple servers (e.g., those with staging and production urls) by:
- Setting a JSON object up with the different URLs:
const pathsObj = {
"staging1": "",
"staging2": "",
"prod1": "",
"prod2": "",
"local": "./"
}- Setting an ENV variable (in this case,
TARGET) on build in the package.json file:
{
"staging-one": "set TARGET=staging1&&npm run...",
"staging-two": "set TARGET=staging2&&npm run...",
"prod-one": "set TARGET=prod1&&npm run...",
"prod-two": "set TARGET=prod2&&npm run..."
}- Use the ENV Variable tp select the urls from the URL object and export it from the
handlebars.config.jsorhbs.config.jsfile.
const path = pathsObj[process.env.TARGET];
module.exports = {
data: 'views/json',
"base-url": path,
helpers: 'views/tools',
layouts: 'views/templates',
partials: 'views/partials',
"precompiled-src": 'src/partials/precompiled',
"precompiled-dest": 'src/js/precompiled.js',
};- Use the
{{{base-url}}}handlebars expression to add the url.
<!-- For social media sharing / Open Graph -->
<meta name='robots' content='noindex, nofollow'/>
<meta property='og:url' content='{{base-url}}'/>
<meta property='og:image' content='<< Image path >>'/> <!-- Parcel will auto update with full path -->Environment Variables
During compilation the plugin will also pass the following variable(s) to the template:
- NODE_ENV
This can be useful when you want specific code to show up on production builds.
{{#eq NODE_ENV "production"}}
<!-- Google Tag Manager -->
<script>(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-XXXX');</script>
<!-- End Google Tag Manager -->
{{/eq}}Or perhaps the opposite
{{#isnt NODE_ENV "production"}}
<span class="dev-banner sticky full">
You're in DEVELOPMENT mode
</span>
{{/isnt}}