Most front-end projects on the market today use the NPM package manager to organize the module dependencies used in the project. However, when we look at the NPM configuration file package.json, we find that some modules are in Dependencies configuration and others are in DevDependencies. Is it a bit silly to know 🧐?

Don’t panic, let’s take a look at the 5 dependencies in NPM and get a bottom line:

  • Dependencies => places dependencies that the code in the project needs when it runs
  • DevDependencies => places the compile, package, test, format modules that you need to use in your local development process
  • PeerDependencies => The module dependencies that are required by the host environment to place this module (normally this module sets dependencies to provide services to referees)
  • bundledDependencies=> is an array containing the names of the dependent modules that need to be packaged in the local packagenpm packThe command generates a module package
  • optionalDependencies=> places some package modules in the project whose various errors can be ignored, anddependenciesSame, but the module is optional (ps. The configuration name is also intuitive 🤐)

See 👇 for more details

1. dependencies

This configuration item is used to place code that projects actually need to run. Without this module, the project will run erratically and must be installed under Dependencies.

Use the following command to install

$NPM install --save Axios $NPM install -- $yarn add Axios with yarn

2. devDependencies

This configuration contains modules that will be compiled, packaged, tested, and formatted for use in the local development process. Note that NPM publish will not install modules under this configuration

Install with the following command

$NPM install --save-dev typeScript: $NPM install --save -- dev yarn typescript

3. peerDependencies

Typically used in a distributed codebase to indicate that the host environment is required to provide module dependencies under this configuration, and is dependent on the host environment. The NPM 3.x version does not automatically install dependent modules in this configuration.

// Take the React Router (the React routing library) as an example. The React Router requires {" PeerDependencies ": {" React ": ">=15"}} in the React environment.

4. bundledDependencies

Modules in this configuration are packaged into the generated module package via the NPM pack, which is generally used for private package references to configure files into dependencies of other projects

Note that this configuration is in array format and contains the names of the packages that need to be packaged.

5. optionalDependencies

This configuration, as it’s called, is an optional configuration, which means that when the code is running or installing a module, it will work even if it fails to report an error.

Note that this configuration will override packages in dependencies. Do not add them in duplicate

Install with the following command

$NPM install --save-optional XXX $yarn add -O XXX


The projects you use the most are dependencies and devDependencies, the rest are OK. Anyway, now you have a better understanding of the dependencies in NPM!

Learn on the way ~