npm v7 Highlights - Speaker Deck

Slide 1

Slide 1 text

V7 Highlights 27 Oct 2020 • GitHub Presente Meetup @ruyadorno

Slide 2

Slide 2 text

Ruy Adorno Software Dev npm cli @GitHub

Slide 3

Slide 3 text

• Make sure to get it • Out with Node.js 15 • Bugs / Feedback? Reach out:  github.com/npm/cli

Slide 4

Slide 4 text

• This presentation takes you through a quick and simple demo of a project using npm7 • Let’s go

Slide 5

Slide 5 text

• npm exec is a new command that brings npx to the core cli

Slide 6

Slide 6 text

• npm exec is a new command that brings npx to the core cli • In this example we are going to run an Yeoman Generator by installing both the yo runner and generator-node packages and running as a single command

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

• npm ls now will only show top-level packages by default • In order to get the same output as npm6 you can now use the “all” option: npm ls --all

Slide 12

Slide 12 text

•

Slide 13

Slide 13 text

• npm audit got a much more clean and straightforward output, it no longer uses tables to display vulnerabilities and vuln count is no longer multiplying every single node in the tree

Slide 14

Slide 14 text

• Let’s install a version of mkdirp that has a known CVE open in the npm security db

Slide 15

Slide 15 text

• npm install output still let us know about the vulnerabilities at the end of an install

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

• npm audit ﬁx --force will solve the vulnerability by updating to semver-major versions which might in turn contain potential breaking changes

Slide 19

Slide 19 text

• peerDependencies are now installed by default! Let’s run through a quick example by installing a dep that has a peer dep to react and see how it gets installed at the end

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

• workspaces time!

Slide 25

Slide 25 text

• workspaces time! • In this example we’re going to create a sub package (or a workspace) that we’re later on going to deﬁne as a workspace in our package.json, get it properly linked on our npm install and then require it from our app

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

• ☝ Workspace created, let’s now add it to the workspaces property of the top-level package.json ﬁle

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

• All set up! Let’s check everything

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

• One of the very nice things about the UX around workspaces is the possibility to require that workspace with the same syntax you would use to require a package downloaded from the registry ⬇

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

• This initial workspaces support will help unlock many workﬂows to npm users and there’s much more coming to v7.x with new commands to help working with workspaces. ❤

Slide 38

Slide 38 text

@ruyadorno   and remember to: npm install -g npm@7 Thanks!