详解npx的使用教程

偏执的太偏执、 2023-09-27 15:11 1阅读 0赞

### 是什么： ###

是npm的自带的一个命令

### 出现的原因 ###

很多人喜欢全局安装插件，比如说 react 、vue-cli 脚手架、webpack …  
这样做很可能带来的一个问题，请设想： 公司需要你搭建3个项目分别用webpack 2、webpack 3、webpack 4…无论我们全局安装哪个版本，都势必给我们带来不便，那么我们的做法应该不全局安装，而是根据不同的项目安装不同版本的vue-cli脚手架

所以做法可能如下

//在当前项目
    npm i webpack @4

然后运行项目

//然后执行命令（下载后的webpack在node_modules/.bin文件夹里面）
    node_modules/.bin/webpack
    注意：直接运行webpack是不行的，因为没有全局安装

但是…是不是感觉很麻烦呢？  
所以，npx的作用就很明显了，它会默认执行node\_modules/.bin，所以我们这样写

npx webpack

上面的写法还不够优雅，我们可以在package.json文件里这样写：

// 在package.json里npx可以省略不写的
    script:{
        
    	"build" : npx webpack  或 webpack  
    }

### 作用有以下几个： ###

## 运行本地命令 ##

使用`npx 命令`时，它会首先从本地工程的`node_modules/.bin`目录中寻找是否有对应的命令

例如：

npx webpack

上面这条命令寻找本地工程的`node_modules/.bin/webpack`

如果将命令配置到`package.json`的`scripts`中，可以省略`npx`

## 临时下载执行 ##

当执行某个命令时，如果无法从本地工程中找到对应命令，则会把命令对应的包下载到一个临时目录，下载完成后执行，临时目录中的命令会在适当的时候删除

例如：

npx prettyjson 1.json

npx会下载`prettyjson`包到临时目录，然后运行该命令

如果命令名称和需要下载的包名不一致时，可以手动指定报名

例如`@vue/cli`是包名，`vue`是命令名，两者不一致，可以使用下面的命令

npx -p @vue/cli vue create vue-app

## npm init ##

`npm init`通常用于初始化工程的`package.json`文件

除此之外，有时也可以充当`npx`的作用

npm init 包名 # 等效于 npx create-包名
    npm init @命名空间 # 等效于 npx @命名空间/create
    npm init @命名空间/包名 # 等效于 npx @命名空间/create-包名

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关 Jedis使用教程详解

目录一、前言二、基本使用三、Jedis连接池四、连接池参数五、哨兵模式六、集

港控/mmm°/ 2024年03月16日 11:00/ 0 赞/ 47 阅读

相关非常好用的 npx!!!

非常好用的 npx [npx是什么][npx] [解决什么问题][Link 1] [使用本地已安装的可执行工具，而不需要配置 scri

谁践踏了优雅/ 2023年10月11日 14:23/ 0 赞/ 59 阅读

相关 Postman 使用教程详解

Postman页面![img][] 2、新建一个项目直接点击左边栏上面的添加目录图标来新增一个根目录，这样就等于新建了一个项目，我们可以把一个项目或一个模块的用例都存

缺乏、安全感/ 2023年09月30日 15:58/ 0 赞/ 49 阅读

相关详解npx的使用教程

是什么：是npm的自带的一个命令出现的原因很多人喜欢全局安装插件，比如说 react 、vue-cli 脚手架、webpack … 这样做很可能带来的一

偏执的太偏执、/ 2023年09月27日 15:11/ 0 赞/ 2 阅读

相关 npm--npx

原文网址：[npm--npx\_IT利刃出鞘的博客-CSDN博客][npm--npx_IT_-CSDN] 其他网址 > [npx和npm的区别\_MichaelAn的博

﹏ヽ暗。殇╰゛Y/ 2022年11月21日 14:43/ 0 赞/ 176 阅读

相关 npx 介绍

npm 的有些命令只能通过 package.json 里的 scripts 里定义然后执行命令，但是 npx 可以直接执行 node\_module 包中的命令。比如：

缺乏、安全感/ 2022年11月20日 12:55/ 0 赞/ 177 阅读

相关 npx 是什么？

npm v5.2.0引入的一条命令（npx），引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验。举例：使用`create-react-app`创建一个rea

以你之姓@/ 2022年04月02日 09:30/ 0 赞/ 148 阅读

相关 Privoxy教程使用详解

简介 Privoxy 是一个代理软件简单说，就是进出你电脑的流量守门人。借由 Privoxy，我们可以控制出去的请求，还可以改写返回的响应。不必要的请求 – 比如视

今天药忘吃喽~/ 2021年12月10日 05:17/ 0 赞/ 767 阅读

相关有趣的npx

在更新 npm 5.2.0 的时候发现会买一送一，自动安装了 npx。 npx 会帮你执行依赖包里的二进制文件,也就是说 npx 会自动查找当前依赖包中的可执行文件，

缺乏、安全感/ 2021年12月03日 08:01/ 0 赞/ 363 阅读

相关 git的使用教程实战详解

之前项目一直使用的是svn，换了git之后看了网上一大堆教程，结果还是一脸懵逼的状态。最后还是在大神的带领下终于有所领悟，今天带大家分享一下。首先说一下svn：svn比较适

柔情只为你懂/ 2021年09月12日 07:20/ 0 赞/ 475 阅读