开发工具总结(11)之nodejs、npm和yarn安装和使用和填坑详解

96
AWeiLoveAndroid 11f8cfa8 ec9f 4f82 be92 d6a39f61b5c1
2019.07.05 14:25* 字数 1680

版权声明:本文为博主原创文章,未经博主允许不得转载。https://www.jianshu.com/p/9eba0e2c0697

转载请标明出处:
https://www.jianshu.com/p/9eba0e2c0697

本文出自 AWeiLoveAndroid的博客


在前端开发领域经常会用到npm、nodejs和yarn这些工具下载一些依赖包。许多框架、依赖包或者工具都可以通过它们管理和下载。我对这些不太熟悉,花了一点点时间去学习和研究它们。整理了一篇详细的博客给大家,希望大家多多关注,你想要学习和了解的东西看这一篇博客就够了。如果还没讲到的知识点,建议去相应的官网了解更多知识点。本文详细讲解安装和使用的过程,包括遇到的一些坑的解决。


一、nodejs安装和使用

(1)nodejs下载和安装

1、下载

打开官网下载链接: https://nodejs.org/

我是在5月13号下载的nodejs,当时的稳定版是v8.11.1(2018.3.29发布的稳定版 ), 最新版是 v10.1.0(Current) (2018.5.8发布的)。

我选择稳定版进行下载。如下图:

nodejs稳定版下载

如果你是其他系统,可以选择下方的Other Downloads选择你想要的版本进行下载。或者直接打开网页https://nodejs.org/en/download/进行下载。

下载其它版本
2、安装

下载完成后,双击node-v8.11.1-x64.msi,开始安装Node.js,中间有一个提示选择本地安装路径的(我安装的本地路径为:E:\develop\nodejs\),其它步骤一直next,一直到安装完成。Node.js会默认添加到环境变量。

(2)查看nodejs版本号

输入node -v,或者node --version,即可查看nodejs版本。如图所示:

查看nodejs版本号

查看npm最新版本号,使用npm view node version,如图所示:

查看nodejs最新版本

(3)其它配置

【Tips】如果我希望 将全局模块所在路径和缓存路径放在我node.js安装的文件夹 中,具体步骤如下:

1.首先在我安装的文件夹E:\develop\nodejs下创建两个文件夹node_globalnode_cache,如下图:

配置nodejs

2.想设置全局模块的存放路径和cache路径。通过以下命令,把nodejs安装的全局模块转移到nodejs安装路径内:

npm config set prefix "E:\develop\nodejs\node_global"
npm config set cache "E:\develop\nodejs\node_cache"

如图所示:

配置nodejs安装模块在nodejs安装路径内

3.在环境变量里面的系统变量新建NODE_PATH。(这一步相当关键)

点击我的电脑(计算机) --> 右键选择属性 --> 高级系统设置 --> 高级 --> 环境变量。在系统变量里新建NODE_PATH,输入E:\develop\nodejs\node_global\node_modules

新增NODE_PATH环境变量

4.修改环境变量里面的用户变量里面的PATH

PATH变量中,我们在末尾加入;E:\develop\nodejs\node_global\
如果有冲突,建议把PATH里面的设置的nodejs环境变量配置去掉。

修改path环境变量

二、npm

nodejs自带npm,所以不需要单独下载npm了。

(1)查看npm安装路径

使用命令where npm即可。即可知道npm在电脑上的安装路径。如下图:

查看npm安装路径

(2)查看npm版本号

查看npm版本,输入npm -v,或者 npm --version, 查看npm版本。如图所示:

查看npm版本号

查看npm最新版本号,使用npm view npm version,如图所示:

查看npm最新版本

可以通过命令行npm -l找到这两者的描述,如下图所示:

查看npm版本号的两种方式的区别

具体的完整的各个版本号信息,可以去淘宝npm镜像:https://npm.taobao.org/mirrors/npm/

(3)升级npm

  • 1.如果想升级npm,输入npm install npm@latest -g。这里的latest表示最新版本。
  • 2.你也可以使用具体的版本号,例如我们输入命令:npm install npm@6.10.0 -g表示下载6.10.0这个版本的npm。关于查看各个版本号的网址上文有讲解,这里就不重复了。

(4)加快npm启动速度(3种方式)

  • 1.使用以下命令:npm config set registry=http://registry.npm.taobao.org/
  • 2.使用全局设置的命令:
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
  • 3.找到node.js的安装目录,进入nodejs\node_modules\npm找到文件npmrc,打开后在该文件末尾加上这一行registry = https://registry.npm.taobao.org

三、yarn

(1)yarn下载和安装

安装的两种方式:

方式1:使用msi安装:

首先进入yarn的官网 https://yarnpkg.com/zh-hans/docs/install#windows-stable,然后选择稳定版进行下载。然后双击安装即可。我电脑里面其实已经通过msi文件安装了一个yarn,路径为:E:\develop\yarn1.7.0\

方式2:通过npm命令进行安装:

执行命令npm install yarn -g (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到C:\Users\Administrator\AppData\Roaming\npm路径中。

(2)查看安装路径

如果不知道路径,可以使用where yarn命令查看电脑yarn的安装路径,可以看到我的安装路径为:E:\develop\yarn1.7.0\

查看yarn的安装路径

(3)查看yarn版本号

执行 yarn -v 或者yarn --version ,查看安装的yarn版本号,比如我的版本号是1.7.0

查看yarn的版本号

(4)升级yarn

1.如果通过msi安装的,可以卸载旧版本的yarn,然后官网下载新版的yarn进行安装。下载地址请看上文介绍。

【注意】通过msi安装的yarn并不会覆盖通过npm安装的yarn,两者同时存在。安装和卸载,都分开的。

2.命令行直接安装(命令资料参考自官网,不清楚有没有错误)
升级方式 命令 命令示范 含义
npm命令升级 npm install 包名称@版本号 -g npm install yarn@1.7.0 -g 加上版本号全局安装升级
npm命令升级 npm install 包名称@latest -g npm install yarn@latest -g latest全局安装升级
yarn命令升级 yarn upgrade 包名称 yarn upgrade yarn 直接安装升级
yarn命令升级 yarn upgrade 包名称@版本号 yarn upgrade yarn@1.7.0 -g 加上版本号安装升级
yarn命令升级 yarn upgrade –latest 包名称 yarn upgrade –latest yarn latest安装升级

(5)加快yarn启动速度,使用全局设置的命令:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

四、npm和yarn安装库的命令

npm和yarn安装库的命令图解如下表所示:

npm和yarn安装库的命令图解

五、安装路径

各命令以及安装路径如下表所示:

安装路径
  • -g是可以全局复用的,如果使用npm命令,推荐在命令末尾加上-g这个比较好。
  • yarn add命令比较简洁,推荐使用。

六、相关网址

开发工具
开发工具
4.2万字 · 9.0万阅读 · 245人关注
开发工具的全面总结,工具使用,工具之间的对比,还有填坑指南,这里都有详细讲解,希望能给各位IT开发人员提供帮助。