Support custom babel presets & plugins via environment variables

Hello, I found an easy way to enable additional presets & plugins in my fork of react-scripts. I want to share it with others and the maintainer of this original repository may find this feature useful and add it to the main react-scripts.

Basically, what I did was just introducing two environment variables BABEL_PRESETS and BABEL_PLUGINS, which accept JSON encoded list of path strings. Users can enable any kind of presets/plugins by specify those two variables before they run npm start.

For example, I need to enable react-relay support. What I did is just execute this command before I start the development server:

export BABEL_PLUGINS="[\"`pwd`/plugins/relay-plugin.js\"]"

With my forked react-scripts (@philiptzou/react-scripts) and other related relay packages installed, the webpack server is able to handle Relay.QL syntax now.

I just noticed that we can use .env file to specify REACT_APP_ initial variables. It maybe a more elegant way to do this in the future.

[philiptzou]

Using .babelrc is more gentle and friendly than my above solution. And we can still have the default settings for everyone who doesn’t want or need customizations.

[spudly]

My 2¢:

I would love to have the ability to add custom presets. At the moment, my only option is to fork the repo. I also understand why you would want to wait to implement something like this.

When you are ready to support something like this, I’d like it to just let me configure babel the way I do in all my other projects (using the babel key in package.json, or a .babelrc file).

Would you (eventually) accept a pull request that would make the webpack config file autodetect a .babelrc or package.json/babel key and (if detected), use that config instead of babel-preset-react-app?