Overview
The article discusses how Spotify developed and open-sourced @spotify/web-scripts, a tool designed to simplify the creation of NPM libraries using TypeScript. It addresses the challenges teams faced with setup and maintenance of library tooling, aiming to enhance code sharing and development speed.
What You'll Learn
1
How to create a fully set-up TypeScript NPM library using @spotify/web-scripts
2
Why using opinionated tooling can reduce setup time for new projects
3
How to configure ESLint, Prettier, and TypeScript for consistent code quality
Prerequisites & Requirements
- Basic understanding of TypeScript and NPM
Key Questions Answered
What is @spotify/web-scripts and how does it help developers?
@spotify/web-scripts is a tool that simplifies the setup of TypeScript NPM libraries by providing a pre-configured environment with ESLint, Prettier, and testing capabilities. It allows developers to focus on writing code rather than managing boilerplate tooling, thus enhancing productivity.
What features does @spotify/web-scripts include?
@spotify/web-scripts includes features such as static analysis via ESLint and TypeScript, auto-formatting via Prettier, unit testing with Jest, and a pre-commit hook for running static analysis and tests. It also supports building CommonJS, ESM, and types in parallel.
How can developers start using @spotify/web-scripts?
Developers can start using @spotify/web-scripts by utilizing the project scaffolding tool with the command 'yarn create @spotify/web-scripts-library my-new-library' to create a fully set-up repository, or by following the provided instructions for existing projects.
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
Programming Language
Typescript
Used for developing NPM libraries at Spotify.
Tool
Eslint
Used for static analysis to enforce code quality.
Tool
Prettier
Used for auto-formatting code.
Testing Framework
Jest
Used for unit testing.
Key Actionable Insights
1Utilize @spotify/web-scripts to streamline your library development process.By using this tool, developers can avoid the common pitfalls of setting up and maintaining multiple dependencies, allowing them to focus more on feature development and less on configuration.
2Leverage the built-in static analysis and testing features to ensure code quality.Integrating ESLint and Jest from the start helps maintain a high standard of code quality and reduces the likelihood of bugs in production.
3Take advantage of the pre-commit hooks to automate code quality checks.This ensures that all code pushed to the repository adheres to the defined standards, preventing issues before they reach the main branch.
Common Pitfalls
1
Teams often spend excessive time on setting up and upgrading tooling instead of focusing on library development.
This can lead to duplicated code as teams may choose to avoid the overhead of maintaining shared libraries, which ultimately hinders collaboration and efficiency.
Related Concepts
Npm Libraries
Typescript Tooling
Code Quality Practices