NPM package for react components without babel

Question

I've build an UI component using react/ES6 and I need to reuse it for several other projects.

So I thought it could be a nice little npm package.

Turns out the default for npm packages seems to be:

Put ES6 modules under /src
Have a separate /lib where the transpiled files live
On every release transpile those modules to ES5

From my point of view this is some (needless?) overhead. The projects that will use the package will be written using ES6 as well, so there is no need to transpile the dependency.

Is there any way to bundle ES6 modules in an npm package and skip the transpile process - and accept the fact that projects need to use ES6 in order to to add this dependency?

Edit to clarify

@D-reaper right, fair enough. My problem is the importing side. I've build a package that includes Project.jsx. When attempting to import it I get the following error message:

ERROR in ./node_modules/foo/Project.jsx
Module parse failed: /../node_modules/foo/Project.jsx Unexpected token (14:11)
You may need an appropriate loader to handle this file type.

So my guess is, that webpack/babel can't handle the import of ES6 modules correctly, since they expect npm packages to include ES5 - is that a correct assumption? Can I work around that?

Those three steps are just a common convention, not a requirement. By all means you can pack everything in one file (and a package.json). — Mμ.
Thanks for your response @D-reaper, I updated the question accordingly — xijo
Yes! I ended up using github.com/insin/nwb since it does what I need: a simple workflow to put react components into npm packages. — xijo

xijo xijo · Accepted Answer · 2017-07-12T15:58:43

0

votes

I will use https://github.com/insin/nwb to put my react components into npm packages.

NPM package for react components without babel

2 Answers