I work on a team at PayPal that tries to make other teams more productive. One of the biggest problems we face is tooling. Every team has to set up and configure tooling for testing, client-side bundling, linting, etc. etc. etc. What invariably happens with this is developers have just enough time to get it working and then have to move on to other priorities. So the tooling is less than optimized. ๐ฑ Webpack configs work, but could be improved. Linters fall out of date and bugs that a good linting rule could have prevented get shipped. And who has the time to even think about setting up a typing tool like Flow??
At PayPal we have a project "generator" (it's really just a repo that you clone). An unfortunate truth of generators is that they only bootstraps the project. They leave you with all the config and the burden of keeping things up to date. And if the generator authors update the generator, what about updating all the users? ๐
It's a Sisyphean task...
One thing that has been awesome for the productivity of the entire React community has been create-react-app. If you're unfamiliar, create-react-app bootstraps react applications that have a great webpack build and jest for testing that supports babel and eslint. And it does this by leaving you with a single tool dependency and no configuration. That tool is called "react-scripts." This tool is a CLI with scripts for (among others) build and test. It couldn't be simpler (and if you think it could, then feel free to file an issue).
Inspired by this, I decided to start working on paypal-scripts. It's the same basic idea, with one major exception. According to create-react-app's core ideas:
The purpose of this tool is to provide the best experience for people getting started with React, and this will always be our first priority.
For PayPal however, the goal is to make developers more productive at shipping better products. This is why it comes with a great default configuration so most of the time you shouldn't need to configure anything. Big productivity boost. At the same time, we do need to cover more use cases if we're going to provide our engineers real value, so while create-react-app doesn't allow for custom configuration, paypal-scripts does.
There is a project called
react-app-rewired by
Tim Arney. It's awesome. However, I've taken a
different approach to making paypal-scripts configurable. Rather than allowing
you to have a config file that accepts config and lets you return your "rewired"
config, paypal-scripts will assume that you want the built-in configuration
unless you've configured things yourself. For example, if you add aย .babelrc
file or a babel property to your package.json, then paypal-scripts will use
your babel configuration rather than the built-in config. This makes things much
more predictable and less magical. โจ
To make things even better, paypal-scripts exposes all of its configuration so
you can compose your custom config with the built-in config โก๏ธ. So if you
wanted to add a custom babel plugin it's as easy as adding this to your
package.json:
{
"babel": {
"presets": ["paypal-scripts/babel"],
"plugins": ["glamorous-displayname"]
}
}
I've been using a generator for my open source projects for over a year now. It's been a huge productivity boost. However I've been suffering from all the same things I've discussed in this blog post. So with the excitement of creating paypal-scripts, I've also been working on kcd-scripts which does the same things except encodes the preferences I have for my own projects in the CLI. I've been slowly adding it to my projects and I couldn't be happier with the git diffs ๐. I meanโฆ check this out:
That's a ton of config and dependencies I no longer need to maintain ๐. Multiply that by the 100 packages I've published on npm and that's some pretty serious productivity gains ๐.
It's open source, so you can go look at it and use it even if you like! But it's pretty specific to me, not well documented, and subject to my whims, so I suggest that you fork it and make of it what you want. Seriously, I recommend to anyone who has more than a handful of projects they maintain to create and use a tool like this. I'm already feeling the wins.
Good luck to you all! ๐
