React app - ES6 external dependency

Question

I have a React application which is written in ES6/JSX and transpiled by the Webpack. Part of this application I want to extract into a separate repository (github) and include as a dependency in package.json. What I do not understand is if I need to create /dist directory with ES5 compiled version of that dependency before pushing it to github.

I thought in case I use Webpack for building the main application my dependency can also be written in ES6 without additional transpyling to ES5. And when I import something from that dependency it's included and transpiled in the main build. Am I right?

Not unless you specifically tell Webpack/Babel to transpile it. — Scimonster
– Scimonster, Commented Aug 9, 2017 at 17:42
@Scimonster :( so it means that dependency should have an entry point and provide transpiled version of itself in order to be consumed by other apps? — alex.mironov
– alex.mironov, Commented Aug 9, 2017 at 17:46
Yes. It ends up being simpler that way not to special case a dependency. — Scimonster
– Scimonster, Commented Aug 9, 2017 at 17:48

Mark Rabey · Accepted Answer · 2017-08-09 17:49:46Z

2

Typically Webpack configs ignore anything in your package.json. I would suggest building the other library as a totally independent library. If for some reason that's not an option, you could change your Webpack config to allow the other package to be transpiled. Something like this:

loaders: [
  {
    test: /\.jsx?$/,
    exclude: /node_modules\/(?!moduleName)/
    loader: 'babel',
    query: {
      presets: ['react', 'es2015']
    }
  }
],

This would stop Babel from transpiling all node modules except moduleName. Obviously, change that to the correct module name.

answered Aug 9, 2017 at 17:49

Mark Rabey

1,41510 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

alex.mironov Over a year ago

thank you nice. so it means each app that wants to use this dependency is responsible for tuning its webpack config to make transpiling work. hm, now I see why you suggest providing transpiled version of this lib

lilezek · Accepted Answer · 2017-08-09 17:54:19Z

1

You normally don't. I recommend you to extract your functionality as an independent library (already transpiled), and export every React component (or whatever functionality you are exporting), and then importing it from all the projects you need to.

Using npm you can import git based projects (including github) without the need of publish them into the npm database.

To do so, you can have an index.js with everything imported (from different files) and exported.

edited Aug 9, 2017 at 17:54

answered Aug 9, 2017 at 17:44

lilezek

7,4552 gold badges30 silver badges47 bronze badges

2 Comments

alex.mironov Over a year ago

Yes, it's something I'm trying to achieve. Do you know if it possible to build npm dependency without explicit entry point? I mean this lib I'm trying to build is just a set of reusable functions and I'd like to keep them separate.

lilezek Over a year ago

I don't know what do you mean. You can have in your package.json an entry point exporting every functionality you want to. Check the end of async library for example: github.com/caolan/async/blob/master/dist/async.js

Collectives™ on Stack Overflow

React app - ES6 external dependency

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related