Can I publish ES6 to npm?

Recently I wrote a small library for fun, which implements styled-components pattern for CSS Modules. I had a dilemma: how should I publish it, should I compile it down to ES5 and CJS or UMD or publish more than one version at once, which tool to use for it. Previously I tried kcd-scripts (by Kent C. Dodds) and microbundle (by Jason Miller).

This time I thought it would be a way to much trouble for a toy project. So I went ahead and published it as ES6 (source code as is without minification or anything), but with node-style module resolution.

Strictly speaking, it is not consumable by the browser, because of node-style module resolution. It is not consumable by node, because node support of ES6 modules is behind the flag. It is only consumable by bundlers, like webpack (CRA for example) and Parcel (actually I haven't tested it).

In my case, I have external dependency (React), but for example, polished doesn't have external dependencies.

What are the downsides of publishing ES6? What your approach here? Tell me your thoughts

Photo by chuttersnap on Unsplash

Comments

[Anton Korzunov]

No you cant - there is no such thing as ES6.

What you can - you can publish as esmodules. These esmodules are not "ES Modules", aka import/export, but a special Babel target which targets some abstract browser, which does support these "ES Modules"(🤷‍♂️), plus stuff like async/await and generators(🔥), but not class members for example.

So - you can publish code in esmodules - import/export and language transpiled down to some "well-known" target. But any "special" babel plugin (or typescript) should do their job and disappear.

After publishing module that way you will have two problems:

• running code in nodejs/jest - as you said nodejs does not support that stuff well. Use esm for node, and jest-transform for Jest. Drawback - first run, yet without a cache, might be very slow.
• running code in a lower environment. Like IE11 if you still remember it. Personally I use devolution to de-evolute "ES6" bundle to whatever I need, adding all the polyfils by the way. Another way is to generate old and modern bundle, but that's not as easy.

So - as long as you are removing any "vendor specific" stuff(like stage-1 language features, or babel-plugins) from the package code - it would be ok 👍.

Parcel bundler and CRA would transpile everything automatically, out of the box.

[stereobooster]

This one may solve the problem github.com/WICG/import-maps#the-ba...

[Jochem Stoel]

I believe there is no problem publishing ES6 as you call it on NPM. I post stuff all the time that uses ES10 or Electron specific features. Besides, NPM was never browser-only anyway. Lots of stuff needs to be compiled before even using it.
The most important thing is that your package adds value and that it contains a readme.md so people at least know how and in what context to use it.

[Elliot]

Here's a resource for npm + modules: pika.dev/cdn.

It's a CDN that serves npm modules as es6 modules! I haven't tried it out, but it seems pretty cool.

[stereobooster]

So I tried it. Indeed it solves the problem. My module is ES6 (unminified, with node-style module resolution), and it works in the browser as is.

Pika CDN transpiled it for me and changed import React from"react" to import React from"https://cdn.pika.dev/_/react/v16" 👌

[Elliot]

that is really cool. Thanks for trying it out and posting an update!

[stereobooster]

Yeah, I want to look into this one. Need some free time to read through

[stereobooster]

More discussion about the subject

• github.com/molefrog/wouter#this-li...
• gist.github.com/Rich-Harris/51e1bf...