Node的第三方模块（包）npm

我不是女神ヾ 2021-09-07 06:11 888阅读 0赞

### Node的第三方模块（包）npm ###

*  一、什么是第三方模块
 *  二、下载第三方模块
 *   *  1.下载包
     *  2.删除包
     *  3.包的本地安装和全局安装
 *  三、常用的第三方模块
 *   *  1.nodemon
     *  2.nrm
     *  3.gulp
     *  4.gulp-cli
     *  5.gulp插件
     *  6.art-template模板引擎
     *  7.reques模块
 *  四、package.json文件
 *   *  1.生成package.json文件
     *  2.package.json文件解析
     *  3.开发依赖和生产依赖
     *  4.npm install解释
     *  5.模块与模块之间的依赖关系（package-lock.json文件）
 *  五、包的分类
 *   *  1.开发依赖包
     *  2.核心依赖包
     *  3.全局包
 *  六、包的结构
 *  七、开发自己的包
 *   *  1.初始化包的结构
     *  2.初始化package.json
     *  3.在index.js文件上。
     *  4.登录npm
     *  5.推送到npm上
     *  6.删除包

# 一、什么是第三方模块 #

别人直接写好的，可以直接使用的，第三方模块通常有多个文件组成并且被放置在一个文件夹中，所以又叫包。  
第三方模块有两种形式存在：  
以js文件的形式存在，提供实现多项目具体功能的API  
以命令行工具的形式存在，辅助项目开发。

# 二、下载第三方模块 #

## 1.下载包 ##

npm（node package manager）:node的第三方模块管理工具，可通过命令行直接操作第三方模块  
在命令行中输入

npm install  包名 @版本号

版本号可以不写，默认下载最新版本  
就可下载指定包，默认下载当前打开命令行工具的位置。会自动创建一个node\_modules文件夹，里面存放了下载的包。@后面可以根版本号

## 2.删除包 ##

npm uninstall package 包名

## 3.包的本地安装和全局安装 ##

一般命令行工具包都安装在全局，全局就是你的电脑，API安装在本地项目  
\-g命令就行全局安装，本地就是本项目中安装。

# 三、常用的第三方模块 #

## 1.nodemon ##

命令行工具，辅助项目开发，在node.js中，每次修改完文件后，都要重新启动文件，使用这个nodemon命令启动文件，可以监控文件的变化，只要保存文件就能直接启动文件。不需要再手动启动。  
1.安装

npm install nodemon -g

\-g表示全局安装，在任何地方都能使用  
安装好后，nodemon命令代替node来启动文件即可。

## 2.nrm ##

快速切换npm的下载包的地址  
原始的npm下载地址在国外，国内下载速度慢，需要切换到国内。  
**1.安装**

npm install nrm -g

**2.查看所有下载地址**

nrm ls

**3.选择下载地址**

nrm use 下载地址
    #nrm use taobao

## 3.gulp ##

**1.什么是gulp**

前端构建工具

**2.gulp的使用**  
压缩html,css,js代码,合并  
浏览器不是全都支持es6的需要转换成es5,，less转css,浏览器根本不认识less,需要转换css。  
公共文件抽离  
修改文件时浏览器自动刷新。

**3.下载**

npm install gulp

下载到项目  
在项目根目录下新建gulpfile.js文件，文件名不要更改，在这里编写压缩，合并文件的代码。  
新建src文件夹，存放源码，新建dist文件夹，存放压缩合并后的源码。

**4.编写操作代码任务**

gulp.src()//获取任务要处理的文件，参数可以写数组来表示选择多个文件。
    gulp.dest()//输出文件
    gulp.task()//建立gulp任务
    gulp.watch()//监控文件的变化

步骤  
1.引入gulp模块  
2.建立任务  
3.获取要处理的文件  
4.输出要处理后的文件到dist文件  
5.执行任务，而不是执行gulpfile文件，需要用到gulp-cli命令行工具来执行

const gulp = require('gulp')
    gulp.task('任务名'，()=>{ 
     gulp.src('文件名和路径')
    .pipe(gulp.dest('输出到指定地方'))
    
    })
    //.pipe是用来处理获取到的文件代码，输出到指定位置，没有的文件夹会自动创建，一般是dist下的文件夹。
    //*.html表示获取所有html文件

可以建立多个任务，每个任务来处理不同的文件。

## 4.gulp-cli ##

npm install gulp-cli -g

命令行工具  
管理gulp

gulp 任务名

来运行任务，他会自动取当前项目根目录下gulpfile这个文件，然后在文件中找任务名，来执行任务。

## 5.gulp插件 ##

gulp提供的方法很少，压缩代码需要不同的插件来执行。

gulp-htmlmin:html文件压缩
    gulp-csso:压缩css
    gulp-babel:js语法转换
    gulp-less:less语法转换
    gulp-uglify:压缩混淆js
    gulp-file-include:公共文件包含
    browsersync:浏览器实时同步

使用步骤：  
**1.下载插件**

npm install --save gulp-htmlmin来下载插件

–save已经没什么作用了，可以忽略。  
**2.压缩代码**

const htmlmin = require('gulp-htmlmin')
    gulp.task('htmlmin',()=>{ 
    	gulp.src('./src/*.html')
    		//压缩html代码，问要不要压缩空格，true就是压缩
    		.pipe(htmlmin({ collapseWhitespace:true}))
    		.pipe(gulp.dest('./dist/demo'))
    
    })

3.调用任务，使用gulp-cli命令

gulp htmlmin

即可成功压缩，代码被压缩成一行

其他模块同理使用。

**3.抽取公共部分代码**

将相同的html代码放到一个文件夹中  
在需要插入的html文件写

@@include('公共代码存放的文件')

在gulpfile.js文件中

const fileinclude = requrie(gulp-file-include'')

在需要合并时写  
.pipe(fileinclude ())  
即可抽离并合并公共代码。

**4.less语法转换和压缩css代码**  
步骤  
1.安装gulp-less和gulp-csso  
2.引入less模块和css压缩模块  
3.使用模块，转换less文件

const less = require('gulp-less')
    const cssmin = require('gulp-csso')
    gulp.task('cssmin',()=>{ 
    	gulp.src('./src/*.less')
    	        //先把less转换成css
    		.pipe(less())
    	    	//再把css进行压缩
    		.pipe(cssmin())
    		 //输出到指定文件夹
    		.pipe(gulp.dest('./dist/css'))
    
    })

**5.js文件的es6语法转换**  
1.安装gulp-babel  
2.使用gulp-babel转换语法

npm install gulp-babel

const babel = require('gulp-babel')
    gulp.task('babel',()=>{ 
    	gulp.src('./src/*.js')
    		.pipe(babel(
               { 
    			   //它可以判断当前代码运行的环境，将代码转换成当前运行环境所支持的代码
              presets:['@babel/env']
    
    		   }
    		))
    		.pipe(gulp.dest('./dist/js'))
    
    })

**6.一次性执行多个任务**

gulp.task('default',['htmlmin','cssmin','babel'])

这样执行default时，可以依次执行后面的任务。  
且当任务名为default时可以命令行直接写gulp  
这时gulp3.0版本的写法  
4.0中换了

gulp.task('default',gulp.series(['htmlmin','cssmin'],function(){ }))

## 6.art-template模板引擎 ##

## 7.reques模块 ##

服务器之间发送请求的模块  
服务器之间没有同源政策

npm install request

const request =require('request')
    request('地址'，（err,res,body）=>{ 
     //err是错误对象
     //res是响应信息
     //body是响应内容
    
    })

# 四、package.json文件 #

项目描述文件，使用的包的目录都存放在这里。当npm install 包名时会生成这个文件，会记录下载了那些包，当node\_modules文件夹被删除时，直接在项目中输入npm install会找package.json文件，根据里面记录的包重新下载包。  
package.json主要记录了包的目录，版本，还有项目的作者，github地址。

## 1.生成package.json文件 ##

在项目根目录下

npm init

然后输入项目的信息，名称，版本等都有默认值，可以直接回车  
或者npm init -y可以直接生成，信息值都是默认值。

## 2.package.json文件解析 ##

{  
      "name": "gulp",     //项目的名称
      "version": "1.0.0", //项目的版本
      "description": "test",//项目的描述
      "main": "gulpfile.js",//项目的主入口文件，
      "dependencies": { 
        "gulp": "^4.0.2",
        "gulp-babel": "^8.0.0",
        "gulp-csso": "^4.0.1",
        "gulp-less": "^4.0.1",
        "gulp-htmlmin": "^5.0.1",
        "htmlmin": "^0.0.7"
      },//项目依赖的包，npm install --production都会会找这里的包下载。
      "devDependencies": { 
      }, //开发环境依赖的包，
      
     "scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1"
        'build': 'node index.js'//在命令行中使用npm run build将相当于使用了node index.js文件。启动了文件。字段都需要npm run 别名来执行。
      },//长命令行缩写,命令的别名
        "author": "",//项目作者
        "keywords":'',//项目的关键字
         "license": "ISC"//
    }

之后新下载的包都会被记录到这个package.json文件中。

## 3.开发依赖和生产依赖 ##

开发依赖的包有时包含命令行工具，而生产依赖的是不需要这些包的。所以要分开来。  
**开发依赖**  
下载

npm install 包名 --save-dev

可以将包下载到**devDependencies**字段中  
这样在不同的运行环境下，可以下载不同的依赖。开发环境直接使用npm install 来下载全部的依赖不管是开发还是生产都会下载。一般命令行工具放在开发依赖里。

**生产依赖**

npm install 包

默认会下载到生产依赖中，dependencies字段里。要在生产环境下只下载dependencies里的包，可以使用

npm install --production

来只下载dependencies字段里的包。

## 4.npm install解释 ##

会先找项目的package.json文件，无论是开发依赖还是生产依赖都会下载下来。这样可以把项目给别人时，不用给node\_modules,让别人拿到项目后自己下载。