reduxjs / redux-devtools

DevTools for Redux with hot reloading, action replay, and customizable UI
http://youtube.com/watch?v=xsSnOQynTHs
MIT License
14.01k stars 1.16k forks source link

conditional imports #203

Closed tcurdt closed 8 years ago

tcurdt commented 8 years ago

When using jspm and babel the suggested approach for conditional imports is not working:

if (...) {
  module.exports = require('./configureStore.prod');
} else {
  module.exports = require('./configureStore.dev');
}

Making use of some features of ES6+ and working around others doesn't sound like a good idea to me anyway.

For those using jspm there is support for conditional exports directly through the jspm configuration:

http://martinmicunda.com/2015/10/26/conditional-module-loading-with-systemjs/

gaearon commented 8 years ago

Making use of some features of ES6+ and working around others doesn't sound like a good idea to me anyway.

Is there any particular workaround you suggest for Webpack and Browserify users? It's not like we're happy with those workarounds either. :-)

gaearon commented 8 years ago

In fact if you can look into using NormalModuleReplacementPlugin or something similar in Webpack depending on the configuration, that would be awesome.

gaearon commented 8 years ago

Closing as doesn't appear to be an issue with this repo. Hope my above comments help.

tcurdt commented 8 years ago

@gaearon well, it is - it doesn't work with jspm :)

IIUC conditional imports are just not part of ES6 anymore. So the only way forward is either to get rid of this approach or provide examples for the various environments (namely webpack, browserify and jspm) that allow pre-processing.

I am wondering if importing both and then relying on a conditional and dead code stripping could be enough - but I haven't tested that.

gaearon commented 8 years ago

@gaearon well, it is - it doesn't work with jspm :)

We are using conditional imports in the examples which use Webpack today. You are free to use a different conditional import technique in your project.

It's not like this project requires you using Webpack—it's just not scalable for me to support examples in 5 different build tools I don't know. Please feel free to create a separate repo with JSPM/Browserify/any other examples and we'll link to it. :-)

Presumably JSPM examples, if contributed and maintained by somebody, would use a different conditional import mechanism supported by JSPM. If JSPM doesn't support any such mechanism, it is an issue with JSPM, rather than our issue.

tcurdt commented 8 years ago

Well, let's put it that way - I think it would be great if (at least on the code level) the examples wouldn't use webpack specific features/workaround and would work on (forget jspm for the sake of the argument) standard ES6.

But I'll shut up now - just wanted to raise awareness that this can be a problem (and provide a link to the jspm work around).

gaearon commented 8 years ago

Standard ES6 just doesn't provide ways of doing conditional imports. It is more important for us to have conditional imports than to go all-ES6 in our examples. CommonJS is not something "non standard", in fact it's much more common standard than ES6 imports. I understand ES6 imports are the future but it's unfair to say examples depend on Webpack now—they depend on a CommonJS environment of which there are plenty today, and will be plenty tomorrow.

That said, if you are interested in fixing this, I wrote how: https://github.com/gaearon/redux-devtools/issues/203#issuecomment-164452442. If you are invested in this problem and would like to help, please do! Personally I don't have time for this and I don't see this as an urgent issue, but I would be very happy to accept this contribution.