At Spotify, we love sharing code. We have many autonomous teams creating new stuff every day, and we need to be able to share code between those teams in an efficient manner, with a high degree of confidence and reliability. For web libraries, that means NPM.
We began to wonder if there was a simpler way to set up new libraries with all of the bells and whistles we think helps teams move fast at Spotify. Should teams really have to remember to set up
types in a new repo’s package.json? Should teams really have to decide whether to build with Babel + TypeScript or just tsc directly? And should we really have to remember to install and update 20 boilerplate dev dependencies for every new repo to adhere to our global code style and testing strategy?
Inspired by projects like react-scripts and kcd-scripts, engineers inside Spotify began the process of creating an opinionated dependency bundle that would help make all of those problems go away for our engineers. And now, we’re proud to announce we’ve opened sourced @spotify/web-scripts, along with 5 other projects which contain our shared ESLint, Prettier, and TypeScript configurations at Spotify. With these libraries available as open source projects, developers inside and outside Spotify can kick-start a TypeScript NPM library in a snap.
Some key features it ships with:
- Static analysis via ESLint and TypeScript, including base Spotify configs
- Auto-formatting via Prettier
- Unit testing via Jest
- A pre-commit hook to run static analysis, auto formatting, and relevant unit tests via lint-staged
- A build script which creates CommonJS, ESM, and types in parallel via tsc
- semantic-release and commitizen configured to release your library continuously
- Tips for how to set up your config files so your editor support works seamlessly
- Mix ‘n match scripts and directly provide configuration if you need to override. No “eject” necessary!
Interested in trying it out? You can use our project scaffolding tool to create a fully set-up repo.
yarn create @spotify/web-scripts-library my-new-library
Or, follow our instructions to get started in your existing project. Let us know what you think, and feel free to open a PR or raise an issue!