Khan / aphrodite / 450
0%

DEFAULT BRANCH: master
Ran
Jobs 1
Files 8
Run time 156min
Badge
Embed ▾
README BADGES
x

If you need to use a raster PNG badge, change the '.svg' to '.png' in the link

Markdown

Textile

RDoc

HTML

Rst
450

Pull #281

travis-ci

web-flow 
Build with rollup instead of webpack

Rollup will produce a smaller and more optimized bundle than webpack,
and can be configured in a way that works perfectly for libraries, such
as Aphrodite. This will help to minimize the bundle size impact of using
this package, and may even give a small runtime speedup. For reference,
React 16 is built using Rollup.

Rollup does not allow Babel 5, so I also updated to Babel 6 at the same
time. In this update, I tried to take care to maintain the same list of
browser support that we have listed in the CSS prefixes that we build.
At some point, we probably want to unify this configuration via
browserslist. Issue:

  https://github.com/Khan/aphrodite/issues/239

I noticed that this Babel update caused branch coverage to drop a
little, and I was unable to fix it by adding a test that definitely
covered the missing branch. Thankfully, all I needed to do was add the
istanbul Babel plugin to fix this. This is the approach recommended by
the istanbul documentation:

  https://github.com/istanbuljs/nyc#use-with-babel-plugin-istanbul-for-babel-support

Along with this update, I decided to add an ES modules build since it
was easy enough. This will be used automatically by tools such as
webpack 2+ to import the ES6 module version directly. I think it still
makes sense to run these through Babel since most people don't run their
node_modules through Babel, so the main difference here is that the
import/export statements will not be compiled to require/module.exports.
This allows webpack to perform optimizations such as tree-shaking and
scope hoisting.

One risk to be on the lookout for when people update to this version is
that if you are using `require` to bring in Aphrodite with a version of
webpack that is ES modules capable, it will break. Those consumers will
need to switch to import instead. For this reason, I would be okay with
removing the `module` field from the package.json for an initial release
of the rollup build, and then we can add it later when the ecosystem has
time to catch up. This is the approach we landed on for react-waypoint:

1. https://github.com/brigade/react-waypoint/pull/220
2. https://github.com/brigade/react-waypoint/pull/223

The filesize of the dist builds before this change looked like:

```
 83K aphrodite.js
 84K aphrodite.umd.js
104K aphrodite.umd.js.map
 23K aphrodite.umd.min.js
204K aphrodite.umd.min.js.map
```

And after this change:

```
 72K aphrodite.js
 73K aphrodite.umd.js
108K aphrodite.umd.js.map
 20K aphrodite.umd.min.js
 93K aphrodite.umd.min.js.map
```

So it looks like the minified UMD build dropped from 24 KiB to 20 KiB.
Pull Request #281: Build with rollup instead of webpack

0 of 0 relevant lines covered (NaN%)

0.0 hits per line

Jobs
ID Job ID Ran Files Coverage
1 450.1 0
0.0
 Travis Job 450.1
Source Files on build 450