ES5 transpiling

[fiedl]

Issue #238: make webpacker create es5 code instead of es6 code

Changes

• Configure babel to include all necessary js files
• Prepare polyfills for later use, but do not include them, yet

Notes

• The neccessary update of webpacker to v4 and re-creation of the builder app has been dealt with in Establish webpack(er) and asset-pipeline workflows #343.

Babel es5 transpiling

In the builder app, we use webpacker v4, which, by default, is configured to transpile js code using babel in production.

However I've experienced huge issues with that, because, no matter what I did, babel did not transpile everything, but left loads of arrow functions (=>) un-transpiled, which do not work in ie11. Inspired by rails/webpacker#1239 (comment), I've discovered that our configuration did not include all necessary js paths in the scope that babel did run on.

Apparently, the paths that are considered by babel, are not taken from the config/webpacker.yml, but need to be added by hand:

// builder/config/webpack/production.js

const environment = require('./environment')
const babelLoader = environment.loaders.get('babel')

// Remove the `exclude`, which, by default, removes node_modules from babel transpiling:
delete babelLoader.exclude

// Add the other paths we need to run babel on:
const path = require('path')
babelLoader.include.push(path.resolve(__dirname, '../../../node_modules'))
babelLoader.include.push(path.resolve(__dirname, '../../../app/concepts/matestack/ui/core'))

// To inspect the paths:
console.log(babelLoader.include)

Then run rake webpack from the matestack-ui-core root directory.

Polyfills

Scope: Asset pipeline vs. webpack(er)

Users of the webpack(er) workflow transpile the js code on their own and make their own decisions regarding babel transpiling and the inclusion of polyfills.

For users of the asset pipeline, we provide ready-to-use assets including minified, transpiled js code of matestack-ui-core using the builder app. For these files, we need to consider the inclusion of polyfills here.

Filesize

With polyfills:

$ du -h vendor/assets/javascripts/dist/*.js
1,1M	vendor/assets/javascripts/dist/matestack-ui-core.js
256K	vendor/assets/javascripts/dist/matestack-ui-core.min.js

Without poylfills:

$ du -h vendor/assets/javascripts/dist/*.js
460K	vendor/assets/javascripts/dist/matestack-ui-core.js
136K	vendor/assets/javascripts/dist/matestack-ui-core.min.js

The babel online converter http://babeljs.io does not include polyfills. This is why the online-converted js file size is significantly smaller than the local one when including polyfills locally.

Do we need polyfills?

I've tested matestack with ie11 (in virtualbox): Currently, matestack-ui-core runs well without polyfillls.

Thus, due to filesize considerations, I'm deactivating polyfills for now in the builder app..

How to include polyfills

If we do need polyfills later, they can be activated by adding them to packs/matestack-ui-core.js:

// app/javascripts/packs/matestack-ui-core.js

// Polyfills:
import 'core-js/stable'
import 'regenerator-runtime/runtime'

import '../matestack-ui-core/index'

Then, run webpack using rake webpack from the matestack-ui-core root directory.

Development vs. production

By default, webpacker is configured to use babel es5 transpiling only in production. However, above filesize experiment (where the min version corresponds to production, the non-min version to development) shows that polyfills are also included in development.

Thus, when testing internet explorer, you need to require the production asset manually in your main application:

// app/assets/javascripts/application.js

// Production:
//= require 'dist/matestack-ui-core.min'

// Auto (default):
//= require 'matestack-ui-core'