npm
了解npm
- npm 全称
Node Package Manager
(node 包管理器),它的诞生是为了解决 Node 中第三方包共享的问题。 - npm 不需要单独安装。在安装Node的时候,会连带一起安装npm。
npm -v
检查安装的情况。- 官网https://www.npmjs.com/
当我们谈到npm时,我们在说两个东西:
- 命令行工具。这个工具在安装node时,已经自动安装过了。
- npm网站。这是一个第三方模块的"不花钱的超市",我们可以自由地下载,上传模块。
包(package)与模块关系
npm网站收集了前端的各种工具.
之前学习过:
jQuery, bootStrap, flexible.js, arttemplate.js, layui.js, echarts.js........
你是如何下载的?
对应官网下载
有没有一个想法:在一个地方下载所有的库(模块.....)
npm网站上去下载我们的需要的代码时,它们是以"包"这种结构放在npm网站上的。先来了解下包和模块的关系。
- nodejs中一个模块就是一个单独的js文件
- 包是多个模块的集合。一个模块的功能比较单一,所以一个包一般会包含多个模块。
- npm 管理的单位是包。类似于网站和网页的区别:一个网站一般会包含多个网页。
npm下载使用包
分成三步:
- 初始化项目。
npm init
如果之前已经初始化,则可以省略。 - 安装包。
npm install
包名。 - 引入模块,使用。
保持联网的状态~~
第一步:初始化项目
这里提到的项目并不是某个具体的功能,只是要创建一个空文件夹即可(注意,不要起中文名字哈)。
进入到项目所在的根目录下,启动小黑窗(按下shift键,点击右键,在弹出的菜单中选择 “在此处打开命令行”)
输入如下命令:
npm init --yes
// --与yes之间没有空格, -- 与init之间有空格
// 或者是 npm init -y
init
命令用来在根目录下生成一个package.json
文件,这个文件中记录了我们当前项目的基本信息,它是一切工作的开始。
第二步:安装包
npm 这个超市上有好的代码,我们想下载来用 ------ 安装包
生成了package.json
文件之后,我们就可以来安装第三方包了。在npm官网中,有上百万个包,供我们使用(你需要在npm网上注册帐号,登陆上去,才可以看到如下的数据,如果只是下载安装包,则并不需要注册)。
根据我们遇到的实际问题,我们来引入相应的包来解决它们。例如,我们在开发一个项目,其中涉及一些对日期时间的处理可以安装dayjs
包。
安装day.js包
day.js是一个专门用来处理日期时间的一个包
npm install dayjs
第三包:使用包
当我们已经下载好一个包之后,就可以像使用核心模块一样去使用它。
格式是:const 常量名 = require('包名')
这个格式与引入核心模块的格式是一样的(不需要像自定义模块那样加./
)。
// 从npm下载 别人写的好代码,在本地引入,并使用
const dayjs = require('dayjs')
console.log( dayjs()
.startOf('month')
.add(1, 'day')
.set('year', 2018)
.format('YYYY-MM-DD HH:mm:ss') );
console.log(dayjs);
npm init
命令
使用:
在某个目录下开启小黑窗,输入如下命令:
# init 初始化
npm init
它会启动一个交互式的程序,让你填入一些关于本项目的信息,最后生成一个package.json
文件。
如果你希望直接采用默认信息,可以使用:
npm init --yes
// 或者是 npm init -y
说明:
- 这个命令只需要运行一次,它的目的仅仅是生成一个
package.json
文件。 - 如果项目根目录下已经有了
package.json
文件,就不需要再去运行这个命令了。 - 这个
package.json
文件后期是可以手动修改的。
package.json文件
它一般是由npm init
命令创建出来的,它的整体内容是一个json字符串,用来对当前项目进行整体描述。其中最外层可以看作是一个js的对象(每一个属性名都加了"",这就是一个典型的json标记)。这个文件中有非常多的内容,我们目前学习如下几个:
- name: 表示这个项目的名字。如是它是一个第三方包的话,它就决定了我们在require()时应该要写什么内容。
- version:版本号
- keywords:关键字
- author: 作者
- descrption: 描述
其它可参考
1.http://javascript.ruanyifeng.com/nodejs/packagejson.html
2.http://caibaojian.com/npm/files/package.json.html
node_modules文件夹
作用
在使用npm install
命令时,会从npm网站下载对应的包到这个文件夹中,这个文件夹中保存着我们从npm中下载来的第三方包。
执行逻辑
当键入npm install XXX
之后(这里假设这个XXX包是存在的,也没有出现任何的网络错误):
- 如果有
package.json
(1) 修改package.json文件。根据开发依赖和生产依赖的不同,决定把这句记录添加在devDependencie
s或者是dependencies
列表中。
(2) 修改node_modules文件夹- 如果有
node_modules
文件夹,则直接在下面新建名为XXX的文件夹,并从npm中下来这个包。如果这个包还有其它的依赖,则也会下载下来。 - 如果没有
node_modules
,则先创建这个文件夹,再去下载相应的包
- 如果有
- 如果没有
package.json
。会给一个警告信息。
说明:
- 建议先用
npm init
命令创建package.json
之后,再去npm install 包
- 在分享代码时,我们一般不需要把
node_modules
也给别人(就像你不需要把jquery.js给别人,因为他们可以自己去下载)。对方拿到我们的代码之后,先运行npm install
(后面不接任何的包名),自己去安装这些个依赖包。
全局安装包和本地安装包
简介
我们通过npm install
命令来安装包,简单说就是把包从npm的官网(或者是指定的镜像源)下载到我们自己的电脑中。那具体这个包下载到哪里了,还是有一点讲究的。
分成两类:
- 全局安装: 包被安装到了系统目录(一般在
系统盘
的node_modules
中)。- 命令:
npm install -g 包名
或者npm install 包名 -g
- 辅助提示:
- 命令:
npm root -g // 查看全局包的安装目录
npm list -g --depth 0 //查看全局安装过的包
- 局部安装(或者叫本地安装),包安装在当前项目的根目录下(与
package.json
同级)的node_modules
中。- 命令:
npm install 包名
- 命令:
全局包与本地包的区别
- 全局安装的包一般可提供直接执行的命令。我们通过对一些工具类的包采用这种方式安装,如:
gulp, nodemon, live-server,nrm等。 - 本地安装的包是与具体的项目有关的, 我们需要在开发过程中使用这些具体的功能。
一个经验法则:
- 要用到该包的命令
执行任务
的就需要全局安装。 - 要通过
require引入
使用的就需要本地安装。
开发依赖和生产依赖
简介
在本地安装包时,表示我们这个项目要用到这个包,换句话说,我们这个项目要想成功运行,要依赖于这些个包。
但在,具体在项目进行的哪一阶段依赖于这些包呢?也有具体的差异。
理解
举个生活中建房子的场景:
在建房子时,我们依赖:
- 辅助工具:尺子,水平仪,脚手架
- 原材料:钢筋,水泥
在住房子时,我们依赖:
- 原材料:钢筋,水泥
在房子进入到了使用阶段时,我们就不再需要尺子,水平仪,脚手架等这些个辅助工具了。我们买一所房子时,也不应该支付巨型脚手架的费用。 在开发前端项目的过程中也存在类似的问题:我们的开发过程和使用过程是分开的,开发项目时需要用到的包可能在使用项目时就不需要用到了。
假设有这么两个包:
gulp-htmlmin
。这个工具是用来把html代码进行压缩的(去掉空格,换行等),我们需要在开发时使用它,而项目一旦上线,我们就不再需要它了。,因此将它归类为"开发依赖"。- jquery。在开发时参与源码编写,在发布上线的生产环境中也是需要它的。不仅在开发环境编写代码时要依赖它、线上环境也要依赖它,因此将它归类为"生产依赖"。
这个差异就表现在,我们在打包项目时,就不需要打包“开发依赖”的包,这样减少成本。
—webpack
操作
这两种依赖关系,在具体操作的过程中,有如下区别
- 保存到开发依赖(
devDependencies
)
npm install 包名 --save-dev
// 或者 npm install 包名 -D
通过这种方式安装的包出会现在package.json
文件中的devDependencies
字段中。
- 保存到生产依赖(
dependencies
):
npm install 包名
// 或者 npm install 包名
// 或者 npm install 包名 -S
技巧
- 加了
-D
: 开发依赖,这就表示这个工具包只在开发项目时候要用,项目开发完成就不需要 - 不加
-D
: 生产依赖,这就表示这个工具包在项目做完了之后也要用。
什么包加上-D,什么包不要加?------- 看文档