[Feature Request] ES Module for Rollup

[timrosskamp]

Hi,

first of all thanks for an amazing Slider! It's my new favorite, because it's so simple and elegant!

I'm using Rollup in my project to bundle all my JS together. Since siema is exported in umd I have to use the extension rollup-plugin-commonjs witch wraps the umd definition again to work with rollup.

When I use the source file witch is written in es6 modules directly I get a smaller bundle, because rollup can work with es6 modules better.

Would it be possible to build a separate siema.es.js file in the dist folder witch exports in standard es6 modules for module bundlers like rollup?

What do you think?

[pawelgrzybek]

Hi.

Thanks for using Siema. Sounds like a reasonable idea to me. Is it possible to link me some great resource that explains things step by step how rollup handle external resources?

Thanks Pawel

[timrosskamp]

I could not find any good resources about external modules in rollup.

But here is an explanation from the rollup wiki on how to serve an es module version of a package.

Basically you create a separate bundle file in the dist folder. For example: siema.es.js. And then you specifiy it in your package.json:

{
    "main": "dist/siema.min.js",
    "module": "dist/siema.es.js"
}

When thats done, webpack and rollup recognice the es6 module bundle and use that to optimise the build.

[bennypowers]

you could just load src/siema.js in rollup, it's a 0 dep es module already.

[pawelgrzybek]

Hi @bennypowers could you elaborate and give me some hint how to make it more rollup-friendly for other users?

Thanks for everything pals!

[bennypowers]

you can basically just copy src/siema.js to dist/siema.js, maybe minify if you want. Since siema.js just has a single export statement and no import statements, there's nothing fancy that rollup (or browsers) have to do. As long as you distribute siema.js as is, browsers can load it and rollup can bundle it

[bennypowers]

I'm going to be getting my hands wet with your library in a rollup project this week. I'll let you know if I have any insights

[timrosskamp]

I would suggest to at least run babel over it before copying it over to the dist folder.

[bennypowers]

Any browser that supports modules also supports es6 syntax. Babel would just complicate things. If authors want to run tooling, let them do it themselves.

[timrosskamp]

give me some hint how to make it more rollup-friendly for other users?

In the package.json you can define extra fields for modern bundlers using the module and jsnext:main fields. If those fields exists, rollup automaticly recognises them and uses those, instead of the main field.

[bennypowers]

Hey @pawelgrzybek @timrosskamp I needed this today so I went ahead and made a PR see https://github.com/rollup/rollup-plugin-babel for babel options

[vinkla]

I'm a bit late here but another idea is to take a look at the microbundle. It is a zero-configuration bundler for tiny modules, powered by Rollup.

https://github.com/developit/microbundle#readme