Project

jekyll-plugin-frontend-build

0.0
No commit activity in last 3 years
No release in over 3 years
jekyll-plugin-frontend-buildriboseinc/jekyll-plugin-frontend-buildHomepageDocumentationSource CodeBug Tracker
Jekyll plugin that post-processes static assets with Babel
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Popularity
Downloads
8,120
Stars
0
Forks
1
Watchers
10
 Releases
Current version
0.0.3
Total releases
3
First release
2019-08-17
Latest release
2020-04-11
 Issues
Open Issues
2
Closed Issues
1
Total Issues
3
Issue Closure Rate
33%
 Pull Requests
Open Pull Requests
1
Closed Pull Requests
0
Merged Pull Requests
0
Pull Request Acceptance Rate
0%
 Development
Primary Language
Ruby
Licenses
MIT
Average date of last 50 commits
2019-10-02
Reverse Dependencies
1

 Dependencies

Development

rake
~> 12.0
rubocop
~> 0.50

Runtime

jekyll
~> 4.0
 Project Readme

Jekyll frontend build plugin

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:

  • Post-process the CSS with at least auto-prefixer (#2)

  • Combine front-end assets into a few packages (bulk of JS, bulk of CSS) and minify it (#3)

  • Make source asset directory (directories) configurable

  • (?) Use Web components, e.g. Polymer

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:

package.json
{
  "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"
  }
}
babel.config.js
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.

Including Babel polyfill

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

Troubleshooting

ReferenceError: regeneratorRuntime is not defined

This might happen in worker context.

Solution: include Babel polyfill before your code (see the Including Babel polyfill section).

Symbol or Symbol.iterator is not defined

This might happen in browser window context.

Solution: include Babel polyfill before your code (see the Including Babel polyfill section).