nodeJS与npx之间的三两事

        Node.js 是一个基于V8 JavaScript 引擎却又运行在浏览器之外的、开源的、跨平台的 JavaScript 运行时环境。前端开发的同学都很熟悉，在安装了NodeJS之后，除了node命令之外，顺理成章地我们也能使用npm命令了。

1、npm的使用

        先来讲讲npm的使用，npm是Node.js内置的标准的包管理工具，起初是作为下载和管理 Node.js 包依赖的方式，现在也已成为前端 JavaScript 中使用的工具。

参数	缩写	备注
install	i	安装依赖包
uninstall	uni	卸载依赖包
–save-dev	-D	依赖包写入devDependencies
-save	-S	依赖包写入dependencies 节点
-global	-g	全局安装

        devDependencies 节点下的模块是我们在开发时需要用的，比如项目中使用的 gulp ，压缩css、js的模块。这些模块在我们的项目部署后是不需要的，所以我们可以使用 -save-dev 的形式安装。像 express 这些模块是项目运行必备的，应该安装在 dependencies 节点下，所以我们应该使用 -save 的形式安装。

2、npx的使用

        npm 从5.2版开始，增加了 npx 命令，旨在提高从npm仓库中使用软件包时的体验性。过去我们通常将大多数可执行命令发布为全局的软件包，以使它们处于路径中且可被立即地执行，这样的执行方案不是不行，而是会存在一个问题：不同工程无法真正地安装同一命令的不同版本。

        有了npx工具，这个问题就迎刃而解了。npx提供了一种使用 node.js CLI 工具的新方式，运行 npx commandname 时，npx会按照 node_modules/.bin 目录 ->  系统环境变量 Path 配置 -> 远程库的搜索顺序，自动地找到命令的正确引用，而无需知道确切的路径，也不需要在全局和用户路径中安装软件包。

• webpack的使用

        以前，在使用webpack命令构建工程时，我们有以下两种方式调用：全局安装和项目依赖引用。

（1）全局依赖

npm i webpack -g // 全局安装webpack依赖
webpack // 调用webpack命令构建项目

（2）项目依赖引用

npm i webpack -D  // 在项目内部安装webpack到devDependencies依赖向中
node_modules/.bin/webpack  // 调用webpack构建项目

        后来，nodeJS的开发人员越来越倾向将工具库设置为 devDependencies 安装在本地，而不要求用户在全局进行安装注册，那么如果想要调用这些模块，需要我们定位到 node_modules 中用繁琐的命令才能实现在命令行中对其进行调用，如上所示通过项目依赖引用的方式实现对webpack的使用。而有了 npx 之后，就可以直接使用简化后的命令来调用 webpack 了。

npx webpack --version

        当然，全局安装的webpack模块依旧可以使用npx命令进行调用，因为npx 不仅会到node_modules/.bin中检查命令是否存在，同时还会检查环境变量$path中命令是否存在。

• creact-react-app创建React工程

        npx 的另一个重要的特性是，无需先安装命令即可运行命令。当我们新建一个 react 项目时，接触过 React 开发的同学应该第一时间会想到安装 creact-react-app，但是，为了运行一次 creact-react-app 命令去构建React工程，而不得不在全局安装 creact-react-app，无疑有污染本地环境变量的嫌疑。这个时候，npx 就很 nice 了。

        通过 npx 执行时，如果命令不在本地环境下的 $path 中时，npx 会自动从 npm 注册源中拉取具有该名字的模块并安装调用它。命令如下：

npx create-react-app my-react-app

        在调用完成后，安装的模块并不会被放入本地环境变量中，并且，当 creact-react-app 完成创建一个新的 React 工程之后，则下载的 creact-react-app 代码会被清除，以后再次执行上面的命令，会重新下载 create-react-app。同时，我们还可以使用 @version 语法运行同一命令的不同版本。

npx create-react-app@4.0.3 my-react-app