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

nodeJS与npx之间的三两事相关推荐

分享OMS系统实战的三两事
OMS系统实战 1. 前言 2. 架构设计 2.1 业务架构 2.2 系统架构 3. 功能演进 3.1 单据业务演进 3.2 库存管理演进 4. 一般功能设计 4.1 关联数据映射 4.2 状态数据隔 ...
RFID破解三两事（原作者：YunFree）
网上看了很多RFID破解的文章,大部分都是工具使用,一步步该怎么操作,基本上没有讲原理的,估计导致了很多初学者非常迷惑,特别是一旦按照操作步骤操作的时候出错时更加迷惑,不知道是什么状况,国内radio ...
RFID破解三两事（转）
RF卡,主要有三种频率的射频,125kHz左右的低频,13.56MHZ的第二代射频标准协议,以及最新的900MHz的新标准.现在的门禁卡,银行卡,身份证大多是13.56MHz的ISO1443A/ISO ...
浅谈AutoCAD下载安装的那些三两事！
很多人在一开始学习CAD的软件时,最关心的问题就是AutoCAD下载安装的这些事.比如电脑选择问题.显卡的问题等等.今天就来以AutoCAD 2022版本为例,聊一聊下载安装的这些事. 首先是硬件方面 ...
Win32 API 三两事
学习下一些底层的API调用,所有内容来自网络 1.APIENTRY,WINAPI,CALLBACK等是什么东西? 通常在函数名前面(返回值后面)会有APIENTRY或WINAPI或CALLBACK修饰 ...
深信服上网行为管理(AC)部署三两事
AC又被我们成为上网行为管理,如下图上图是两种不同大小与型号的AC,分别是1U和2U的两款不同的AC,不同的上网行为管理具备的扩展性以及功能上也是略有区别的. 从上面的两台设备上,我们可以看出,1U ...
Google Protocol Buffers三两事【知识笔记】
目录一.亮点简介二.使用指南1.定义.proto文件2.编译.proto文件3.读写数据三.本文总结四.参考资料一.亮点简介 Protocol Buffers一种结构化数据存储格式.特点:快 ...
Linux使用三两事
修改文件名:mv xx xxx 重构,抽象,不断优化自己的代码开放端口 firewall-cmd --zone=public --permanent --add-port=8080/tcp 以808 ...
行高和高度的三两事：行高＞高度文字靠下；行高＜高度文字靠上
先明白行高的原理,行高包含内容区域的高度.上半行间距和下班行间距.如果line-heigt:300px; font-size:20px;算出间距280px,上下半行间距都为140px.chrome默认 ...

nodeJS与npx之间的三两事

nodeJS与npx之间的三两事相关推荐

最新文章

热门文章