Add ESM target

[manniL]

Heyho! Thanks for the awesome package.

Any chance we get an ESM target additionally to UMD and CJS? :relaxed:

[jeremyckahn]

Hi @manniL, thanks for filing an issue! I'm not really familiar with ESM modules, but I'd be happy to accept a PR so long as it doesn't create any backwards incompatibilities. Would you be willing to provide a PR for this?

[manniL]

Thanks for the fast response! Unfortunately, I'm not very familiar with ECMAScript modules as well, but I'm trying to get something up and running for it :blush:

[jeremyckahn]

Sounds like we'll both learn something, then! I'll keep an eye out for your PR and work with you on it. 👍

[manniL]

Short update

Webpack is not capable of bundling ESM (and the author of webpack suggests not to bundle ESM. The alternative for bundling it anyway would be Rollup.

To get the desired tree shaking effect, it suffices to import from source instead of importing directly from the dist folder.

---

Comparison

import { tween } from 'shifty'

---

import { tween } from 'shifty/src/tweenable'

[jeremyckahn]

Ahh this is reminding me of #97. I remember I tried getting Rollup to work last year for that ticket, but I think I gave up because I didn't personally have a need for it (so I didn't have a sense of what "done" looked like) and the ticket lost momentum.

It sounds like a build process change may not be necessary and a direct import from src should get the job done?

It's a bit unclear to me what accepted community standard for this is!

[manniL]

I see! Well, I know that Rollup works well for library publishing (for example in the vue-i18n repo), but webpack is better for real apps because it supports code splitting very well.

Yeah, as long as the source code is "real ES2015" (without transform-object-rest-spread or other proposals), we can import directly from source. Otherwise, there would be a build step in between necessary.

I think there is no real standard by now. But as long as webpack can tree-shake the library in the end, either through bundled ESM or through the source, it's fine :speak_no_evil:

[jeremyckahn]

Ok, thanks for the thorough explanation!

as long as the source code is "real ES2015" (without transform-object-rest-spread or other proposals), we can import directly from source.

⬆️Good to know; I will keep this in mind for Shifty and my other libraries going forward.

It sounds like no change is needed here, so I will close this out. Thanks for digging into this!

[manniL]

No problem :relaxed:

I've encountered a library where transform-object-rest-spread is used and I found out that I can transpile the code on my side as well, which is more tedious, but possible if there is no other way to make tree shaking possible.