npm详解

文章目录

• • 
    
• ​​npm 是什么？​​

​​安装 npm​​​​更新 npm​​​​package.json 文件​​​​package.json 如何创建​​​​package.json 的内容​​​​dependencies（生产环境）和 devDependencies（开发环境）的区别​​​​指定安装包的版本​​​​自定义 package.json 安装包文件​​​​引用文件库​​

• 
  

• 
  

npm 是什么？

1. ​​npm（node package manager）​​：node.js 的包管理器，用于node插件管理（包括安装、卸载、管理依赖等） ，npm 是随同 node.js 一起安装的包管理工具，能解决 node.js 代码部署上的很多问题，常见的使用场景有以下几种：
   1. 
      
2. 允许用户从 npm 服务器下载别人编写的第三方包到本地使用。
3. 允许用户从 npm 服务器下载并安装别人编写的命令行程序到本地使用。
4. 允许用户将自己编写的包或命令行程序上传到 npm 服务器供别人使用。
   1. 
      
5. ​​npm​​​是一个包管理器，它让 javascript 开发者分享、复用代码更方便.在程序开发中我们常常需要依赖别人提供的框架，写js 也不例外。这些可以重复的框架代码被称作​​包(package)或者模块(module)​​​，一个包可以是一个文件夹里放着几个文件，同时有一个叫做 ​​package.json​​的文件.
6. 一个网站里通常有几十甚至上百个​​package​​，分散在各处，通常会将这些包按照各自的功能进行划分（类似安卓开发中的划分子模块)，但是如果重复造一些轮子，不如上传到一个​公共平台​​，让更多的人一起使用、参与这个特定功能的模块。而​​npm​​ 的作用就是让我们发布、下载一些JS轮子更加方便。
7. 可以去官方网站：​​https://www.npmjs.com/​​​，浏览、搜索想要的轮子，也可以直接在命令行中 ​​search​​一下。
   1. 
      
8. 如：npm中搜索 jQuery
9. 
   1. 
      
10. 
    使用npm后可以非常方便地查看依赖的轮子是否有更新、是否需要下载新版本。现在知道npm是干什么的了。当人们说起“​​​npm​​”时，​可能在说三个东西：​​ 1.一个网站，就是前面提到用于搜索JS模块的网站：https://www.npmjs.com/
    2.一个仓库，保存着人们分享的JS模块的大数据库
    3.命令行里的客户端，开发者使用它来管理、安装、发布模块
    
11. 
    接地气的描述：​​​npm​​​ 类似于如下各大手机应用市场
    
    
12. 
    只要开发者发布某个模块到仓库中，其他人就可以从npm网站或者命令行中下载、使用它了。
    
    1. 
       

安装 npm

1. 安装 node.js 的时候会相应的安装 npm，node.js 已经集成了 npm，所以安装 node.js 后 npm 也安装好了。

• • 
    
• 下载官网：https://nodejs.org/en/
• 中文学习node API 文档：http://nodejs.cn/
• 查看本地 node 和 npm 是否安装成功
  
  • 
    

更新 npm

• npm 更新地可比 node勤快多了，因此你下载的node附带的 npm 版本可能不是最新的，你可以使用如下命令下载最新 npm：

npm install npm@latest -g
相当于
npm install 王者荣耀@最新版 -全局
华为应用市场 安装 王者荣耀@最新版 -全局

或

npm install -g npm

• 其中install不用介绍了，就是安装，后面的​​npm@latest​​​就是@的格式，@后面加上版本号。在下载其他模块时也是这个格式。​​-g​​ 代表全局安装。

package.json 文件

• • 
    
• npm 的全称：Node Package Manager，中文意思：node包管理器。
• 管理本地安装​​npm​​​包的最好方式就是创建​​package.json​​​文件。一个 ​​package.json​​文件可以有以下几点作用：
  • 
    

1. 1. 
      
2. 作为一个描述文件，描述了你的项目依赖哪些包
3. 允许使用“语义化版本规则”(后面介绍)指明你项目依赖包的版本
4. 让你的构建更好地与其他开发者分享，便于重复使用
   1. 
      

• 案例：在新建的空文件夹中 npm 下载 jQuery 包

npm install jquery

• 而 jQuery 就在 node_module 文件夹下：
  

package.json 如何创建

• • 
    
• 使用 ​​npm init​​ 即可在当前目录创建一个 ​​package.json​​ 文件:
• 通过如下一问一答的模式就创建好了一个 ​​package.json​​ 文件
  
  • 
    

• • 
    
• 输入​​npm init​​​后会弹出一堆问题，可以输入对应内容，也可以使用默认值。在回答一堆问题后输入​​yes​​​ 就会生成图中所示内容的 ​​package.json​​文件。
• 如果嫌回答这一大堆问题麻烦，可以直接输入​​npm init --yes​​​ 跳过回答问题步骤，直接生成默认值的 ​​package.json​​ 文件:
  • 
    

package.json 的内容

• package.json文件至少要有两部分内容：

1. 1. 
      
2. “name”：全部小写，没有空格，可以使用下划线或者横线
3. “version”： x.x.x 的格式，符合 “语义化版本规则”
   1. 
      

• 如：

"name": "demo-package",
"version": "1.0.0",

• • 
    
• 
  

案例：在一个空文件夹下初始化创建 ​​package.json​​

这些默认生成的都可以去修改

其他内容:

• • 
    
• description：描述信息，有助于搜索
• main：入口文件，一般都是 ​​index.js​​
• scripts：支持的脚本，默认是一个空的 ​​test​​
• keywords：关键字，有助于在人们使用 ​​npm search​​搜索时发现你的项目​​author​​ :作者信息
• license ：默认是 ​​MIT​​
• bugs：当前项目的一些错误信息，如果有的话
• 可以为​​init​​命令设置一些默认值，比如：
  • 
    

• 
  

> npm set init.author.email "[e-mail]"
> npm set init.author.name "xdr630"
> npm set init.license "MIT"

• • 
    
• scripts 案例详解：把上面初始化的 package.json 做如下修改
  
• 执行
  • 
    

npm run abc

• • 
    
• 
  

查看

案例：把下载的jQuery配置记录到package.json中

没安装之前的文件夹：

• 
  

npm install jquery -D

• • 
    
• 
  

发现 pcakage.json 改变了

在安装个 bootstrap，这次不带 ​​-D​​

• 
  

npm install bootstrap

• • 
    
• 发现不带 -D ，放在​​dependencies​​，加上-D，就放在​​devDependencies​​
• 通过 ​​npm install 包名称​​ 下载的文件都会保存在当前文件夹下的 ​​node_module​​ 下，如：
  
• 打开文件夹，发现有刚刚下载好的两个文件
• 这就是刚刚 ​​npm​​ 下载的两个包，都在 ​​node_module​​ 下，并且记录的信息都在同一个 ​​package.json​​ 下
  
  
  
  • 
    

dependencies（生产环境）和 devDependencies（开发环境）的区别

• • 
    
• 就是在项目的开发阶段就是开发环境；项目上线了，开始正式提供对外服务，​上线后的阶段就是生产环境。​ 在生产环境下，一般会关掉错误报告，打开错误日志等操作。
• ​​devDependencies​​​ 配置的是开发环境，安装项目开发时所依赖的模块。比如像​​webpack​​​工具，只是用来构建项目和打包，这些都是在开发阶段才使用的，等项目上线后就用不到​​webpack​​​工具了，那么就可以把​​webpack​​​安装到开发环境中，使用 ​​--save-dev​​​ 命令安装到​​devdependencies​​下，命令语法：
  • 
    

npm install --save-dev packageName
# 简写
npm i -D packageName

• ​​dependencies​​​配置的是生产环境，安装项目运行时所依赖的模块。比如jQuery库，等项目上线以后依然是要继续使用的，我们就要安装在生产环境中，如果没有把需要的依赖安装到生产环境中，项目上线运行时就有可能会报错。使用 ​​--save​​​ 命令安装到 ​​dependencies​​ 下，命令语法：

npm install --save packageName
# 简写
npm i -S packageName

• 总结

配置项	dependencies	devDependencies
dependencies	–save 简写 -S	生产环境，管理的依赖包在项目上线后依然有效
devDependencies	–save-dev 简写 -D	开发环境，管理的依赖包仅在开发阶段有效

1. 使用npm安装依赖时，​​–save​​​和​​–save-dev​​

• • 
    
• 使用​​–save​​​安装的依赖，会被写到​​dependencies​​区块里面去。
• 而使用​​–save-dev​​​安装依赖，则会被写到​​devDependencies​​区块里面去
• 什么都不写，只是本地安装，并非全局。这时候会被写到​​dependencies​​区块里面去。
  • 
    

2. 在​​package.json​​​ 文件中​​dependencies​​​和​​devDependencies​​的区别

• • 
    
• ​​devDependencies​​ 里面的依赖只用于开发环境，不用于生产环境。而 ​​dependencies​​ 依赖的包不仅开发环境能使用，生产环境也能使用。
  
• 两种环境的的指定方式是通过配置文件中的​​NODE_ENV=developement​​或​​NODE_ENV=production​​来指定是开发还是生产环境的。
  
• 使用的一些构建工具例如​​glup、webpack​​这些只是在开发中使用的包，上线以后就和他们没关系了，所以将它写入​​devDependencies​​
  • 
    

指定安装包的版本

npm install jquery@3.4.1
npm install bootstrap@4.4.1

自定义 package.json 安装包文件

• • 
    
• 
  

首先在一个空的文件夹下使用 npm init 初始化生成一个 package.json 文件，打开对里面的内容进行添加，如：下载 jQuery 和 bootstrap 的包文件

使用命令 ​​npm install​​ 进行安装即可。这个命令会识别刚刚自定义 ​​package.json​​ 中需要安装的文件

​​npm install​​ 可以简写 为 ​​npm i​​

• 
  

引用文件库

• 一般引用都是直接在本地路径下：

<script src= 。/node_modules/jquery/dist/jquery.min.js'><script>

• • 
    
• 通过定义变量引用：
• ​​require(名字）​​​，它是直接在​​node_modules​​中去寻找这个名字对应的文件夹，找不到就报错
  • 
    

const $ = require( 'jquery ' );
console.log($.addclass());