Using named exports for 3rd party libs in Ionic2 rollup build

The Ionic dev team has changed the build processes in the beta and release candidate phases quite a bit and I had troubles to figure out solutions for including third party libs. Here is one of them.

With the version upgrade from beta.11 to RC0 the Ionic2 dev team changed the build system from Gulp to Rollup. The problem is that the cli commands “ionic serve” and “ionic build” use different ways to build the javascript.

Either one of the following worked for one of the two builds

import * as _ from 'lodash';

or

import {filter, map, chunk} from 'lodash';

But none of them for the two.

A solution for the two of them that worked for me was using named exports. A custom rollup.js config file can be used by adding a config property in the package.json:

"config": {
  "ionic_rollup": "./rollup.config.js"
}

And rollup.config.js needs to have namedExports set in commonjs section as following:

plugins: [
    builtins(),
    commonjs({
        include: [
            'node_modules/lodash/**',
        ],
        namedExports: {
            'node_modules/lodash/lodash.js': ['without', 'union', 'filter', 'isEmpty']
        }
    }),
    nodeResolve({
        module: true,
        jsnext: true,
        main: true,
        browser: true,
        extensions: ['.js']
    }),
    globals(),
    json()
]

Now lodash functions can be imported like this:

import {without, union} from 'lodash';