npm包使用流程与注意事项,马上揭晓答案!

一.npm简介

  NPM的全称是Node Package Manager，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准

• npm 全称 Node Package Manager(node 包管理器)，它的诞生是为了解决 Node 中第三方包共享的问题。
• npm 不需要单独安装。在安装Node的时候，会连带自动安装npm。
• npm -v检查安装的情况。
• npm是JavaScript运行时环境Node.js的默认包管理器。
• npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。
• 2020年3月17日，Github宣布收购npm，GitHub现在已经保证npm将永远免费。

二.产生背景

1.在 npm 出现之前，前端人员开发一个项目，项目中需要引用各种库，比如 jQuery, BootStarp,lodash 等。当时是怎么做的呢？

• 打开该库的官方网站或者 github
• 选择发行版本，点击下载
• 解压出各个压缩文件，js 或 css 文件，移动到项目目录下

每多引用一个框架都会重复以上步骤一次，操作相当繁琐

2.npm出现以后 , 我们下载项目所需要的库的时候 , 就比较方便了 , 减轻了程序员很多的压力。我觉得npm最大的魅力就在于，它可以在一个地方下载所有的库(模块.....)

3.npm网站收集了前端的各种工具. 包括：jQuery, bootStrap, flexible.js, arttemplate.js, layui.js, echarts.js........等等等等

三.使用流程

1. 找自己需要的包

npm 公司提供了一个非常著名的搜包网站：www.npmjs.com/ 它是全球最大的第三方包共享平台。

2.在npm中下载自己需要的包

3.初始化项目

这里提到的项目并不是某个具体的功能，只是要创建一个空文件夹即可（注意，不要起中文名字哈）。

进入到项目所在的根目录下，启动小黑窗

输入如下命令:

npm init --yes
// --与yes之间没有空格， -- 与init之间有空格
// 或者是 npm init -y

init命令用来在根目录下生成一个package.json文件，这个文件中记录了我们当前项目的基本信息，它是一切工作的开始。

4.安装包

npm 这个超市中有现成的写好的代码，我们想下载来用，这个过程就是安装包，或者叫下包、装包

安装命令: npm i 包名

根据我们遇到的实际问题，我们来引入相应的包来解决它们。例如，我们在开发一个项目，其中涉及一些对日期时间的处理可以安装dayjs包。

day.js是一个专门用来处理日期时间的一个包

主页地址：dayjs.fenxianglu.cn/

安装命令：npm install dayjs

5.使用包

当我们已经下载好一个包之后，就可以像使用核心模块一样去使用它。

格式是：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);

以上代码的整体目录结构

project01
├── node_modules        #  统一放置下载的包
│   └── dayjs                #  某个包
├── xx.js                        #  业务代码， 引入dayjs来使用
├── package.json           #  记录本项目的信息
└── package-lock.json   #  下载包的详细信息

四. 下载使用包的细节1-package.json

  package.json 文件其实就是对项目或者模块包的描述，里面包含许多元信息。比如项目名称，项目版本，项目执行入口文件，项目贡献者等等。npm install 命令会根据这个文件下载所有依赖模块。

1. package.json 文件创建有两种方式，手动创建或者自动创建。

• 手动创建: 直接在项目根目录新建一个 package.json 文件，然后输入相关的内容。

• 自动创建: 也是在项目根目录下执行 npm init，然后根据提示一步步输入相应的内容完成后即可自动创建。

2. package.json 文件配置说明:

3.在某个目录下开启小黑窗，输入如下命令：npm init

它会启动一个交互式的程序，让你填入一些关于本项目的信息，最后生成一个package.json文件。

说明：

• 这个命令只需要运行一次，它的目的仅仅是生成一个package.json文件。
• 如果项目根目录下已经有了package.json文件，就不需要再去运行这个命令了。
• 这个package.json文件后期是可以手动修改的。

package.json文件

它一般是由npm init命令创建出来的（也可以正常被CV），它的整体内容是一个json字符串，用来对当前项目进行整体描述。

其中最外层可以看作是一个js的对象（每一个属性名都加了""，这就是一个典型的json标记）。

这个文件中有非常多的内容，我们目前学习如下几个：

• name： 表示这个项目的名字。如是它是一个第三方包的话，它就决定了我们在require()时应该要写什么内容。
• version：版本号
• keywords：关键字
• author: 作者
• descrption: 描述

五. 下载使用包的细节2-node_modules文件夹

作用

这个文件夹中保存着我们从npm中下载来的第三方包。在使用npm install 命令时，会从npm网站下载对应的包到这个文件夹中。

执行逻辑

当键入npm install XXX之后（这里假设这个XXX包是存在的，也没有出现任何的网络错误）：

1. 如果有package.json
   (1) 修改package.json文件。根据开发依赖和生产依赖的不同，决定把这句记录加在devDependencies或者是dependencies列表中。
   (2) 修改node_modules文件夹

• 如果有node_modules文件夹，则直接在下面新建名为XXX的文件夹，并从npm中下来这个包。如果这个包还有其它的依赖，则也会下载下来。

• 如果没有node_modules，则先创建这个文件夹，再去下载相应的包

2. 如果没有package.json。会给一个警告信息。

小结

• 建议先用init命令创建package.json之后，再去install
• 在分享代码时，我们一般不需要把node_modules也给别人（就像你不需要把day.js给别人，因为他们可以自己去下载）。对方拿到我们的代码之后，先运行npm install(后面不接任何的包名)，自己去安装这些个依赖包。

六.全局安装包和本地安装包

我们通过npm install 命令来安装包，简单说就是把包从npm的官网（或者是指定的镜像源）下载到我们自己的电脑中。那具体这个包下载到哪里了，还是有一点讲究的。

分成两类：

1.- 全局安装: 包被安装到了系统目录（一般在系统盘的node_modules中）。

• 命令：npm install -g 包名 或者  npm install 包名 -g

• 辅助提示：

npm root -g // 查看全局包的安装目录
npm list -g --depth 0 //查看全局安装过的包

2.- 局部安装（或者叫本地安装)，包安装在当前项目的根目录下（与package.json同级）的node_modules中。

• 命令：npm install 包名

七. 全局包与本地包的区别

• 全局安装的包一般可提供直接执行的命令。我们通过对一些工具类的包采用这种方式安装，如：
  gulp, nodemon, live-server,nrm等。
• 本地安装的包是与具体的项目有关的， 我们需要在开发过程中使用这些具体的功能。

一个经验法则：

• 要用到该包的命令执行任务的就需要全局安装
• 要通过require引入使用的就需要本地安装

到此为止,npm包的使用流程差不多结束了,里面要学的东西还有很多,一时之间,不可能全部搞懂,继续努力吧!