npm vs yarn vs npx

最近在安装 create-react-app 的时候发现安装方法有三种,

  • npx create-react-app my-app(pm 5.2+ and higher)
  • npm init react-app my-app(npm 6+)
  • yarn create react-app my-app(Yarn 0.25+)
  • npm install -g create-react-appcreate-react-app my-app(npm 5.1 or earlier)

我们来对比一下这些安装方式。

npm 或者 yarn 全局安装

首先我们来对比一下 npm 和 yarn 的安装命令:

npm yarn 功能
npm install(npm i) yarn install(yarn) 根据 package.json 安装所有依赖
npm i –save-prod(-P) [package] yarn add [package] 添加依赖包到 dependencies
npm i –save-dev(-D) [package] yarn add [package] –dev 添加依赖包至 devDependencies
npm i -g [package] yarn global add [package] 进行全局安装依赖包

npm 5.1 之前我们安装一个全局命令都是使用 npm i -g [package] 安装好,再执行对应命令。这种方式直观,简单。但是会发现,全局命令一般不会经常执行的,比如 create-react-app,我可能一个月才执行一次,但每次执行可能版本都升级了,我们必须再一次全局安装,执行命令,这样很麻烦。

npx是什么?

npm v5.2.0引入的一条命令(npx),会帮你执行依赖包里的二进制文件。npx 会自动查找当前依赖包中的可执行文件,如果找不到,就会去 PATH 里找。如果依然找不到,就会帮你安装!

所以以前我们安装了某个包在dependencies里面,比如nodemon,会在package.json的scripts里这样写./node_modules/.bin/nodemon bin/www,因为如果直接写nodemon bin/www必须保证nodemon在别人的系统里是全局安装的,然而即使你在readme里写了使用本软件之前需要安装全局依赖,也会存在版本冲突问题,他系统全局之前可能已经安装过,而且版本不一样。使用npx可以直接这样写 npx nodemon bin/www

上面说的全局命令也一样,使用npx可以保证你执行好对应命令,即使这个包你从没安装过。

npm init

npm init 在我们看来就是创建 package.json 文件,然而还有一个妙用:

1
2
npm init [<@scope>/]<name> (same as `npx [<@scope>/]create-<name>`)
npm init initializer -> npx create-initializer

initializer会被npx 下载一个名为create-initializer的包。这样其实还是利用了npx,想当是npm init做了一个别名。

yarn create

1
yarn create <starter-kit-package> [<args>]

yarn create会依次帮你做两件事:

  1. 全局下载<starter-kit-package>,如果包存在就会自动更新。
  2. 执行上面全局安装包里package.jsonbin命令,使用 <args>参数。
1
2
3
4
yarn create react-app my-app
// 相当于:
yarn global add create-react-app
create-react-app my-app
坚持原创技术分享,您的支持将鼓励我继续创作!