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 :( 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
Yes. It ends up being simpler that way not to special case a dependency. — Scimonster

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

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.

React app - ES6 external dependency

2 Answers