npm网站收集了前端的各种工具.: jQuery, bootStrap, flexible.js, echarts.js........
你是如何下载的?官网下载?
有没有一个想法:在一个地方下载所有的库(模块.....)
给大家介绍一个很好用的"模块超市"npm
接下来,给大家详细介绍一下npm,以及使用步骤
去npm网站下载我们的需要的代码时,它们是以"包"这种结构放在npm网站上的。我们需要了解下包和模块的关系。下面用一张图帮助大家理解:
- nodejs中一个模块就是一个单独的js文件
- Node.js 中的第三方模块,又叫做包、第三方包、依赖包
- 包是多个模块的集合。一个模块的功能比较单一,所以一个包一般会包含多个模块。
- npm 管理的单位是包。类似于网站和网页的区别:一个网站一般会包含多个网页。
所以应该如何去使用npm下载使用包呢?
第一步:初始化项目
这里提到的项目并不是某个具体的功能,只是要创建一个空文件夹即可(注意,不要起中文名字哈)。
进入到项目所在的根目录下,启动小黑窗
输入以下命令:
npm init --yes
(--与yes之间没有空格, -- 与init之间有空格 或者是 npm init -y)
nit命令用来在根目录下生成一个package.json文件,这个文件中记录了我们当前项目的基本信息,它是一切工作的开始。如图:
第二步:安装包
npm 这个超市中有现成的写好的代码,我们想下载来用,这个过程就是安装包,或者叫下包、装包
安装命令: npm i 包名
据我们遇到的实际问题,我们来引入相应的包来解决它们。
第三步:使用包
当我们已经下载好一个包之后,就可以像使用核心模块一样去使用它。
格式是: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);
就可以使用喽~~~
用dayjs为大家举例子:以上代码的整体目录结构
project01
├── node_modules # 统一放置下载的包
│ └── dayjs # 某个包
├── xx.js # 业务代码, 引入dayjs来使用
├── package.json # 记录本项目的信息
└── package-lock.json # 下载包的详细信息
最后大家可以自己去尝试一下npm这个免费的模块超市!