express-refractor v1.0.2
Keep Babel compatibility without sacrificing speed on modern browsers
The problem
Tools like Babel ensure that your JavaScript is compatible with older browsers, but serving these scripts to modern browsers is unnecessary, and they're often larger, too.
How Refractor solves it
Refractor runs on your Express server, and checks the User-Agent header to determine ES6 compatibility. If the browser supports ES6, Refractor can serve alternate script files to the same URL for different browsers.
For example,
let getAlertText = (name) => `Hello, ${name}!`
window.alert(getAlertText`world`)
becomes 444% larger when transpiled with Babel. There is no need to serve this to the browsers most people are using.
Setup
npm i express-refractor
Here is the shortest way of configuring Refractor:
const app = require('express')()
const Refractor = require('express-refractor')
app.use(Refractor.static('/www'))
app.listen(80, () => console.log('Server up!'))
In your site files, for ES6 scripts, name the compatible, Babel version scriptname.js
, and the shorter, ES6 version scriptname.es6.js
. Refractor will determine if the browser making the request supports ES6, and serve the appropriate script. If an ES6 version isn't found for some files, Refractor will serve the same script to all browsers.
Advanced Configuration
You can call Refractor.static
with an object instead of a path string to use a more advanced configuration. Here you can provide a 404 page URL, and a config
object; explained below.
path
is not optional, 404URL
and config
are.
app.use(Refractor.static({
path: '/www',
'404URL': '404.html',
config: { (See Below) }
}))
The config option is a set of custom rules for Refractor. For example, to detect some modern browsers which support Flexbox you could use:
{
flexbox: {
Chrome: 21,
Firefox: 28
}
}
This custom 'flexbox' rule matches when the user is on Chrome or Firefox major version 21/28 or above. Then, for example, you could create index.html
and index.flexbox.html
.
You can supply multiple custom rules within the config option.
For a list of browser names Refractor matches against, see ua-parser-js