When installing dependencies using npm or yarn, 1. Use npm install package-name or yarn add package-name to install a new package; 2. Use npm install package-name@1.2.3 to install the specified version; 3. Use npm install --save-dev package-name to save as a development dependency. Production dependencies (such as react, react-dom) are used to run applications, and development dependencies (such as eslint, jest) are only used in the development stage. Regularly check for outdated packages using npm outdated, update package-name for npm update package-name for uninstall package-name for unused dependencies, and use depcheck to clean up "ghost dependencies". package.json can configure script commands such as "lint": "eslint ." and path alias such as "@components": "./src/components" to improve development efficiency and code readability.

Management dependencies and installation packages are fundamental in the development process in React projects. Mastering this part can allow you to build and maintain projects more efficiently. Below are some practical suggestions and common precautions.

Install dependencies using npm or yarn

React projects usually use npm or yarn to manage dependencies. They all support installing, updating, and uninstalling packages.

• Install a new package :

   npm install package-name
  # Or use yarn
  yarn add package-name

• Install the specified version of the package :

  

   npm install package-name@1.2.3

• Save as development dependency (such as test tools) :

   npm install --save-dev package-name

Generally, when the project is initialized, there will be a package.json file, which records all dependencies and their versions. When you run npm install or yarn without adding parameters, it will automatically install all dependencies listed in the file.

Differentiate between production dependencies and development dependencies

Understanding dependency types helps reduce the final packaging volume and avoids deploying unnecessary libraries to production environments.

• Production dependencies : libraries required when running applications, such as react , react-dom , axios , etc.
• DevDependencies : Tools only used in the development and construction stages, such as eslint , jest , webpack , etc.

If you are not sure which category a package belongs to, you can see if it is still used after the build is completed. If not, it should be classified as devDependencies.

Update and clean up dependencies

Over time, dependency packages may be updated or no longer used, and regular maintenance can improve security and stability.

• Check out outdated packages :

   npm outdated

• Update a single package :

   npm update package-name

• Remove unused dependencies :

   npm uninstall package-name

Sometimes you will find some "ghost dependencies" - these packages are not declared in package.json , but appear in node_modules . This situation can be detected and cleaned by tools such as depcheck .

Use package.json alias and scripts

In addition to managing dependencies, package.json can also configure some practical functions:

• Set script command :

   "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "lint": "eslint."
  }

  Then you can do it via npm run lint or yarn lint .

• Set path alias (with webpack) :

   "alias": {
    "@components": "./src/components"
  }

  This way you can write import Button from '@components/Button' in your code to improve readability.

Basically that's it. Dependency management may seem simple, but if you don't pay attention to version control and classification, it's easy to make the project bloated or even make mistakes. Keeping a clear structure and regular cleaning will make your React project healthier.

The above is the detailed content of How to manage dependencies and install packages in a React project?. For more information, please follow other related articles on the PHP Chinese website!