Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Export react-scripts functionality #781

Closed
floriangosse opened this issue Sep 27, 2016 · 5 comments
Closed

Export react-scripts functionality #781

floriangosse opened this issue Sep 27, 2016 · 5 comments

Comments

@floriangosse
Copy link
Contributor

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
Copy link
Contributor Author

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
Copy link
Contributor

gaearon commented Sep 27, 2016

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
Copy link
Contributor Author

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
Copy link
Contributor

gaearon commented Sep 27, 2016

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
Copy link
Contributor Author

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).

@lock lock bot locked and limited conversation to collaborators Jan 22, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants