This is a very minimal plugin that post-processes front-end 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/js
with Babel.
Caveats:
-
You may need to include Babel’s polyfill script explicitly.
Roadmap:
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 };
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.
For certain functionality, Babel requires a polyfill script to be executed before your code.
The plugin copies the pollyfill under _site/assets/js
,
so including it isn’t difficult.
-
To include Babel polyfill in normal browser window context:
<script src="/assets/js/babel-polyfill.js"></script>
-
To include Babel polyfill in Web worker context:
importScripts('/assets/js/babel-polyfill.js'); // The rest of the code
This might happen in worker context.
Solution: include Babel polyfill before your code (see the Including Babel polyfill section).