Exclude node_modules from babel-loader

[reapp]

Exclude node_modules from babel-loader

[natew]

Great questions, the webpack.config.js is generated by reapp-pack, which is run by the command line interface based on the various build or run configs you have. I've worked on some documentation in both the getting started and reapp-pack repos, but need to make it better.

You can see your generated config if you add the debug flag to your command (reapp run -d or reapp build -d).

As far as excluding node_modules. It's a great idea and should be configurable. For now we just offer being able to replace all the loaders we provide wholesale, so you could do that.

I really want to exclude node_modules as well, but at the moment some of the reapp- modules are not ready for this. Basically, we need to create a build script for them when are ready for them to be published npm that will transform them to be node-compatable. They use some babel features.

I'm 100% for doing this, it's just a lot of work. One weekend I'll find the time though. It would save huge amounts of time off builds. I definitely want it to be done before the 1.0.

If you're willing to help I'd say go for it! Reapp-ui is the big one, it needs to maintain it's current structure, but be compiled before release. I think the react-router guys have some of this figured out. Something like putting everything in a /src directory and then on build it copies them all to the flat structure.

[natew]

@lazywei I just released reapp 0.8.6 with a fix for this. Since I use ES6 syntax pretty extensively in reapp-ui and a couple other reapp modules, and it would be a huge task and long-term overhead to convert them and maintain them without ES6, I came up with something different.

By default, reapp will now exclude everything in your package.json dependencies, except for a few reapp packages I've hardcoded. If you want another package parsed by babel, you can add an option for reapp-pack parseModules: [] with a list of the names of the modules.

I tested it out on our Kitchen sink and saw a roughly 7 second speedup on compile times (from ~17s - 10s) which is pretty awesome.

Thanks for reminding me about this. Let me know how it works for you.

[lazywei]

Awesome! I agree with you. I also use ES6 a lot, but turns out there are still some legacy packages that don't leverage ES6. I think this is indeed a good solution to exclude all my own npm_modules. Thanks for the efforts.

However, I think it is still necessary to build (either via gulp or webpack) reapp when releasing to npm. I'm also willing to help with this, and maybe we can start from provide a build script for reapp-ui? How do you think?

Thanks.

[natew]

It will automatically exclude all your npm modules besides the ones reapp needs, so you should get nearly full speedup.

I agree on building before going to npm but it is more work than I can afford. The problem is not getting the build to work, but also how it would affect my workflow.

For example in reapp-ui say we move everything to /src, and then have a prepublish hook that uses babel to compile it to the root directory. This would work, but now there's two things:

• Developing it locally now requires I run a watcher that watches /src and compiles
• That also requires docs for newcomers to understand how to develop with it, making it harder for them to come onboard
• Every reapp package that uses es6 would then also need the babel step and the watcher when working locally, meaning up to 6 watchers running in the background at all times

For me, that's a big overhead, and being a solo developer I need to be as effective as possible. If you have any thoughts I'd be open. Honestly I thought about just converting them back to non-es6 syntax, but I realized how much nicer my code is with it.

[williamwa]

is it possible to have a config, so in development mode, it use src/ folder, in production mode, it use build/ folder?

[natew]

When using reapp UI you do a lot of require('reapp-ui/components/Button') calls, which needs them to be in the right place. Perhaps webpack does have support for re-routing that though...

[natew]

Actually this has been fixed! Build times are far faster now.