npm怎么安装与使用

发布时间:2022-06-09 14:55:41 作者:iii
来源:亿速云 阅读:262

这篇文章主要讲解了“npm怎么安装与使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“npm怎么安装与使用”吧!

一、由来

前端是怎么共享代码的呢?

1、在 GitHub 还没有兴起的年代,前端是通过网址来共享代码

比如你想使用 jQuery,那么你点击 jQuery 网站上提供的链接就可以下载 jQuery,放到自己的网站上使用

npm怎么安装与使用

2、GItHub 兴起之后,社区中也有人使用 GitHub 的下载功能:

npm怎么安装与使用

3、麻烦

当一个网站依赖的代码越来越多,程序员发现这是一件很麻烦的事情:

有些程序员就受不鸟了,一个拥有三大美德的程序员 Isaac Z. Schlueter (以下简称 Isaaz)给出一个解决方案:用一个工具把这些代码集中到一起来管理吧!

这个工具就是他用 JavaScript (运行在 Node.js 上)写的 npm,全称是 Node Package Manager

4、具体步骤

NPM 的思路大概是这样的:

1. 买个服务器作为代码仓库(registry),在里面放所有需要被共享的代码

2. 发邮件通知 jQuery、Bootstrap、Underscore 作者使用 npm publish 把代码提交到 registry 上,分别取名 jquery、bootstrap 和 underscore(注意大小写)

3. 社区里的其他人如果想使用这些代码,就把 jquery、bootstrap 和 underscore 写到 package.json 里,然后运行 npm install ,npm 就会帮他们下载代码

4. 下载完的代码出现在 node_modules 目录里,可以随意使用了。

这些可以被使用的代码被叫做「包」(package),这就是 NPM 名字的由来:Node Package(包) Manager(管理器)。

5、发展

Isaaz 通知 jQuery 作者 John Resig,他会答应吗?这事儿不一定啊,对不对。

只有社区里的人都觉得 「npm 是个宝」的时候,John Resig 才会考虑使用 npm。

那么 npm 是怎么火的呢?

npm 的发展是跟 Node.js 的发展相辅相成的。

Node.js 是由一个在德国工作的美国程序员 Ryan Dahl 写的。他写了 Node.js,但是 Node.js 缺少一个包管理器,于是他和 npm 的作者一拍即合、抱团取暖,最终 Node.js 内置了 npm。

后来的事情大家都知道,Node.js 火了。

随着 Node.js 的火爆,大家开始用 npm 来共享 JS 代码了,于是 jQuery 作者也将 jQuery 发布到 npm 了。

所以现在,你可以使用 npm install jquery 来下载 jQuery 代码。

现在用 npm 来分享代码已经成了前端的标配。

二、npm安装

以安装Vue项目为例,在使用之前,我们先来掌握3个东西是用来干什么的。

1、下载nodejs

windows下的NodeJS安装是比较方便的(v0.6.0版本之后,支持windows native),只需要登陆官网(http://nodejs.org/),便可以看到首页的“INSTALL”按钮。

如图,下载12.18.0 LTS (推荐给绝大部分用户使用)直接点击就会自动下载了。

npm怎么安装与使用

下载后双击安装

npm怎么安装与使用

可以使用默认路径。

注意,如下图所示,在安装node.js时,将一起自动安装npm包管理器,同时将两者自动添加到系统的环境变量。

npm怎么安装与使用

一路点Next,最后点Finish完成

npm怎么安装与使用

2、检查安装目录,检查文件系统是否正常。

是否在安装目录下存在node.exe、npm.cmd文件和node_modules目录等。

npm怎么安装与使用

3、打开CMD,检查是否正常

查看node.js和npm的环境变量是否增加

echo %Path%

通过命令查看node.js和随着它一起安装的npm模块的版本号。

node –v
# v12.18.0

npm –v
# 6.14.4

npm怎么安装与使用

4、查看npm的本地全局仓库

npm list -global

npm怎么安装与使用

注意:npm的本地全局仓库在C系统盘的用户目录。即C:\Users\bobin.yang\AppData\Roaming\npm。

5、配置镜像站

npm config set registry=http://registry.npm.taobao.org

npm怎么安装与使用

6、 显示所有配置信息

npm config list

我们关注一个用户配置文件.npmrc,可以看到刚才的配置信息

npm怎么安装与使用

npm怎么安装与使用

7、检查一下镜像站行不行

命令1

npm config get registry

npm怎么安装与使用

命令2

npm info vue # 看看能否获得vue的信息

npm怎么安装与使用

8、升级npm为最新版本

npm install ***为安装或更新命令 加上-g这个参数的意思是装到global目录下即C:\Users\bobin.yang\AppData\Roaming\npm,否则为安装到当前目录下。

单独更新npm :

npm install npm -g

再次查看npm的版本:

npm -v

npm怎么安装与使用

再次查看global里的模块,现在不为空了,已经读了NPM模块了。

npm list -global

npm怎么安装与使用

npm怎么安装与使用

三、NPM 用法

1、包安装方式

本地模式和全局模式的特点如下:

2、常用命令

NPM提供了很多命令,例如install和publish,使用 npm help 可查看所有命令。

3、使用 package.json

当你的项目需要依赖多个包时,推荐使用 package.json。其优点为:

创建package.json文件

4、更改全局安装目录

使用npm config命令可以达到此目的。

npm config set prefix <目录>

或者手动在 ~/.npmrc文件中进行配置:

prefix = /home/yourUsername/npm

更改目录后记得在系统环境变量 PATH中添加该路径:

export PATH=~/npm/bin:$PATH

5、安装时保存到依赖项

npm install默认将所有指定的软件包保存到依赖项中。此外,您可以使用一些标志来控制在何处以及如何保存它们:

四、安装CNPM

npmmirror 中国镜像站

$ npm install -g cnpm --registry=https://registry.npmmirror.com

五、关于npm run

1、npm run XXX是执行配置在package.json中的scripts 配置的 value。

"scripts": { 
"serve": "vue-cli-service serve", 
"build": "vue-cli-service build", 
"lint": "vue-cli-service lint" 
},

npm run serve 实际运行的是 vue-cli-service serve

2、比如: 
只有在package.json中的脚本配置了,你才能run,所以不是所有的项目都能npm run dev/build。 
要了解这些命令做了什么,就要去scripts中看具体执行的是什么代码。 
这里就像是一些命令的快捷方式,免去每次都要输入很长的的命令(比如unit那行)。

3、dev和serve的区别

4、查看当前项目的所有 npm 脚本命令 
其实也可以在package.json的看scripts对象里有什么属性

npm run

5、dev,build等没有强制含义,我们在通常情况下:

如果对npm run这一些列脚本命令有疑惑,可以看npm-hooks

六、npm与Yarn

Yarn发布于2016年10月。

1、安装yarn

npm install -g yarn

2、yarn和npm命令对比:

npm install : yarn 
npm install react : yarn add react 
npm uninstall react : yarn remove react 
npm install react --save-dev : yarn add react --dev 
npm update : yarn upgrade 
npm run build : yarn run build

3、yarn的优点:

感谢各位的阅读,以上就是“npm怎么安装与使用”的内容了,经过本文的学习后,相信大家对npm怎么安装与使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

推荐阅读:
  1. npm install、npm install --save与npm install -dev区别
  2. npm安装cnpm

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

npm

上一篇:怎么使用python3线程池ThreadPoolExecutor处理csv文件数据

下一篇:JavaScript中forEach的错误用法有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》