背景
在 gayhub 闲逛时, 不知怎么突然想看看 create-react-app(以下简称 create) 的源码, 来到项目主页, 无意中瞄到 README.md 好像发生了一点小小的变化
npx create-react-app my-app
这个 npx 是什么鬼, 突然想起来前几天好像也在一些 npm 的工具包上看到过这个玩意儿, 但是没有注意既然今天又碰到了, 那就好好把玩一下, 毕竟 create 也用到了它, 应该是个值得一用的好东西看了下项目的修改记录, 大约是在两个月前加入使用 npx 的, 这也从侧面说明 npx 已基本趋于稳定, 可以大胆的使用了
简述
上网简单查阅了下资料, 原来 npx 是跟随 npm@5.2.0 发布的, 使用 5.2.0 版本之后的 npm, 会自动帮你安上 npx, 这么大的推广力度, 很难不引起关注啊, 之前咋没发现呐? 或许是因为好久都没有升级 npm 版本的缘故吧毕竟本地的 node 版本, 不久以前才从 6.x 升级到的 8.x 对于我们这些前端开发人员来说, 稳定是最重要的, 基本也没有什么切换 node 版本的需求
以下的总结, 基本都是这篇 Medium 上的文章搬过来的, 英语基础不错的同学, 可以尝试直接阅读原文
npx 带来了什么
直接使用项目下的工具包
以前我们使用 create-react-app 初始化一个项目, 大致需要以下步骤:
- `$ npm i create-react-app -g`
- `$ cd project-directory`
- `$ create-react-app my-app`
如果我们使用 npx, 并且刚好在想要创建项目的目录下, 一行命令就可以搞定:
npx create-react-app my-project
npx 帮我们做了什么事呐?
在当前目录下寻找是否存在 create 包
如果没有找到, 则会去根目录下寻找是否全局安装过 create
如果还没有找到, 就会下载并使用最新版本的 create , 然后初始化项目, 完成后, 不会有任何多余依赖的残留
相比于之前的使用方式, npx 带给我们的便处是显而易见的对于 create 这种我们使用频率并不高的工具, 其实安装在全局下的必要性并不大下一次使用的时候, 说不定就之前已经迭代好几个版本了对于 mac 用户来说, 容量寸土寸金, 而 node_modules 的大小却是不容小觑的
直接运行远端脚本
gist 在日常开发中使用还是比较广泛的, 没有程序员愿意一次又一次的写重复写代码如果我们想执行放在 gist 上的一段 node 脚本, 直接用 npx 一行命令即可搞定
- $ npx https://gist.github.com/zkat/4bc19503fe9e9309e2bfaa2c58074d32
- npx: installed 1 in 5.217s
- yay gist
需要注意的是, 出于安全性考虑, 请先通读 gits 上的代码是安全的, 再执行命令, 就像你要执行一段. sh 脚本一样小心
作为一个工具包的开发者
我可以直接在 README.md 中写上 $ npx my-tool, 让用户使用我开发工具, 这个使用体验可以说是相当舒爽的 你可以直接体验一些有意思的工具包, happy-birthday,benny-hill,workin-hard,cowsay, yo, create-react-app, npm-check 等, 详见 awesome-npx 也许你担心放在 snpm 上的工具无法使用, 其实大可放心, 用 nrm 等工具指定下源即可完美下载使用或者麻烦一点就这样写:
npx --registry=http://registry.npm.souche-inc.com @souche-f2e/sad-cli -h
, 指定 registry 即可
shell auto-fallback
这个不知道翻译合适, 就先不翻译了 其作用就是让我们方便地使用不同版本的依赖包, 比如我本地安装的是 babel@6.x, 但是我想使用 babel@5.x 看看执行效果, 直接执行
babel@5 filename.js
即可
- $ bebel@5 -V
- babel@5 not found. Trying with npx...
- 5.8.38 (babel-core 5.8.38)
当然想只用这个功能, 还是需要做一些配置的: 将对应的代码添加到对应的文件中即可,
- ~/.bashrc, ~/.zshrc, ~/.config/fish/config.fish
- For bash@>=4:
- $ source <(npx --shell-auto-fallback bash)
- For zsh:
- $ source <(npx --shell-auto-fallback zsh)
- For fish:
- $ source (npx --shell-auto-fallback fish | psub)
参考链接
Introducing npx: an npm package runner Kat Marchán Medium
来源: https://juejin.im/post/5a9f5c43f265da238155293e