DEV Community

Cui Mingda
Cui Mingda

Posted on

The packages behind create-react-app

@babel /core

Babel compiler core.

@pmmmwh/react-refresh-webpack-plugin

An EXPERIMENTAL Webpack plugin to enable "Fast Refresh" (also previously known as Hot Reloading) for React components.

@svgr/webpack

Webpack loader for SVGR.

@testing-library/jest-dom

Custom jest matchers to test the state of the DOM

@testing-library/react

Simple and complete React DOM testing utilities that encourage good testing practices.

@testing-library/user-event

Fire events the same way the user does

@typescript-eslint/eslint-plugin

An ESLint plugin which provides lint rules for TypeScript codebases.

@typescript-eslint/parser

An ESLint parser which leverages TypeScript ESTree to allow for ESLint to lint TypeScript source

babel-eslint

babel-eslint allows you to lint ALL valid Babel code with the fantastic ESLint.
This package has been deprecated, babel-eslint is now @babel /eslint-parser. This package will no longer receive updates.

babel-jest

Babel jest plugin

babel-loader

This package allows transpiling JavaScript files using Babel and webpack.

babel-plugin-named-asset-import

unknown

babel-preset-react-app

This package includes the Babel preset used by Create React App.

bfj

Big-Friendly JSON. Asynchronous streaming functions for large JSON data sets.

If you need to parse huge JSON strings or stringify huge JavaScript data sets, it monopolises the event loop and can lead to out-of-memory exceptions. BFJ implements asynchronous functions and uses pre-allocated fixed-length arrays to try and alleviate those issues.

camelcase

Correctly handles Unicode strings.

Convert a dash/dot/underscore/space separated string to camelCase or PascalCase: foo-bar → fooBar

case-sensitive-paths-webpack-plugin

This Webpack plugin enforces the entire path of all required modules match the exact case of the actual path on disk. Using this plugin helps alleviate cases where developers working on OSX, which does not follow strict path case sensitivity, will cause conflicts with other developers or build boxes running other operating systems which require correctly cased paths.

css-loader

The css-loader interprets @import and url() like import/require() and will resolve them.

dotenv

Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env. Storing configuration in the environment separate from code is based on The Twelve-Factor App methodology.

dotenv-expand

Dotenv-expand adds variable expansion on top of dotenv. If you find yourself needing to expand environment variables already existing on your machine, then dotenv-expand is your tool.

eslint

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. In many ways, it is similar to JSLint and JSHint with a few exceptions:

  • ESLint uses Espree for JavaScript parsing.
  • ESLint uses an AST to evaluate patterns in code.
  • ESLint is completely pluggable, every single rule is a plugin and you can add more at runtime.

eslint-config-react-app

This package includes the shareable ESLint configuration used by Create React App.

eslint-plugin-flowtype

Flow type linting rules for ESLint.

eslint-plugin-import

This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names. All the goodness that the ES2015+ static module syntax intends to provide, marked up in your editor.

eslint-plugin-jest

ESLint plugin for Jest

eslint-plugin-jsx-a11y

Ryan Florence built out this awesome runtime-analysis tool called react-a11y. It is super useful. However, since you're probably already using linting in your project, this plugin comes for free and closer to the actual development process. Pairing this plugin with an editor lint plugin, you can bake accessibility standards into your application in real-time.

eslint-plugin-react

React specific linting rules for ESLint

eslint-plugin-react-hooks

This ESLint plugin enforces the Rules of Hooks.
It is a part of the Hooks API for React.

eslint-plugin-testing-library

ESLint plugin to follow best practices and anticipate common mistakes when writing tests with Testing Library

eslint-webpack-plugin

This plugin uses eslint to find and fix problems in your JavaScript code

file-loader

The file-loader resolves import/require() on a file into a url and emits the file into the output directory.

fs-extra

fs-extra adds file system methods that aren't included in the native fs module and adds promise support to the fs methods. It also uses graceful-fs to prevent EMFILE errors. It should be a drop in replacement for fs.

html-webpack-plugin

Plugin that simplifies creation of HTML files to serve your bundles

identity-obj-proxy

An identity object using ES6 proxies. Useful for testing trivial webpack imports. For instance, you can tell Jest to mock this object as imported CSS modules; then all your className lookups on the imported styles object will be returned as-is.

jest

Delightful JavaScript Testing

  • Developer Ready: Complete and ready to set-up JavaScript testing solution. Works out of the box for any React project.

  • Instant Feedback: Failed tests run first. Fast interactive mode can switch between running all tests or only test files related to changed files.

  • Snapshot Testing: Jest can capture snapshots of React trees or other serializable values to simplify UI testing.

jest-circus

Circus is a flux-based test runner for Jest that is fast, maintainable, and simple to extend.

jest-resolve

unknown

jest-watch-typeahead

Filter your tests by file name or test name

mini-css-extract-plugin

This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.

optimize-css-assets-webpack-plugin

A Webpack plugin to optimize \ minimize CSS assets.

pnp-webpack-plugin

Plug'n'Play resolver for Webpack

postcss-flexbugs-fixes

PostCSS plugin This project tries to fix all of flexbug's issues.

postcss-loader

Loader to process CSS with PostCSS.

postcss-normalize

PostCSS Normalize lets you use the parts of normalize.css or sanitize.css that you need from your browserslist.

postcss-preset-env

PostCSS Preset Env lets you convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments.

postcss-safe-parser

A fault-tolerant CSS parser for PostCSS, which will find & fix syntax errors, capable of parsing any input. It is useful for:

  • Parse legacy code with many hacks. For example, it can parse all examples from Browserhacks.
  • Works with demo tools with live input like Autoprefixer demo.

prompts

Lightweight, beautiful and user-friendly interactive prompts

react

React is a JavaScript library for creating user interfaces.

The react package contains only the functionality necessary to define React components. It is typically used together with a React renderer like react-dom for the web, or react-native for the native environments.

react-app-polyfill

This package includes polyfills for various browsers. It includes minimum requirements and commonly used language features used by Create React App projects.

react-dev-utils

This package includes some utilities used by Create React App.

react-dom

This package serves as the entry point to the DOM and server renderers for React. It is intended to be paired with the generic React package, which is shipped as react to npm.

react-refresh

This package implements the wiring necessary to integrate Fast Refresh into bundlers. Fast Refresh is a feature that lets you edit React components in a running application without losing their state. It is similar to an old feature known as "hot reloading", but Fast Refresh is more reliable and officially supported by React.

resolve

implements the node require.resolve() algorithm such that you can require.resolve() on behalf of a file asynchronously and synchronously

resolve-url-loader

This webpack loader allows you to have a distributed set SCSS files and assets co-located with those SCSS files.

sass-loader

Loads a Sass/SCSS file and compiles it to CSS.

semver

The semantic versioner for npm

style-loader

Inject CSS into the DOM.

terser-webpack-plugin

This plugin uses terser to minify your JavaScript.

ts-pnp

Plug'n'Play resolver for TypeScript

url-loader

A loader for webpack which transforms files into base64 URIs.

web-vitals

The web-vitals library is a tiny (~1K), modular library for measuring all the Web Vitals metrics on real users, in a way that accurately matches how they're measured by Chrome and reported to other Google tools (e.g. Chrome User Experience Report, Page Speed Insights, Search Console's Speed Report).

webpack

Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

webpack-dev-server

Use webpack with a development server that provides live reloading. This should be used for development only.

It uses webpack-dev-middleware under the hood, which provides fast in-memory access to the webpack assets.

webpack-manifest-plugin

A Webpack plugin for generating an asset manifest.

workbox-webpack-plugin

Workbox provides two webpack plugins: one that generates a complete service worker for you and one that generates a list of assets to precache that is injected into a service worker file.

The plugins are implemented as two classes in the workbox-webpack-plugin module, named GenerateSW and InjectManifest. The answers to the following questions can help you choose the right plugin and configuration to use.

Top comments (0)