下面是对Node.js模块化开发的整理，西洼港可以帮助到有需要的小伙伴~
Node.js模块化开发
JavaScript开发弊端
JavaScript在使用时存在两大问题，文件依赖和命名冲突。
Node.js模块化开发
模块成员导出的export方法
- Node.js规定一个JavaScript文件就是一个模块，模块内部定义的变量和函数默认情况下在外部无法得到
- 模块内部可以使用exports对象进行成员导出(使其他模块可以用到此模块里面的东西)，使用require方法导入其他模块。
导入模块的后缀名可以省略
实例：
导入另一个模块的add方法
02_daochu.js模块
const add = (a,b) => {
console.log(a+b);
}
// 把add方法导出
exports.add = add;
03_daoru.js模块
// 把./02_daochu.js模块导入本模块中
// const result = require("./02_daochu.js");
// 导入模块的后缀名可以省略
const result = require("./02_daochu");
// 输出导入的模块
console.log(result); // { add: [Function: add] }
// 输出导入的模块中的add方法
console.log(result.add(3,6)); // 9
result.add(1,2); // 3
模块成员导出的另一种方法module.exports
默认情况下，exports和module.exports指向同一个对象（即指向同一个内存）。
当exports和module.exports指向不同的对象的时候，以module.exports指向的对象为准，exports的导出就不生效了。
exports是module.exports的别名（地址引用关系），导出对象最终以module.exports为准。
实例1：
const greeting = name => `hello ${name}`;
const x = 100;
exports.x = x;
// 导出greeting
module.exports.greeting = greeting;
// 导入 04_exports模块
const a = require('./04_exports');
// 04_exports模块的greeting函数
// console.log(a.greeting("Lucy")); // hello Lucy
console.log(a); // { x: 100, greeting: [Function: greeting] }
实例2：当exports和module.exports指向不同的对象的时候，以module.exports指向的对象为准，exports的导出就不生效了
const greeting = name => `hello ${name}`;
const x = 100;
exports.x = x;
// 导出greeting
exports.greeting = greeting;
// 当exports对象和moudle.exports对象指向的不是同一个对象时以module.exports为准
module.exports = {
name : "Jenny"
}
// 导入 04_exports模块
const a = require('./04_exports');
// 04_exports模块的greeting函数
// console.log(a.greeting("Lucy")); // hello Lucy
// console.log(a); // { x: 100, greeting: [Function: greeting] }
console.log(a); // { name: 'Jenny' }
// 输出的是module.exports指向的对象
系统模块
什么是系统模块
Node运行环境提供的API.因为这些API都是以模块化的方式进行开发的,所以我们又称Node运行环境提供的API为系统模块
系统模块fs 文件操作
f: file文件，s: system系统，文件操作系统。
const fs =require ( " fs " ) ;
读取文件内容
fs.reaFile ('带文件名称的文件路径'[,'文件编码']，callback) ;
- callback：回调函数。硬盘读取文件是需要时间的，所以不能通过返回值直接读取结果，当硬盘读取完文件之后，就执行回调函数，通过参数将读取的结果返回。、
// 1.通过模块的名字fs对模块进行引用
const fs = require('fs');
// 2.通过模块内部的readFile读取文件内容
fs.readFile('./01_hellonode.js','utf8',(err,doc) => {
// 如果文件读取出错 err是一个对象 包含错误信息
// 如果文件读取正确 err是null
// doc 是文件读取的结果
console.log(err);
console.log(doc);
});
写入文件内容
语法结构：
fs.writeFile ( '文件路径/文件名称",'数据',callback) ;
实例：
// 通过模块的名字fs对模块进行引用
const fs = require('fs');
// 如果想成功 必须在当前工作区的路径下 执行该文件
// 或者用绝对路径
// ./表示当前编辑器打开的文件夹
fs.writeFile('./xiao2.txt', '即将要写入的内容', err => {
if (err != null) {
console.log(err);
return;
}
console.log('文件写入成功')
})
系统模块path路径操作
为什么要进行路径拼接不同操作系统的路径分隔符不统一
-
/public/uploads/avatar
-
Windows上是\ /
-
Linux上是/ （一般是Linux运行网站的服务器）
语法：(可以通过返回值返回结果)
path.join ( 路径'，'路径', ...)
实例：
// 获取到path模块
const path = require('path');
const finalPath = path.join('public','a','b');
console.log(finalPath); // public\a\b
相对路径VS绝对路径
-
大多数情况下使用绝对路径，因为相对路径有时候相对的是命令行工具的当前工作目录
-
在读取文件或者设置文件路径时都会选择绝对路径
-
使用__dirname获取当前文件所在的绝对路径
注意：
require()方法相对的就是当前文件夹，而不是当前的工作目录
// 导入文件模块
const fs = require('fs');
// 导入路径模块
const path = require('path');
// 获取当前文件所在的绝对路径
console.log(__dirname);
// 拼接绝对路径，把你要操作的文件 添加到 绝对路径 中
console.log(path.join(__dirname,'01_hellonode.js'));
// 读取文件
fs.readFile(path.join(__dirname,'01_hellonode.js'),'utf8',(err,doc) => {
console.log(err);
console.log(doc);
})
第三模块（包）
什么是第三方模块
别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块，由于第三方横块通常都是由多个文件组成并且被放置在一个文件夹中，所以又名包
第三方模块有2种存在形式
- 以js文件的形式存在，提供实现项目具体功能的API接口。
- 以命令行工具形式存在，提供命令来辅助项目开发
获取第三方模块
npmjs.com:第三方模块的存储和分发仓库
npm (node package manager) : node的第三方模块管理工具
-
下载: npm install模块名称
会下载到当前命令行工具的路径 中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qMUincU1-1609247637035)(node/模块三-1.png)]
-
卸载：npm unintall package模块名称
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aomTbikm-1609247637044)(node/卸载三-2.png)]
-
全局安装（所有项目都可以使用该模块） 与 本地安装（只有该项目可以使用该模块）
- 命令行工具:全局安装
- 库文件:本地安装
4.3第三方模块nodemon
nodemon是一个命令行工具，用以辅助项目开发。
在Node.js中，每次修改文件都要在命令行工具中重新执行该文件，非常繁琐。
使用步骤
- 使用 npm install nodemon -g 下载它 （-g 全局安装）
- 在命令行工具中用nodemon命令替f代node命令执行又件
安装：
执行文件：
执行完成之后，命令行工具会被挂起。
如果你修改了该文件的代码，monnode会自动运行
点击 【Ctrl + C】 就可以中止命令行被挂起的情况
第三方模块 nrm
nrm ( npm registry manager): npm下载地址切换工具
npm默认的下载地址在国外，把下载地址切换到国内，开发人员可以用国内的服务器来下载国外的东西，下载速度就会快了。
使用步骤：
- 使用npm install nrm -g下载
- 查询可用下载地址列表nrm ls
- 切换npm下载地址 nrm use下载地址名称
第三方模块Gulp
基于node平台开发的前端构建工具
将机械化操作编写成任务,想要执行机械化操作时执行一个命令行命令任务就能自动执行了用机器代替手工，提高开发效率。
Gulp能做什么
- 项目上线，HTML、CSS、JS文件压缩合并
- 语法转换（es6转es5、less转css…）
- 公共文件抽离
- 修改文件浏览器自动刷新
Gulp使用
- 使用npm install gulp下载gulp库文件 【库文件都是下载到本地】
-
在项目根目录下建立gulpfile.js文件 【gulpfile.js文件名是不可以随便更改的】
-
重构项目的文件夹结构src目录放置源代码文件，dist目录放置构建后文件
-
在gulpfile.js文件中编写任务.
-
在命令行工具中执行gulp任务
Gulp中提供的方法
- gulp.src():获取任务要处理的文件
- gulp.dest():输出文件
- gulp.task( ‘任务名称’ , 回调函数 ):建立gulp任务
- gulp.watch():监控文件的变化
源gulpgile.js代码：
// 引用gulp模块
const gulp = require('gulp');
// 执行的是下面的代码，而不是整个文件
// 使用gulp.task 建立任务
// 1.任务的名称
// 2.任务的回调函数
gulp('first',async() => {
console.log("人生中的第一个gulp任务执行完毕");
// 1.使用gulp.src获取要处理的文件
gulp.src('./src/css/base.css')
// 通过pipe方法处理base.css文件
// pipe方法里面写的是 如何处理代码
.pipe(gulp.dest('dist/css')); // 让base.css在dist/css文件夹中输出 【虽然刚才创建文件夹的时候，没有在dist文件夹中新建css文件夹，但是运行后会自动创建css文件夹】
});
可能会报错：Did you forget to signal async completion? 你是否忘记发送异步完成信号？
解决办法：
// 引用gulp模块
const gulp = require('gulp');
// 执行的是下面的代码，而不是整个文件
// 使用gulp.task 建立任务
// 1.任务的名称
// 2.任务的回调函数
gulp.task('first',async() => {
await console.log("人生中的第一个gulp任务执行完毕");
// 1.使用gulp.src获取要处理的文件
gulp.src('./src/css/base.css')
// 通过pipe方法处理base.css文件
// pipe方法里面写的是 如何处理代码
.pipe(gulp.dest('dist/css')); // 让base.css在dist/css文件夹中输出 【虽然刚才创建文件夹的时候，没有在dist文件夹中新建css文件夹，但是运行后会自动创建css文件夹】
});
Gulp插件
在https://www.npmjs.com/网站中搜索你想要的插件。
可以使用npm install下载多个模块
npm install 插件1 插件2 …
多个插件之间用空格隔开
- gulp-htmlmin : html文件压缩
- gulp-csso:压缩css
- gulp-babel : JavaScript语法转化
- gulp-less: less语法转化
- gulp-uglify :压缩混淆JavaScript
- gulp-file-include：公共文件包含
- browsersync：浏览器实时同步
gulp-htmlmin : html文件压缩
使用插件的步骤：
-
下载
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Aaa1kELY-1609247637083)(node/gulp插件1.png)]
-
引用
const htmlmin = require('gulp-htmlmin'); -
调用
// 引用gulp模块 const gulp = require('gulp'); // 引用插件 const htmlmin = require('gulp-htmlmin'); // 执行的是下面的代码，而不是整个文件 // 使用gulp.task 建立任务 // 1.任务的名称 // 2.任务的回调函数 gulp.task('first',async() => { await console.log("人生中的第一个gulp任务执行完毕"); // 1.使用gulp.src获取要处理的文件 gulp.src('./src/css/base.css') // 通过pipe方法处理base.css文件 // pipe方法里面写的是 如何处理代码 .pipe(gulp.dest('dist/css')); // 让base.css在dist/css文件夹中输出 【虽然刚才创建文件夹的时候，没有在dist文件夹中新建css文件夹，但是运行后会自动创建css文件夹】 }); // html任务 // 1.html文件中代码的压缩操作 // 2.抽取html文件中的公共代码 gulp.task('htmlmin',async() => { gulp.src('./src/*.html') // 获取src文件夹中的所有html文件 // 压缩html文件中的代码 // 是否折叠空格 ： 是 .pipe(htmlmin({collapseWhitespace: true})) // 在dest文件夹中输出 .pipe(gulp.dest('dist')); })源html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: aqua; } </style> </head> <body> <div></div> </body> </html>压缩后的html文件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Document</title><style>div { width: 100px; height: 100px; background-color: aqua; }</style></head><body><div></div></body></html>
gulp-file-include：抽取公共代码
我要抽取a.html和b.html的公共代码，
-
在src目录中创建一个文件夹common，存放公共文件header.html （注：文件夹和文件的名字是可以自定义的）
-
把a.html文件和b.html文件的公共代码剪切到header.html
-
在a.html文件的被剪切的位置中输入
@@include('./common/header.html')
在b.html文件的被剪切的位置中输入
@@include('./common/header.html')
-
运行 gulp htmlmin
// 引用gulp模块 const gulp = require('gulp'); // 引用插件 const htmlmin = require('gulp-htmlmin'); // 引用抽取公共文件的插件 const fileinclude = require('gulp-file-include'); // 执行的是下面的代码，而不是整个文件 // 使用gulp.task 建立任务 // 1.任务的名称 // 2.任务的回调函数 gulp.task('first',async() => { await console.log("人生中的第一个gulp任务执行完毕"); // 1.使用gulp.src获取要处理的文件 gulp.src('./src/css/base.css') // 通过pipe方法处理base.css文件 // pipe方法里面写的是 如何处理代码 .pipe(gulp.dest('dist/css')); // 让base.css在dist/css文件夹中输出 【虽然刚才创建文件夹的时候，没有在dist文件夹中新建css文件夹，但是运行后会自动创建css文件夹】 }); // html任务 // 1.抽取公共代码 // 2.html文件中代码的压缩操作 // 3.输出代码 gulp.task('htmlmin',async() => { gulp.src('./src/*.html') // 获取src文件夹中的所有html文件 .pipe(fileinclude()) // 压缩html文件中的代码 // 是否折叠空格 ： 是 .pipe(htmlmin({collapseWhitespace: true})) // 在dest文件夹中输出 .pipe(gulp.dest('dist')); });
遇到一个错误：
Error: Cannot find module ‘gulp-file-include’
错误:找不到模块’gulp-file-include’
解决方法：
npm install --save-dev gulp-file-include
就可以了
gulp-less：less语法转换
less文件：
.headers {
width: 100px;
.logo {
height: 200px;
background-color: red;
}
}
下载
引用：
// 引用gulp模块
const gulp = require('gulp');
// 引用插件
const htmlmin = require('gulp-htmlmin');
// 引用抽取公共文件的插件
const fileinclude = require('gulp-file-include');
// 引用转css的插件
const less = require('gulp-less');
// 引用 压缩CSS文件 的插件
const csso = require('gulp-csso');
// 执行的是下面的代码，而不是整个文件
// 使用gulp.task 建立任务
// 1.任务的名称
// 2.任务的回调函数
gulp.task('first',async() => {
await console.log("人生中的第一个gulp任务执行完毕");
// 1.使用gulp.src获取要处理的文件
gulp.src('./src/css/base.css')
// 通过pipe方法处理base.css文件
// pipe方法里面写的是 如何处理代码
.pipe(gulp.dest('dist/css')); // 让base.css在dist/css文件夹中输出 【虽然刚才创建文件夹的时候，没有在dist文件夹中新建css文件夹，但是运行后会自动创建css文件夹】
});
// html任务
// 1.抽取公共代码
// 2.html文件中代码的压缩操作
// 3.输出代码
gulp.task('htmlmin',async() => {
gulp.src('./src/commom/*.html') // 获取src文件夹中的所有html文件
// 调用抽取公共代码的插件
.pipe(fileinclude())
// 压缩html文件中的代码
// 是否折叠空格 ： 是
.pipe(htmlmin({collapseWhitespace: true}))
// 在dest文件夹中输出
.pipe(gulp.dest('dist'));
});
// CSS任务
// 1.less语法转换
// 2.css代码压缩
gulp.task('cssmin', async() => {
// 利用数组写多个路径 ， 把多个文件的路径写到数组中
// 选择css目录下的所有less文件以及css文件
gulp.src('./src/css/*.less')
// 将less语法转换为css语法
.pipe(less())
// 调用压缩CSS文件的插件，压缩css代码
.pipe(csso())
// 输出处理结果
.pipe(gulp.dest('dist/css'))
})
调用：
输出：
.headers{
width:100px
}
.logo{
height:200px;
background-color:red
}
gulp-csso：压缩css
css文件：
h1{
color:yellow;
}
.a1 {
width: 100px;
height: 100px;
background-color: red;
}
less文件：
.headers {
width: 100px;
.logo {
height: 200px;
background-color: red;
}
}
下载：
引用：
// 引用gulp模块
const gulp = require('gulp');
// 引用插件
const htmlmin = require('gulp-htmlmin');
// 引用抽取公共文件的插件
const fileinclude = require('gulp-file-include');
// 引用转css的插件
const less = require('gulp-less');
// 引用 压缩CSS文件 的插件
const csso = require('gulp-csso');
// 执行的是下面的代码，而不是整个文件
// 使用gulp.task 建立任务
// 1.任务的名称
// 2.任务的回调函数
gulp.task('first',async() => {
await console.log("人生中的第一个gulp任务执行完毕");
// 1.使用gulp.src获取要处理的文件
gulp.src('./src/css/base.css')
// 通过pipe方法处理base.css文件
// pipe方法里面写的是 如何处理代码
.pipe(gulp.dest('dist/css')); // 让base.css在dist/css文件夹中输出 【虽然刚才创建文件夹的时候，没有在dist文件夹中新建css文件夹，但是运行后会自动创建css文件夹】
});
// html任务
// 1.抽取公共代码
// 2.html文件中代码的压缩操作
// 3.输出代码
gulp.task('htmlmin',async() => {
gulp.src('./src/commom/*.html') // 获取src文件夹中的所有html文件
// 调用抽取公共代码的插件
.pipe(fileinclude())
// 压缩html文件中的代码
// 是否折叠空格 ： 是
.pipe(htmlmin({collapseWhitespace: true}))
// 在dest文件夹中输出
.pipe(gulp.dest('dist'));
});
// CSS任务
// 1.less语法转换
// 2.css代码压缩
gulp.task('cssmin', async() => {
// 利用数组写多个路径 ， 把多个文件的路径写到数组中
// 选择css目录下的所有less文件以及css文件
gulp.src(['./src/css/*.less','./src/css/*.css'])
// 将less语法转换为css语法
.pipe(less())
// 调用压缩CSS文件的插件，压缩css代码
.pipe(csso())
// 输出处理结果
.pipe(gulp.dest('dist/css'))
})
调用：
输出：
.headers{width:100px}.headers .logo{height:200px;background-color:red}
.a1{width:100px;height:100px;background-color:red}
h1{color:#ff0}
JavaScript语法转化 和 JS压缩
下载：
npm install gulp-babel @babel/core @babel/preset-env
引用：
// 引用gulp模块
const gulp = require('gulp');
// 引用插件
const htmlmin = require('gulp-htmlmin');
// 引用抽取公共文件的插件
const fileinclude = require('gulp-file-include');
// 引用转css的插件
const less = require('gulp-less');
// 引用 压缩CSS文件 的插件
const csso = require('gulp-csso');
//
const babel = require('gulp-babel');
// 执行的是下面的代码，而不是整个文件
// 使用gulp.task 建立任务
// 1.任务的名称
// 2.任务的回调函数
gulp.task('first',async() => {
await console.log("人生中的第一个gulp任务执行完毕");
// 1.使用gulp.src获取要处理的文件
gulp.src('./src/css/base.css')
// 通过pipe方法处理base.css文件
// pipe方法里面写的是 如何处理代码
.pipe(gulp.dest('dist/css')); // 让base.css在dist/css文件夹中输出 【虽然刚才创建文件夹的时候，没有在dist文件夹中新建css文件夹，但是运行后会自动创建css文件夹】
});
// html任务
// 1.抽取公共代码
// 2.html文件中代码的压缩操作
// 3.输出代码
gulp.task('htmlmin',async() => {
gulp.src('./src/commom/*.html') // 获取src文件夹中的所有html文件
// 调用抽取公共代码的插件
.pipe(fileinclude())
// 压缩html文件中的代码
// 是否折叠空格 ： 是
.pipe(htmlmin({collapseWhitespace: true}))
// 在dest文件夹中输出
.pipe(gulp.dest('dist'));
});
// CSS任务
// 1.less语法转换
// 2.css代码压缩
gulp.task('cssmin', async() => {
// 利用数组写多个路径 ， 把多个文件的路径写到数组中
// 选择css目录下的所有less文件以及css文件
gulp.src(['./src/css/*.less','./src/css/*.css'])
// 将less语法转换为css语法
.pipe(less())
// 调用压缩CSS文件的插件，压缩css代码
.pipe(csso())
// 输出处理结果
.pipe(gulp.dest('dist/css'))
})
// JS任务
// 1.es6代码转换
// 2.代码压缩
gulp.task('jsmin', async() => {
gulp.src('./src/js/*.js')
.pipe(babel({
// 判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
presets: ['@babel/env']
}))
.pipe(gulp.dest('dest/js'))
});
调用：
gulp jsmin
es6的JS文件：
const x = 100;
let y = 200;
const fn = () => {
console.log(1234);
}
转换后：
"use strict";
var x = 100;
var y = 200;
var fn = function fn() {
console.log(1234);
};
压缩后：
"use strict";var x=100,y=200,fn=function(){console.log(1234)};
运行一次，运行多个任务
调用：
// 引用gulp模块
const gulp = require('gulp');
// 引用插件
const htmlmin = require('gulp-htmlmin');
// 引用抽取公共文件的插件
const fileinclude = require('gulp-file-include');
// 引用转css的插件
const less = require('gulp-less');
// 引用 压缩CSS文件 的插件
const csso = require('gulp-csso');
// 引用 转js 的插件
const babel = require('gulp-babel');
// 引用 压缩js 的插件
const uglify = require('gulp-uglify');
// 执行的是下面的代码，而不是整个文件
// 使用gulp.task 建立任务
// 1.任务的名称
// 2.任务的回调函数
gulp.task('first',async() => {
await console.log("人生中的第一个gulp任务执行完毕");
// 1.使用gulp.src获取要处理的文件
gulp.src('./src/css/base.css')
// 通过pipe方法处理base.css文件
// pipe方法里面写的是 如何处理代码
.pipe(gulp.dest('dist/css')); // 让base.css在dist/css文件夹中输出 【虽然刚才创建文件夹的时候，没有在dist文件夹中新建css文件夹，但是运行后会自动创建css文件夹】
});
// html任务
// 1.抽取公共代码
// 2.html文件中代码的压缩操作
// 3.输出代码
gulp.task('htmlmin',async() => {
gulp.src('./src/commom/*.html') // 获取src文件夹中的所有html文件
// 调用抽取公共代码的插件
.pipe(fileinclude())
// 压缩html文件中的代码
// 是否折叠空格 ： 是
.pipe(htmlmin({collapseWhitespace: true}))
// 在dest文件夹中输出
.pipe(gulp.dest('dist'));
});
// CSS任务
// 1.less语法转换
// 2.css代码压缩
gulp.task('cssmin', async() => {
// 利用数组写多个路径 ， 把多个文件的路径写到数组中
// 选择css目录下的所有less文件以及css文件
gulp.src(['./src/css/*.less','./src/css/*.css'])
// 将less语法转换为css语法
.pipe(less())
// 调用压缩CSS文件的插件，压缩css代码
.pipe(csso())
// 输出处理结果
.pipe(gulp.dest('dist/css'))
})
// JS任务
// 1.es6代码转换
// 2.代码压缩
gulp.task('jsmin', async() => {
gulp.src('./src/js/*.js')
.pipe(babel({
// 判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest('dest/js'))
});
// 复制文件夹
gulp.task('copy', () => {
gulp.src('./src/images/*')
.pipe(gulp.dest('dist/images'));
gulp.src('./src/lib/*')
.pipe(gulp.dest('dist/lib'))
});
// 构建任务
// 当运行default任务的 时候，'htmlmin','cssmin','jsmin','copy' 这些任务会依次执行
// gulp.task('default',['htmlmin','cssmin','jsmin']);
// 报错：Task never defined: default 任务从未定义:default
gulp.task('default',gulp.series('htmlmin','cssmin','jsmin'));
报错：Task never defined: default 任务从未定义:default
解决方法：
-
通过命令行工具查看gulp的版本 gulp -v
查看package-lock.json里面gulp的版本
-
如果版本号相同，是4.0版本编写的代码有误
原来的错误代码：
gulp.task('default',['htmlmin','cssmin','jsmin']);
修改后正确的写法：
gulp.task('default',gulp.series('htmlmin','cssmin','jsmin'));
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h8yg4ct8-1609247637102)(node/duoge.png)]
或者
如果以“default”作为任务的名字，可以直接写 gulp，会自动找到“default”任务。
package.json文件
node_modules文件夹的问题
- 文件夹以及文件过多过碎，当我们将项目整体拷贝给别人的时候，传输速度会很慢很慢.
- 复杂的模块依赖关系需要被记录，确保模块的版本和当前保持一致，否则会导致当前项目运行报错
package.json文件的作用
项目描述文件，记录了当前项目信息，例如项目名称、版本、作者、github地址、当前项目依赖了哪些第三方模块等。
可以解决 文件夹以及文件过多过碎，当我们将项目整体拷贝给别人的时候，传输速度会变慢的问题
在项目的根目录下，使用 npm init -y 命令生成。
运行完毕后，会生成 package.json文件
npm会自动把下载的模块记录到package.json文件中
如果你把项目传给别人的时候 ，没有传 node_module文件夹，别人可以通过在跟目录输入 npm install ，就可以获得node_module文件夹（获得了项目所以来的第三方模块），就可以正常运行了
项目依赖
-
在项目的开发阶段和线上运营阶段，都需要依赖的第三方包，称为项目依赖
-
使用npm install包名命令下载的文件会默认被添加到package.json文件的dependencies 字段中
开发依赖
-
在项目的开发阶段需要依赖，线上运营阶段不需要依赖的第三方包，称为开发依赖
-
使用npm install 包名–save-dev命令将包添加到package.json文件的devDependencies字段中
下载第三方模块：gulp
把项目依赖和开发依赖分开的好处：
在不同的环境下，下载不同的依赖
-
线下：
npm install : 下载全部依赖
-
线上服务器的运营环境：（只有项目依赖）
npm install --production
package-lock.json文件的作用
在下载第三方模块的时候，会自动下载package-lock.json文件，该文件会记录模块与模块之间的依赖关系、模块的版本及下载地址。
好处：
-
锁定包的版本，确保再次下载时不会因为版本不同而产生问题
-
加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作
在description文件夹中新建一个文件 app.js
一般运行： node 文件名
通过别名运行app.js文件
npm run 别名
Node.js中模块加载机制
模块查找规则 - 当模块拥有路径但没有后缀时
require('./find.js')
require('./find.js')
-
require方法根据模块路径查找模块，如果是完婺路径，直接引入模块。
-
如果模块后缀省略，先找同名JS文件再找同名JS文件夹
-
如果找到了同名文件夹，找文件夹中的index.js
-
如果文件夹中没有index.js就会去当前文件夹中的package.js文件中查找main选项中的入口文件
-
如果找指定的入口文件不存在或者没有指定入口文件就会报错，模块没有被找到
实例：
require.js文件：
// 引用 find.js 模块
// require('./find.js');
require('./find');
find.js文件：
console.log('modulefindRules文件夹下的find.js被引用了');
如果没有JS文件，在find文件夹中新建一个index.js文件
index.js文件：
console.log("find文件夹下的index.js文件被执行了");
如果index.js文件被改为了index.js.bck文件，就没有后缀名是.js的文件了
在find文件夹中打开【命令行工具】，输入 npm init，一直回车，直到完毕。
在find文件夹中的package.json文件中，把 index.js该为 main.js
在find文件夹中新建一个main.js文件，可以写入内容
在【命令行工具】中，返回到 moudlefindRules目录：
注意:
package.json文件中，
如果"main"这句代码被删除了，就会报错。
end~
705
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
