How to Rollup + pollyfils

Ionic Framework ionic-v3
1

Soo i’m transitioning to Rollup from Webpack, in webpack i had 3 entries, pollyfils.ts, vendor.ts, and app.ts, so webpack did ok in dealing with the pollyfils file, then in html i just include the script tag for pollyfils.bundle.js and all green.

However in Rollup i didn’t find a way to make multiple entries, and the multiEntry plugin only extends to globbing and still bundles to the same file.

So i tried importing my pollyfils in top of my app.module.ts file but it get’s errors, here are first the intl one, then the web-animations-js one (after i commented out intl):

Uncaught ReferenceError: IntlPolyfill is not defined

image
Pasted image963×61 11.4 KB

How am i supposed to import this pollyfils with Rollup then?

context code:

// app.module.ts
import './pollyfils.ts';
...

// pollyfils
import 'intl/index.js';
import 'intl/locale-data/jsonp/en.js';
import 'web-animations-js';
1 Like
2

Can you provide a code samples or something? I’m not sure I’m following you.

Thanks,
Dan

3

Done, very simple setup, in webpack the pollyfils.ts file was an entry, then in html i would load it before the main bundle file and all working ok.

I updated the description.

4

If you need more context just let me know.

5

Okay, so you’re including the polyfills file into the app.module.ts. I think that is a good approach. Next step sounds like it is figuring out what’s going on with the polyfill not bundling correctly.

Is it this one? https://github.com/andyearnshaw/Intl.js/

Worst case, you can always include via a <script> tag.

Thanks,
Dan

6

Yeah, worse case i’ll have to include 1 tag per each pollyfill, external lib or plugin i decide to use, hope this is not the case.

As for the pollyfills are this ones:

I’m also trying to provide this ones in some sort of way, any hint? (Got i miss webpack)

  • Chart.js.
  • signature_pad.
  • comparev.
  • font-awesome (Previously done using the font-awesome-webpack package).

The first 3 used to be included with Webpack’s ProvidePlugin.

7

Chart.js and any javascript dependencies ideally can be imported into the app directly via npm and then imported into a .ts file. See the docs here.

Your best bet for font-awesome is to put the font files in a directory like assets/fonts. They’ll then be available in the www directory when the bundling process completes.

Thanks,
Dan

8

I think for font-awesome i’ll use the rollup copy plugin directly from npm to the www/assets directory, as for Chart.js i used the ProvidePlugin because it presented problems for me when just importing in the vendor.ts file when using webpack, thus i fixed using the ProvidePlugin so that those libs end up like a global import for webpack.

Tough in Rollup nothing like that exists i’ll have to try again with simple import and see what happens, however shouldn’t i be importing those in the top of the main.ts file or something like that?

9

So @danbucholtz i’m still reluctant to use the script tag way for those pollyfil, have you found anything about why rollup won’t play nice with them?

The current error in console makes me think web-animations-js issues are with minification, it states:

[14:23:20]  rollup: Use of `eval` (in /home/carlos/Carlos/OSGroup/startApp/node_modules/web-animations-js/web-animations.min.js) is strongly discouraged, as it poses security risks and may cause issues with minification. See https://github.com/rollup/rollup/wiki/Troubleshooting#avoiding-eval for more details

The error in web browser states:

image
Pasted image812×783 81.2 KB

The Intl issue doesn’t says nothing in the console, however the broser complains like:

image
Pasted image805×702 92.5 KB

1 Like
10

Any word on the IntlPolyfill is not defined problem with rollup? I’m having this problem as well.

11

@zakton5 Dude, i’m sorry to tell you this but… intl is a pollyfil, not an ES6 module.

It’s not like Rollup isn’t ready for the world, is the world the one that isn’t ready for Rollup, Rollup is based in the premise of three shaking ES6 modules, however most of the useful libs aren’t ES6 modules yet, most of them are in CommonJS format, though CommonJS plugins exists for Rollup, it’s very likely that it will have issues with that lib.

So basically your best bet with the pollyfils is to use the ionic configs for ionic-app-scripts to copy the pollyfil into the output folder and include it in your index.html as an script tag.

12

Yeah I knew it was a polyfill, but it used to be simple to import it and it was good to go. Thanks for the suggestion though. I’ve had to do the copying thing with multiple libraries now, so yeah, I guess I’ll just add another one lol thanks.

13

It was half of a joke, half to emphasize that intl isn’t an ES6 module, and Rollup deals poorly with non ES6 modules, if not at all.