非常好用的 npx!!!

时间：2024-11-11 15:07:20

非常好用的 npx

  • npx是什么
  • 解决什么问题
    • 使用本地已安装的可执行工具，而不需要配置 scripts
    • 执行一次性命令
    • 使用不同的node版本运行命令
  • 如何使用
  • 典型的使用场景
  • Tip

npx是什么

npm v5.2.0 引入的一条命令（npx），npx 会帮你执行依赖包里的二进制文件。引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验。（这句话什么意思？）
在以往中，我们在 node 项目中要执行一个脚本，需要将它在 scripts 中声明

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "init:runtime-only": "vue init webpack vue-cms"
}

然后执行命令

npm run init:runtime-only

它其实本质还是运行 vue init webpack vue-cms

用了 npx 以后呢，你不需要在 scripts 中声明了，就可以直接敲键盘了（npx 开头，然后接你要执行的内容）：

npx vue init webpack vue-cms

解决什么问题

使用本地已安装的可执行工具，而不需要配置 scripts

在过去的几年中，npm 生态越来越倾向于将 devDependencies 安装包作为项目本地依赖安装，而不是让用户在全局安装。这意味着像 mocha、gulp、bower、webpack 甚至 Vue 这种我们过去主要是全局安装的命令行工具，现在可以基于项目维度来管理他们的版本。【现在的工具包一般都安装在局部，而不是全局。下图是 webpack 的文档，里面写的是建议本地安装。】

webpack

关于为什么本地安装，而不全局安装，这里其实也已经点明了原因。

包括 vue-cli ，我也是本地安装的，而不是全局。这样会非常灵活，你可以使用 vue-cli@，也可以使用 vue-cli@ 。我的电脑上面有很多 Vue 项目，依赖的 Vue 版本都不太一样。

那么，对于本地安装的 vue-cli ，你在初始化项目的时候，你可能需要如下操作：

./node_modules/.bin/vue init webpack yourproject

或者，在 run-script 中声明：

 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "init-mall": "vue init webpack mall",
   "init:runtime-only": "vue init webpack vue-cms",
   "init-yourproject": "vue init webpack yourproject"
 }

然后，执行：

npm run init-yourproject

可以看到，这些 init 的操作都是属于一次性操作，但是却需要在 scripts 中声明，不科学！

那么，现在有了 npx 以后，操作就变得简单了：
我们在一个空的文件夹中，安装了本地 vue-cli，然后不需要写 scripts，直接使用 npx。

npx vue init webpack yourproject

执行一次性命令

npx

使用 npx create-react-app my-cool-new-app 安装一个临时 create-react-app 并调用它，而不用污染全局安装或需要多个步骤。

当你想尝试一些命令行工具，需要全局安装它但只运行一次。（我想你应该很不开心吧）npx 能很好的解决这种麻烦哦。当你执行 npx <command> 而 <command> 并不在你的系统变量路径中，npx 会自动为你从 npm 上下载安装这个包，并且执行它。当做完这些事情后，已安装的包不会出现在你的全局安装中，所以不用担心长期使用所带来的全局污染。

使用不同的node版本运行命令

npx -p node@<version> node -v 可以使用指定版本的node运行命令

你可以使用 npx 的 -p 选项指定安装特定的包，并把它们添加到系统变量中。这让你可以做一些像 npx -p node@6 这样有趣的事情。通过 npm init、npm test 就像是在全局环境时 node@6 下安装和测试当前的包。我自己总是用到这个功能 —— 在最近的一个项目中我甚至不得不大量的使用这个功能，因为我一个正在测试的库无法运行在 node@8 下面。而且我发现在这种情况下，这个功能比那些我总是会错误配置的版本管理工具要好用得多。

如何使用

前提：npm 5.2.0 以上的版本就会有 npx 了。
例子：

npm i webpack -D
./node_modules/.bin/webpack -v

有了 npx，你只需要这样

npm i webpack -D
npx webpack -v

也就是说 npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，就会帮你安装！

npx 甚至支持运行远程仓库的可执行文件，如

npx github:piuccio/cowsay hello

再比如 npx http-server 可以一句话帮你开启一个静态服务器！

npx http-server

典型的使用场景

典型的使用场景，我觉得应该就是解决一次性命令的使用问题。

之前为了初始化项目，需要在本地安装了 vue-cli 以后，写很多 vue init 来构建不同的项目。
现在，再也不用为了执行这些一次性命令，来写这些 scripts 了。

Tip

这里有一份优秀的 npx 使用范例在 awesome-npx 仓库中。

---------------------------(正文完)------------------------------------
一个前端的学习交流群，想进来面基的，可以点击这个logo，或者手动search群号：685486827


写在最后： 约定优于配置-------软件开发的简约原则.
-------------------------------- (完)--------------------------------------

我的：
个人网站： /neveryu/
Github： /Neveryu
新浪微博： /Neveryu


更多学习资源请关注我的新浪微博…

相关文章