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