Export react-scripts functionality

[floriangosse]

I started thinking about how I can extend the existing react-scripts functionality. E.g. I want to add some additional webpack plugins. I saw that #419 is the good move into an extendable system. But instead of forking react-scripts I want to extends or wrap it and benefit from the existing scripts.

My idea is to wrap the execution of the script in a function and pass the config and paths from outside:

function main (config, paths) {
 // ... build
}

This makes it possible to load the config and execute the script directly ...

if (require.main === module) {
 var config = require('./path/to/config');
 var paths = require('./path/to/paths');
 main(config, paths);
}

... or export the main function.

// ...
else {
 module.exports = main;
}

With this structure everyone can execute the script or use it like a library to provide own scripts.

I created a pull request (#776) with a few changes which make it possible to use it like a library. If someone want to checkout the code and has some hints what could be better feel free to let there a comment. :-)

[floriangosse]

I checked out the webpack config files in react-scripts and found out that these configuration also depends on ./config/paths.js. My thought was to reuse almost everything and extend the existing files by the missing stuff. But for me these would be also a change of the paths.
Maybe we could create a function which creates a webpack configuration like in react-boilterplate.

[gaearon]

With this structure everyone can execute the script or use it like a library to provide own scripts.

Can you provide more specific use cases please?

[floriangosse]

Sure.

We need two additional tools for building our applications:

• A custom webpack plugins which makes it possible to build our applications with some different functionality, resources, ...
• scss-loader for the same reason like the plugin

My thought was how I can extend react-scripts instead of fork it because we want to benefit from the great work of create-react-app. (at this point a big thank you)

For this it would be nice to use react-scripts as a library to create my-react-scripts.

Example

./config/webpack.config.dev.js

var merge = require('webpack-merge');
// This is the "original" configuration from react-scripts
var base = require('react-scripts/config/webpack.config.dev');
var MyCustomWebpackPlugin = require('my-custom-webpack-plugin');

module.exports = merge(base, {
 loaders: [
 { test: /\.scss$/, loader: 'style!css!postcss!sass' },
 ]
 plugins: [
 new MyCustomWebpackPlugin()
 ]
});

This configuration file can be used in ./scripts/start.js of my-react-scripts:

var start = require('react-scripts/scripts/start');
var config = require('../config/webpack.config.dev');
var paths = require('../config/paths');

start(config, paths);

In my project I would install my-react-scripts and use it in my scripts.

Maybe we can extract the functionality of the react-scripts scripts into a lib/ folder instead of making the scripts usable in different ways. This would makes react-scripts into a library too.

[gaearon]

I think you might have better luck with an approach like this custom-react-scripts.
Merging Webpack configs seems somewhat unsafe because we might move them or otherwise change them in incompatible ways.

[floriangosse]

Yes, the more I think about it I think it is not so useful and makes react-scripts more complicated and harder to maintain.

Thank you for you time. And thank you for your great work (not only for create-react-app).