Cannot perform rollup on this package. Package to ES2015 instead of commonjs?

[sunshineo]

Hi,

I'm having a problem perform rollup on this package. I know this may be a problem with the rollup-plugin-commonjs . I have already filed a issue at https://github.com/rollup/rollup-plugin-commonjs/issues/87

However, my question is how do I package this into ES2015 module instead of a commonjs module? I tried to change the tsconfig.json but did not figure out how to properly build it. Or I did not figure out how to properly install from my own github repo here https://github.com/sunshineo/angular2-infinite-scroll

I ended up doing some crazy manual changes that you can see at https://github.com/sunshineo/angular2-infinite-scroll/commits/master

Please help. Thank you very much!

[sunshineo]

Actually, I might have made a mistake when build into ES2015 module. I've confirmed that the changes I made at https://github.com/sunshineo/angular2-infinite-scroll/commits/es2015 works for rollup. I don't need rollup-plugin-commonjs anymore.

However, now I cannot properly load it in my local dev env when using systemjs. Because the angular2-infinite-scroll.js fails to load. It looks very different now because it is es2015. Rollup is happen with it but systemjs is now not.

[orizens]

sound like it has something to do with rollup. not sure.

[sunshineo]

@orizens , the current project cannot be rolled up by their rollup-plugin-commonjs is probably their issue, I've filed issue with them at https://github.com/rollup/rollup-plugin-commonjs/issues/87 . However how can we package this into a es2015 (es6) model? In that case, it will be rolled up directly by the rollup main project, and many other benefits I'm sure.

I tried to do this myself, but ended up with something unusable. https://github.com/sunshineo/angular2-infinite-scroll/commits/es2015 . I cannot install it when have

"angular2-infinite-scroll:"git+https://github.com/sunshineo/angular2-infinite-scroll#es2015"

in my package.json . I can't even import it correctly in my code.

[orizens]

this needs further investigation - what do you mean by package it to es6 model? is there other similar ng2 package that you're able to work with?

[sunshineo]

@orizens I'm no expert on JS standards. When I build my project to es2015 using typscript tsc, it can rollup (together with the angular2 core stuff) without the need of rollup-plugin-commonjs. Once I add some dependencies that are commonjs, for example I added angular2 material and this, I need to use the rollup-plugin-commonjs to rollup. And it worked with angular2 material but not this one.

[orizens]

this plugin isn't based on rollup and should work with tsc.

[sunshineo]

Hi @orizens . Rollup is not something you base on. https://github.com/rollup/rollup http://rollupjs.org/

Rollup is a next-generation JavaScript module bundler. Author your app or library using ES2015 modules, then efficiently bundle them up into a single file for use in browsers and Node.js – even if you use advanced features like bindings and cycles.

From what I can tell, this project is written in typescript and compiled into ES5 commonjs module according to configurations here https://github.com/orizens/angular2-infinite-scroll/blob/master/tsconfig.json I wonder if it is possible to compile it into ES2015 module that meet ES2015 standard. So that rollup can bundler it.

I tried, but I did not figure it out.

[sunshineo]

Hello, everyone. For this particular problem, I solved it using a feature called "namedExport" feature of the rollup common js plugin https://github.com/rollup/rollup-plugin-commonjs/issues/87