The Step-by-Step Guide to Understanding and Adopting npm 7
Detailed explanations for npm 7 features, including peer dependencies, package and yarn lock files, workspaces, etc.
[email protected] was released on October 13, 2020, and was shipped with Node.js v15.0.0 on October 20, 2020.
npm 7 is a major release, which includes many new features:
- Peer dependency automatic installation
- Package and yarn lock files enhancement
- Workspace support
- Use of
package.exports npxchanges- npm CLI command changes
Let’s go into details to explore what they are and how to use them.
Use NVM to Explore npm
In a previous article, we have provided instructions on how to use NVM (Node Version Manager) to manage Node and npm versions. In our environment, we had Node 12.16.0 and npm 6.14.8 installed. By running nvm install node, we installed Node 15.4.0 and npm 7.0.15.
We have two windows open: One is set to npm 6, and the other one is set to npm 7.
- On the npm 6 window, we have the following:
$ nvm use 12
Now using node v12.16.0 (npm v6.14.8)- On the npm 7 window, we have the following:
$ nvm use 15
Now using node v15.4.0 (npm v7.0.15)Now we are ready to explore.
Peer Dependencies
Starting from version 4, npm dropped support for installing peer dependencies automatically due to the technical challenges of the deduplication algorithm. But starting from version 7, npm resumed automatically installing peer dependencies with help from the Arborist algorithm.
There are three peer dependency changes in npm 7:
- Automatically install peer dependencies along with packages that peer-depend on them.
- Ensure that a validly matching peer dependency is found at or above the peer dependency’s location in the
node_modulestree. - If peer dependencies are omitted from the installation, create a tree which could have peer dependencies added correctly.
Let’s see how npm 7 works.
In each npm window, initialize an npm project:
(If both npm 6 and npm 7 yield the same result, we only attach the result from npm 7.)
$ npm init -y
Wrote to /Users/fuje/npm7/package.json:{
"name": "npm7",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}Add a peer dependency (lines 12 -14) in the generated package.json file:
On the npm 6 window, the peer dependency, React, is not installed by npm 6:
$ npm i
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN npm6@1.0.0 requires a peer of react@>= 16.12.0 but none is installed. You must install peer dependencies yourself.
npm WARN npm6@1.0.0 No description
npm WARN npm6@1.0.0 No repository field.up to date in 0.572s
found 0 vulnerabilitiesThis can be verified by npm ls:
$ npm ls
npm6@1.0.0 /Users/fuje/npm6
└── UNMET PEER DEPENDENCY react@>= 16.12.0
npm ERR! peer dep missing: react@>= 16.12.0, required by npm6@1.0.0On the npm 7 window, the peer dependency, React, is installed by npm 7:
$ npm iadded 4 packages, and audited 4 packages in 5sfound 0 vulnerabilitiesThis can be verified by npm ls:
$ npm ls
npm7@1.0.0 /Users/fuje/npm7
└── react@17.0.1Generally speaking, npm 7 output is shorter and clearer. npm i simply states that four packages are installed inside node_modules. npm ls only prints the first level of dependencies by default. It can print more of the tree by using --depth=<n> to set a specific depth, or it can use --all to print all of them.
The following command verifies that there are four packages installed inside node_modules.
$ ls -l node_modules/
total 0
drwxr-xr-x 7 fuje staff 224 Dec 21 21:38 js-tokens
drwxr-xr-x 10 fuje staff 320 Dec 21 21:38 loose-envify
drwxr-xr-x 6 fuje staff 192 Dec 21 21:38 object-assign
drwxr-xr-x 11 fuje staff 352 Dec 21 21:38 reactSo far, so good.
Then we add a dependency, grommet, at lines 15 - 17:
grommet is a library of reusable UI components that helps developers create web applications. It has peer dependencies and dependencies, which are defined as follows:
On the npm 6 window, grommet is installed with missing peer dependency warnings:
$ npm i
npm WARN npm6@1.0.0 requires a peer of react@>= 16.12.0 but none is installed. You must install peer dependencies yourself.
npm WARN grommet@2.16.2 requires a peer of react@>= 16.6.1 but none is installed. You must install peer dependencies yourself.
npm WARN grommet@2.16.2 requires a peer of react-dom@>= 16.6.1 but none is installed. You must install peer dependencies yourself.
npm WARN grommet@2.16.2 requires a peer of styled-components@>= 5.1 but none is installed. You must install peer dependencies yourself.
npm WARN grommet-icons@4.5.0 requires a peer of react@>= 16.6.0 but none is installed. You must install peer dependencies yourself.
npm WARN grommet-icons@4.5.0 requires a peer of react-dom@>= 16.6.0 but none is installed. You must install peer dependencies yourself.
npm WARN grommet-icons@4.5.0 requires a peer of styled-components@>= 5.x but none is installed. You must install peer dependencies yourself.
npm WARN markdown-to-[email protected] requires a peer of react@>= 0.14.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-desc@4.1.2 requires a peer of react@>= 15.5.4 < 16 || 16.x but none is installed. You must install peer dependencies yourself.
npm WARN grommet-styles@0.2.0 requires a peer of react@>= 16.4.1 but none is installed. You must install peer dependencies yourself.
npm WARN grommet-styles@0.2.0 requires a peer of react-dom@>= 16.4.1 but none is installed. You must install peer dependencies yourself.
npm WARN grommet-styles@0.2.0 requires a peer of styled-components@>= 4.X but none is installed. You must install peer dependencies yourself.
npm WARN npm6@1.0.0 No description
npm WARN npm6@1.0.0 No repository field.added 15 packages from 9 contributors and audited 15 packages in 12.523s
found 0 vulnerabilitiesMissing peer dependency warnings are displayed as errors with the npm ls command:
$ npm ls
npm6@1.0.0 /Users/fuje/npm6
├─┬ grommet@2.16.2
│ ├─┬ grommet-icons@4.5.0
│ │ ├── grommet-styles@0.2.0
│ │ ├── UNMET PEER DEPENDENCY react@>= 16.4.1
│ │ ├── UNMET PEER DEPENDENCY react-dom@>= 16.4.1
│ │ └── UNMET PEER DEPENDENCY styled-components@>= 4.X
│ ├─┬ hoist-non-react-statics@3.3.2
│ │ └── react-is@16.13.1
│ ├─┬ markdown-to-jsx@6.11.4
│ │ ├── prop-types@15.7.2 deduped
│ │ └── unquote@1.1.1
│ ├─┬ polished@3.6.7
│ │ └─┬ @babel/[email protected]
│ │ └── regenerator-runtime@0.13.7
│ ├─┬ prop-types@15.7.2
│ │ ├─┬ loose-envify@1.4.0
│ │ │ └── js-tokens@4.0.0
│ │ ├── object-assign@4.1.1
│ │ └── react-is@16.13.1 deduped
│ ├── UNMET PEER DEPENDENCY react@>= 16.6.0
│ ├── react-desc@4.1.2
│ ├── UNMET PEER DEPENDENCY react-dom@>= 16.6.0
│ └── UNMET PEER DEPENDENCY styled-components@>= 5.x
├── UNMET PEER DEPENDENCY react@>= 16.12.0
├── UNMET PEER DEPENDENCY react-dom@>= 16.6.1
└── UNMET PEER DEPENDENCY styled-components@>= 5.1npm ERR! peer dep missing: react@>= 16.12.0, required by npm6@1.0.0
npm ERR! peer dep missing: react@>= 16.6.1, required by grommet@2.16.2
npm ERR! peer dep missing: react-dom@>= 16.6.1, required by grommet@2.16.2
npm ERR! peer dep missing: styled-components@>= 5.1, required by grommet@2.16.2
npm ERR! peer dep missing: react@>= 16.6.0, required by grommet-icons@4.5.0
npm ERR! peer dep missing: react@>= 0.14.0, required by markdown-to-jsx@6.11.4
npm ERR! peer dep missing: react@>= 15.5.4 < 16 || 16.x, required by react-desc@4.1.2
npm ERR! peer dep missing: react-dom@>= 16.6.0, required by grommet-icons@4.5.0
npm ERR! peer dep missing: styled-components@>= 5.x, required by grommet-icons@4.5.0
npm ERR! peer dep missing: react@>= 16.4.1, required by grommet-styles@0.2.0
npm ERR! peer dep missing: react-dom@>= 16.4.1, required by grommet-styles@0.2.0
npm ERR! peer dep missing: styled-components@>= 4.X, required by grommet-styles@0.2.0On the npm 7 window, the program exits installation with peer dependency errors:
$ npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: react@16.14.0
npm ERR! node_modules/react
npm ERR! peer react@">= 16.12.0" from the root project
npm ERR! peer react@">= 16.6.1" from grommet@2.16.2
npm ERR! node_modules/grommet
npm ERR! grommet@"^2.16.1" from the root project
npm ERR! 5 more (react-desc, styled-components, grommet-icons, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"17.0.1" from react-dom@17.0.1
npm ERR! node_modules/react-dom
npm ERR! peer react-dom@">= 16.6.1" from grommet@2.16.2
npm ERR! node_modules/grommet
npm ERR! grommet@"^2.16.1" from the root project
npm ERR! peer react-dom@">= 16.8.0" from styled-components@5.2.1
npm ERR! node_modules/styled-components
npm ERR! peer styled-components@">= 5.1" from grommet@2.16.2
npm ERR! node_modules/grommet
npm ERR! grommet@"^2.16.1" from the root project
npm ERR! 1 more (grommet-icons)
npm ERR! 1 more (grommet-icons)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/fuje/.npm/eresolve-report.txt for a full report.npm ERR! A complete log of this run can be found in:
npm ERR! /Users/fuje/.npm/_logs/2020-12-21T22_26_52_067Z-debug.logThe above error message shows alternatives to use --force or --legacy-peer-deps.
- The
-for--forceargument will force npm to fetch remote resources even if a local copy exists on disk. - The
--legacy-peer-depsargument will ignore allpeerDependencieswhen installing, in the style of npm version 4 through version 6.
The --legacy-peer-deps argument can bypass missing peer dependency issues. It produces the same result as npm 6, except that the output is simplified.
$ npm i --legacy-peer-depsadded 15 packages, and audited 15 packages in 4sfound 0 vulnerabilitiesHere is the npm ls result:
$ npm ls
npm7@1.0.0 /Users/fuje/npm7
├── grommet@2.16.2
└── UNMET DEPENDENCY react@>= 16.12.0npm ERR! code ELSPROBLEMS
npm ERR! missing: react@>= 16.12.0, required by npm7@1.0.0npm ERR! A complete log of this run can be found in:
npm ERR! /Users/fuje/.npm/_logs/2020-12-21T22_33_04_827Z-debug.logFor missing peer dependency errors, --force is not able to resolve the problem. We could add the missing peer dependencies — this approach will be taken in workspace examples.
Here we remove the peer dependency, react, from the package.json file.
Since React is part of grommet’s peer dependencies, it will be installed along with grommet by the --force command:
$ npm i --force
npm WARN using --force Recommended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react@17.0.1
npm WARN node_modules/react
npm WARN peer react@">= 16.6.1" from grommet@2.16.2
npm WARN node_modules/grommet
npm WARN grommet@"^2.16.1" from the root project
npm WARN 4 more (react-dom, styled-components, grommet-icons, markdown-to-jsx)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@">= 15.5.4 < 16 || 16.x" from react-desc@4.1.2
npm WARN node_modules/grommet/node_modules/react-desc
npm WARN react-desc@"^4.1.2" from grommet@2.16.2
npm WARN node_modules/grommet
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react@17.0.1
npm WARN node_modules/react
npm WARN peer react@">= 16.6.1" from grommet@2.16.2
npm WARN node_modules/grommet
npm WARN grommet@"^2.16.1" from the root project
npm WARN 4 more (react-dom, styled-components, grommet-icons, markdown-to-jsx)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@">= 15.5.4 < 16 || 16.x" from react-desc@4.1.2
npm WARN node_modules/grommet/node_modules/react-desc
npm WARN react-desc@"^4.1.2" from grommet@2.16.2
npm WARN node_modules/grommetadded 59 packages, and audited 59 packages in 16s1 package is looking for funding
run `npm fund` for detailsfound 0 vulnerabilitiesThere is an error for react-desc, because the installed React 17.0.1 is not in the required range of >= 15.5.4 < 16 || 16.x.
The issue is not visible with the default npm ls:
$ npm ls
npm7@1.0.0 /Users/fuje/npm7
└── grommet@2.16.2However, the problem is noticeable with npm ls react (see the invalid flag):
$ npm ls react
npm7@1.0.0 /Users/fuje/npm7
└─┬ grommet@2.16.2
├─┬ grommet-icons@4.5.0
│ ├─┬ grommet-styles@0.2.0
│ │ └── react@17.0.1 deduped
│ └── react@17.0.1 deduped
├─┬ markdown-to-jsx@6.11.4
│ └── react@17.0.1 deduped
├─┬ react-desc@4.1.2
│ └── react@17.0.1 deduped invalid
├─┬ react-dom@17.0.1
│ └── react@17.0.1 deduped
├── react@17.0.1
└─┬ styled-components@5.2.1
└── react@17.0.1 dedupednpm ERR! code ELSPROBLEMS
npm ERR! invalid: react@17.0.1 /Users/fuje/npm7/node_modules/reactnpm ERR! A complete log of this run can be found in:
npm ERR! /Users/fuje/.npm/_logs/2020-12-21T22_51_04_652Z-debug.lognpm 7 uses the Arborist algorithm to generate the node_modules tree, which is a logical graph of dependencies. This approach makes peer dependencies a first-class concept. The Arborist algorithm is an enabler for peer dependencies to be installed automatically and correctly. This installation requires the validity of the package tree.
Package and Yarn Lock Files
With npm 7, package.json files are no longer mutated to include extra metadata. Instead, the extra metadata are stored in lock files.
The following is the difference between npm 6's package-lock.json (115 lines) and npm 7's package-lock.json (1,087 lines). At a glance, a lot of extra information is added by npm 7, where package-lock.json contains everything that npm needs to fully build the package tree.
package-lock.json files generated by npm 7 have a newer format, using "lockfileVersion": 2 (line 4 in the above screenshot). This format is backward-compatible with npm 6 format using "lockfileVersion": 1, but older npm clients will print a warning about the version mismatch.
In addition to package-lock.json files, yarn.lock files can be used as the source of package metadata and resolution guidance, if available. Prior to npm 7, yarn.lock files were ignored.
However, yarn.lock files do not replace package-lock.json files. Since yarn.lock files do not fully address npm’s needs, relying on them exclusively would limit the ability to produce optimal package installs or add features in the future.
Workspaces
Workspace support is a major feature in npm 7. It provides a method to manage multiple packages from within a singular top-level root package. npm reused the term workspace, which has been used by Yarn and pnpm for a similar feature. npm 7 is workspace-aware. It will properly install dependencies without duplicating the common ones. This workspace-aware feature reduces duplicated packages for micro front-end approaches. Potentially, workspaces can radically improve the performance and memory usage with large combined projects of multiple shared dependencies.
The optional workspaces field in package.json is an array of file patterns that describes locations for each workspace that needs to be symlinked to the top level node_modules. This concept has been applied to lerna, a tool to manage JavaScript projects with multiple packages. The workspaces location can be direct paths or globs (filenames with wildcard characters).
We are giving a few examples to demonstrate workspaces. These examples are operated on the npm 7 window.
In the following package.json file, workspace-a is defined at lines 12 - 14.
workspace-a is a workspace/directory created at the root level. Inside the workspace-a directory, there is a package.json file:
At the root level, we execute install i.
$ npm iadded 5 packages, and audited 6 packages in 2sfound 0 vulnerabilitiesFive packages, including React, are installed:
$ npm ls
npm7@1.0.0 /Users/fuje/npm7
└── workspace-a@1.0.0 -> /Users/fuje/npm7/workspace-a$ npm ls react
npm7@1.0.0 /Users/fuje/npm7
└─┬ workspace-a@1.0.0 -> /Users/fuje/npm7/workspace-a
└── react@17.0.1$ ls -al node_modules
total 8
drwxr-xr-x 9 fuje staff 288 Dec 21 23:26 .
drwxr-xr-x 6 fuje staff 192 Dec 21 23:26 ..
drwxr-xr-x 3 fuje staff 96 Dec 21 23:26 .bin
-rw-r--r-- 1 fuje staff 1675 Dec 21 23:26 .package-lock.json
drwxr-xr-x 7 fuje staff 224 Dec 21 23:26 js-tokens
drwxr-xr-x 10 fuje staff 320 Dec 21 23:26 loose-envify
drwxr-xr-x 6 fuje staff 192 Dec 21 23:26 object-assign
drwxr-xr-x 11 fuje staff 352 Dec 21 23:26 react
lrwxr-xr-x 1 fuje staff 14 Dec 21 23:26 workspace-a -> ../workspace-aThe last line shows that node_modules/workspace-a symlinks to workspace-a.
Here is the directory structure:
What if we create a directory, packages, and move workspace-a inside it?
Here is the root-level package.json file, which will pick up all workspaces inside the packages directory.
{
"name": "npm7",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"workspaces": [
"packages/*"
]
}Run the following commands after executing install i:
$ npm ls
npm7@1.0.0 /Users/fuje/npm7
└── workspace-a@1.0.0 -> /Users/fuje/npm7/packages/workspace-a$ npm ls react
npm7@1.0.0 /Users/fuje/npm7
└─┬ workspace-a@1.0.0 -> /Users/fuje/npm7/packages/workspace-a
└── react@17.0.1$ ls -al node_modules
total 8
drwxr-xr-x 9 fuje staff 288 Dec 21 23:34 .
drwxr-xr-x 6 fuje staff 192 Dec 21 23:34 ..
drwxr-xr-x 3 fuje staff 96 Dec 21 23:34 .bin
-rw-r--r-- 1 fuje staff 1693 Dec 21 23:34 .package-lock.json
drwxr-xr-x 7 fuje staff 224 Dec 21 23:34 js-tokens
drwxr-xr-x 10 fuje staff 320 Dec 21 23:34 loose-envify
drwxr-xr-x 6 fuje staff 192 Dec 21 23:34 object-assign
drwxr-xr-x 11 fuje staff 352 Dec 21 23:34 react
lrwxr-xr-x 1 fuje staff 23 Dec 21 23:34 workspace-a -> ../packages/workspace-aIn the above output, one copy of React is installed inside the node_modules directory.
The following is the updated directory structure:
What if we create another workspace, workspace-b, inside the packages directory?
Inside the workspace-b directory, there is a package.json file that uses the same version of React as the workspace, workspace-a.
Run the following commands after executing install i:
$ npm ls
npm7@1.0.0 /Users/fuje/npm7
├── workspace-a@1.0.0 -> /Users/fuje/npm7/packages/workspace-a
└── workspace-b@1.0.0 -> /Users/fuje/npm7/packages/workspace-b$ npm ls react
npm7@1.0.0 /Users/fuje/npm7
├─┬ workspace-a@1.0.0 -> /Users/fuje/npm7/packages/workspace-a
│ └── react@17.0.1
└─┬ workspace-b@1.0.0 -> /Users/fuje/npm7/packages/workspace-b
└── react@17.0.1 deduped$ ls -al node_modules
total 8
drwxr-xr-x 10 fuje staff 320 Dec 21 23:41 .
drwxr-xr-x 6 fuje staff 192 Dec 21 23:41 ..
drwxr-xr-x 3 fuje staff 96 Dec 21 23:41 .bin
-rw-r--r-- 1 fuje staff 1941 Dec 21 23:41 .package-lock.json
drwxr-xr-x 7 fuje staff 224 Dec 21 23:41 js-tokens
drwxr-xr-x 10 fuje staff 320 Dec 21 23:41 loose-envify
drwxr-xr-x 6 fuje staff 192 Dec 21 23:41 object-assign
drwxr-xr-x 11 fuje staff 352 Dec 21 23:41 react
lrwxr-xr-x 1 fuje staff 23 Dec 21 23:41 workspace-a -> ../packages/workspace-a
lrwxr-xr-x 1 fuje staff 23 Dec 21 23:41 workspace-b -> ../packages/workspace-bIn the above output, [email protected] is deduped. Still, one copy of React is installed inside the node_modules directory.
The following is the updated directory structure:
What if we create the third workspace, workspace-c, inside the packages directory?
Inside the workspace-c directory, there is a package.json file that uses grommet along with its peer dependencies, including a different version of React.
Run the following commands after executing install i:
$ npm ls
npm7@1.0.0 /Users/fuje/npm7
├── scheduler@0.19.1 extraneous
├── workspace-a@1.0.0 -> /Users/fuje/npm7/packages/workspace-a
├── workspace-b@1.0.0 -> /Users/fuje/npm7/packages/workspace-b
└── workspace-c@1.0.0 -> /Users/fuje/npm7/packages/workspace-cnpm ERR! code ELSPROBLEMS
npm ERR! extraneous: scheduler@0.19.1 /Users/fuje/npm7/node_modules/schedulernpm ERR! A complete log of this run can be found in:
npm ERR! /Users/fuje/.npm/_logs/2020-12-21T23_54_29_774Z-debug.log$ npm ls react
npm7@1.0.0 /Users/fuje/npm7
├─┬ workspace-a@1.0.0 -> /Users/fuje/npm7/packages/workspace-a
│ └── react@17.0.1
├─┬ workspace-b@1.0.0 -> /Users/fuje/npm7/packages/workspace-b
│ └── react@17.0.1
└─┬ workspace-c@1.0.0 -> /Users/fuje/npm7/packages/workspace-c
├─┬ grommet@2.16.2
│ ├─┬ grommet-icons@4.5.0
│ │ ├─┬ grommet-styles@0.2.0
│ │ │ └── react@16.14.0 deduped
│ │ └── react@16.14.0 deduped
│ ├─┬ markdown-to-jsx@6.11.4
│ │ └── react@17.0.1
│ ├─┬ react-desc@4.1.2
│ │ └── react@16.14.0 deduped
│ └── react@16.14.0 deduped
├─┬ react-dom@16.14.0
│ └── react@16.14.0 deduped
├── react@16.14.0
└─┬ styled-components@5.2.1
└── react@16.14.0 deduped$ ls -al node_modules
total 48
drwxr-xr-x 41 fuje staff 1312 Dec 22 00:04 .
drwxr-xr-x 6 fuje staff 192 Dec 22 00:04 ..
drwxr-xr-x 5 fuje staff 160 Dec 22 00:04 .bin
-rw-r--r-- 1 fuje staff 23615 Dec 22 00:04 .package-lock.json
drwxr-xr-x 16 fuje staff 512 Dec 22 00:04 @babel
drwxr-xr-x 6 fuje staff 192 Dec 22 00:04 @emotion
drwxr-xr-x 6 fuje staff 192 Dec 22 00:04 ansi-styles
drwxr-xr-x 6 fuje staff 192 Dec 22 00:04 babel-plugin-syntax-jsx
drwxr-xr-x 9 fuje staff 288 Dec 22 00:04 camelize
drwxr-xr-x 9 fuje staff 288 Dec 22 00:04 chalk
drwxr-xr-x 9 fuje staff 288 Dec 22 00:04 color-convert
drwxr-xr-x 9 fuje staff 288 Dec 22 00:04 color-name
drwxr-xr-x 7 fuje staff 224 Dec 22 00:04 css-color-keywords
drwxr-xr-x 7 fuje staff 224 Dec 22 00:04 css-to-react-native
drwxr-xr-x 6 fuje staff 192 Dec 22 00:04 debug
drwxr-xr-x 6 fuje staff 192 Dec 22 00:04 escape-string-regexp
drwxr-xr-x 7 fuje staff 224 Dec 22 00:04 globals
drwxr-xr-x 6 fuje staff 192 Dec 22 00:04 has-flag
drwxr-xr-x 9 fuje staff 288 Dec 22 00:04 hoist-non-react-statics
drwxr-xr-x 7 fuje staff 224 Dec 22 00:04 js-tokens
drwxr-xr-x 8 fuje staff 256 Dec 22 00:04 jsesc
drwxr-xr-x 637 fuje staff 20384 Dec 22 00:04 lodash
drwxr-xr-x 10 fuje staff 320 Dec 22 00:04 loose-envify
drwxr-xr-x 7 fuje staff 224 Dec 22 00:04 markdown-to-jsx
drwxr-xr-x 6 fuje staff 192 Dec 22 00:04 ms
drwxr-xr-x 6 fuje staff 192 Dec 22 00:04 object-assign
drwxr-xr-x 12 fuje staff 384 Dec 22 00:04 polished
drwxr-xr-x 6 fuje staff 192 Dec 22 00:04 postcss-value-parser
drwxr-xr-x 15 fuje staff 480 Dec 22 00:04 prop-types
drwxr-xr-x 11 fuje staff 352 Dec 22 00:04 react
drwxr-xr-x 9 fuje staff 288 Dec 22 00:04 react-is
drwxr-xr-x 7 fuje staff 224 Dec 22 00:04 regenerator-runtime
drwxr-xr-x 12 fuje staff 384 Dec 22 00:04 scheduler
drwxr-xr-x 8 fuje staff 256 Dec 22 00:04 shallowequal
drwxr-xr-x 9 fuje staff 288 Dec 22 00:04 source-map
drwxr-xr-x 7 fuje staff 224 Dec 22 00:04 supports-color
drwxr-xr-x 6 fuje staff 192 Dec 22 00:04 to-fast-properties
drwxr-xr-x 7 fuje staff 224 Dec 22 00:04 unquote
lrwxr-xr-x 1 fuje staff 23 Dec 22 00:04 workspace-a -> ../packages/workspace-a
lrwxr-xr-x 1 fuje staff 23 Dec 22 00:04 workspace-b -> ../packages/workspace-b
lrwxr-xr-x 1 fuje staff 23 Dec 22 00:04 workspace-c -> ../packages/workspace-cnpm i now lists extraneous dependencies based on their location in the node_modules tree.
Despite the extraneous error about [email protected], everything else is installed successfully. [email protected] is installed at the root level, as well as in workspace-a, workspace-b. It is accessible by [email protected] in workspace-c. [email protected] is installed and shared in workspace-c.
The following is the updated directory structure:
Do you want to do further dedupe?
Yes, and npm-dedupe provides this functionality. It searches the local package tree and attempts to simplify the overall structure by moving dependencies further up the tree, where they can be more effectively shared by multiple dependent packages.
$ npm dedupe
npm WARN registry Using stale data from https://registry.npmjs.org/ because the host is inaccessible -- are you offline?
npm WARN registry Using stale data from https://registry.npmjs.org/ due to a request error during revalidation.removed 5 packages, and changed 1 package in 19s1 package is looking for funding
run `npm fund` for details$ npm ls react
npm7@1.0.0 /Users/fuje/npm7
├─┬ workspace-a@1.0.0 -> /Users/fuje/npm7/packages/workspace-a
│ └── react@17.0.1
├─┬ workspace-b@1.0.0 -> /Users/fuje/npm7/packages/workspace-b
│ └── react@17.0.1 deduped
└─┬ workspace-c@1.0.0 -> /Users/fuje/npm7/packages/workspace-c
├─┬ grommet@2.16.2
│ ├─┬ grommet-icons@4.5.0
│ │ ├─┬ grommet-styles@0.2.0
│ │ │ └── react@16.14.0 deduped
│ │ └── react@16.14.0 deduped
│ ├─┬ markdown-to-jsx@6.11.4
│ │ └── react@17.0.1 deduped
│ ├─┬ react-desc@4.1.2
│ │ └── react@16.14.0 deduped
│ └── react@16.14.0 deduped
├─┬ react-dom@16.14.0
│ └── react@16.14.0 deduped
├── react@16.14.0
└─┬ styled-components@5.2.1
└── react@16.14.0 dedupedAfter this dedupe, five packages are removed. Among them, [email protected] is removed from workspace-a and workspace-b. There is only one copy of [email protected] at the root level.
npm 7.0.15 is the initial implementation of workspaces, and more workspace capabilities are on the way.
The npm run-prefix command enables the execution of a script in a specific workspace from the root directory.
The following are examples to run the test scripts for workspace-a, workspace-b, and workspace-c.
$ npm run --prefix packages/workspace-a test> workspace-a@1.0.0 test
> echo "Error: no test specified" && exit 1Error: no test specified
npm ERR! code 1
npm ERR! path /Users/fuje/npm7/packages/workspace-a
npm ERR! command failed
npm ERR! command sh -c echo "Error: no test specified" && exit 1npm ERR! A complete log of this run can be found in:
npm ERR! /Users/fuje/.npm/_logs/2020-12-22T00_09_02_798Z-debug.log
$ npm run --prefix packages/workspace-b test> workspace-b@1.0.0 test
> echo "Error: no test specified" && exit 1Error: no test specified
npm ERR! code 1
npm ERR! path /Users/fuje/npm7/packages/workspace-b
npm ERR! command failed
npm ERR! command sh -c echo "Error: no test specified" && exit 1npm ERR! A complete log of this run can be found in:
npm ERR! /Users/fuje/.npm/_logs/2020-12-22T00_09_09_524Z-debug.log
$ npm run --prefix packages/workspace-c test> workspace-c@1.0.0 test
> echo "Error: no test specified for workspace-c" && exit 1Error: no test specified for workspace-c
npm ERR! code 1
npm ERR! path /Users/fuje/npm7/packages/workspace-c
npm ERR! command failed
npm ERR! command sh -c echo "Error: no test specified for workspace-c" && exit 1npm ERR! A complete log of this run can be found in:
npm ERR! /Users/fuje/.npm/_logs/2020-12-22T00_09_17_392Z-debug.logOther Changes
Besides peer dependencies, package and yarn lock files, and workspaces, npm 7 made the following changes:
- npm uses the
package.exportsfield, making it no longer possible torequire()npm’s internal modules. npxhas been completely rewritten to use thenpm execcommand. There are various changes in functionality. Most noticeable one is a prompt if the module you are trying to run is not yet installed.- The output of
npm audithas significantly changed both in the human-readable and--jsonoutput styles. - There are more modified npm CLI commands, such as
npm fund,npm pack,npm publish,npm test, etc.
Conclusion
npm has been released with many new features and improvements, including breaking changes.
Try it out and get ready to upgrade your projects.
If you want to check out features of other releases, take a look at the following articles:
- 5 Features in npm 10
- Exploring New Features in npm 9
- A Quick Glance at npm 8 Features and Predictions for npm 9 — A Close Look at ES Modules (ESM)
Here is a list of Node.js:
- 7 Major Features of Node.js 21
- 6 Major Features of Node.js 20
- 6 Major Features of Node.js 19
- 5 Major Features of Node.js 18
- 3 Major Features of Node.js 17
- A Quick Look at the Node.js 16 Features
- What’s New in Node.js 15
Thanks for reading.
Want to Connect?
If you are interested, check out my directory of web development articles.
