Jekyll frontend build plugin
This is a very minimal plugin that post-processes frontend assets, enabling you to use the latest ES features with fewer worries about cross-browser compatibility.
This plugin depends on Node/NPM and currently uses Babel.
The plugin uses the “assets” directory in site source as input,
and _site/assets as output.
Current limitations:
-
As of now, it only processes JavaScript files under
assets/jswith Babel.
Caveats:
-
You may need to include Babel’s polyfill script explicitly.
Roadmap:
Requirements
This plugin requires Node & NPM to be available in Jekyll build environment.
Setting up
A quick way to use this plugin with a new site is to use the Jekyll site template.
Alternatively, to add this plugin to an existing site,
create the following files in your site root,
and run npm install afterwards:
{
"version": "1.0.0",
"main": "babel.config.js",
"dependencies": {
"@babel/cli": "^7.5.5",
"@babel/core": "^7.5.5",
"@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.5.5"
}
}const presets = [
[
"@babel/env",
{
targets: {
ie: "10",
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
},
],
];
module.exports = { presets };Using during development
The plugin will take effect if you run jekyll serve as usual.
Using in production/CI
Just make sure that Node/NPM are available in your environment,
and call npm install before building the site.
See .travis.yml in https://github.com/riboseinc/jekyll-site-skeleton
for an example.
Troubleshooting
ReferenceError: regeneratorRuntime is not defined
You may need to include Babel polyfills before your code.
The plugin copies the pollyfill under _site/assets/js,
so including it isn’t difficult.
-
If you’re getting this error in normal browser window context:
<script src="/assets/js/babel-polyfill.js"></script>
-
If you’re getting this error in Web worker context:
importScripts('/assets/js/babel-polyfill.js'); // The rest of the code
