module1_01_前端工程化概述、Node.js基础
一、为何要讲前端工程化概述呢？
-
因为前端开发中进场会碰到需要用不同工具解决的问题
1.1 面临的问题
-
-
② 想用ES6+ 或CSS3 新特性，要解决兼容性问题
-
有一个可以查看兼容性的网站
-
-
③ 多人协作开发，代码风格无法统一
-
④ 对 Less 等 CSS 的预编译语言进行编译处理
1.2 基于node.js
-
工程化都依赖与Node.js来实现的
-
所以首先了解node.js基础
二、Node.js基础
2.1 什么是node.js?
-
node.js主要提供的是一个Runtime（运行时 - 运行环境）
-
基于chrome V8引擎的
-
那么浏览器内核呢？
-
-
有多少种浏览器内核呢
-
-
-
Node.js的作者是 Ryan Dahl
-
所以Node.js 是除了浏览器之外，可以运行JS的环境
-
但是 Node.js 不是一门新的语言，也不是js框架
-
2.2 Node.js可以做什么
-
要了解这个的话先要了解浏览器可以做什么
（1）浏览器可以做什么
-
① 相应浏览器事件
-
② 数据验证
-
③ DOM操作
-
....
-
但是不能做文件操作
（2）Node.js可以做什么
-
Node.js 使用于开发前端方向的各种工具
-
各种前端工程化的工具
-
-
Node.js 适合开发服务器端的应用层(BFF)
-
为网站，APP，小程序等提供数据服务
-
-
Node.js 可以用来做桌面应用开发
-
各种跨平台的桌面应用
-
-
一些用 Node.js 做的桌面应用
-
-
相当于给 js 插上了全栈变成的翅膀
2.3 Node.js APIs
（1）浏览器的 APIs
-
DOM 和 BOM
（2）Node APIs
2.4 使用 Node.js
-
脚本模式 cmd 中 node + path
-
交互模式
-
cmd中node
-
退出
-
.exit / 两次ctrl + c
-
查看命令：
-
打开控制台输入Math按两下tab就可以查看API
-
-
.help获取帮助信息
-
-
（1）全局对象
-
node.js下的全局对象是global
-
在交互模式下，生命的变量和函数都属于global
-
如var a = 1；gloval.a 可以访问到r
-
-
在脚本模式下，声明的变量和函数都不属于全局对象 global，但是有global这个对象
（2）全局函数
-
JS语言提供的全局函数，在Node.js下依然可用
-
如 parseInt / parseFloat / isNaN / isFinite / eval
-
一次性定时器（set跟clear）
-
-
Node.js环境也提供了一些全局函数
-
立即执行定时器（setImmediate / clearImmediate）
-
进程立即执行定时器(process.nextTick)
-
-
若这几个函数同时执行先后顺序会怎么样？（抛出问题）
setTimeout(() => {
console.log('setTimeout');
}, 0)
setImmediate(() => {
console.log('setImmediate');
})
process.nextTick(() => {
console.log('nextTick')
})
console.log('normal');
> normal nextTick setImmediate setTimeout
-
为什么会出现这种情况呢，因为这个关于js的执行顺序也就是线程
-
js是一个单线程，为了弥补所以推出了事件队列。
-
三、Node.js 模块
3.1 模块简介
-
内置模块：官方自带的模块（需要看准确的版本号）
-
自定义模块：自己写的
-
第三方模块：社区里面其他人写的模块http://www.npmjs.com/
3.2 内置模块
（1）console（控制台）
-
console.log
-
console.table
-
console.time
-
console.timeEnd
-
用这个可以测出 while 循环其实比 for 循环效率更快
-
（2）process（进程）
-
process对象是一个全局变量，提供了有关当前Node.js 进程的信息并对其进行控制
-
process是全局变量，使用时无需require引入
-
其一些实用方法
-
process.version：输出node版本
-
process.arch：输出操作系统机构 如x64
-
process.platform：输出操作系统平台 如win32
-
process.cwd()：输出当前工作目录 如'C:\Users\asus'
-
process.env：环境变量
-
自定义环境变量
-
process.env.NODE_ENV = 'develop'
-
-
process.pid：获取当前进程id
-
process.kill()：输入进程编号，结束（杀死）进程
-
杀死成功返回true
-
-
（3）path（路径模块）
-
path 提供了有关路径操作的函数
-
使用要用require引用
-
主要的API
-
三个查看路径的操作
-
process.cwd()：可以查看当前文件的目录
-
__dirname：跟上面获取的结果一样
-
__filename：获取当前文件的完整路径(包括执行的文件)
-
-
path的方法（都需要传入一个路径string）
-
path.extname()：获取路径文件的扩展名
-
path.dirname()：获取路径文件的目录部分
-
path.basename()：获取路径中的文件名（包括扩展名）
-
path.join()：合并路径（可以多个）
-
-
（4）fs（文件模块）
-
提供了文件操作的API
-
文件操作
-
目录操作
-
-
使用需要通过require引用
-
① 文件操作API
-
fs.writeFile(路径, 内容, cb)：写入文件，如果不存在则新建，存在的清空再写入
-
fs.readFile(目录， 回调)：读取文件，不存在报错
-
但是传回来的是buffer十六进制的数据
-
可以data.toString()来解决这一问题
-
-
fs.unlink()：删除操作，删除成功后再调用报错
-
fs.append()：追加写入操作，不会像write那样清空文件
-
如果路径拼接不写/会出现不好的影响
-
-
-
② 目录操作API
-
fs.mkdir(目录路径，回调函数)：创建目录
-
fs.rmdir()：删除目录，只能删除空目录
-
fs.rename()：旧名称，新名称，回调)：重命名
-
fs.readdir(目录,回调)，读取目录下所有文件，返回一个数组
-
-
-
读取文件还存在同步 / 异步的区别，比如我需要在一文件删除之后才做操作则再fs方法名后面加上sync作为同步函数
-
如果是sync同步的话，整一个fs.readdirSync掉我用完之后返回的即是回调里面的参数
-
existsSync返回的是Boolean
-
-
案例
-
复制文件，并对其压缩
-
使用existsSync来判断目录是否存在吗如果不存在则创建
-
（5）文件流
-
文件操作 - 缓冲方式，缺点，需要足够大才能完成这种操作
-
文件操作 - 流方式：有读取流，写入流，管道三部分组成
-
优势：
-
内存效率提高
-
无需加载大量数据
-
流把大数据切成小块，占用内存更少
-
-
时间效率提高
-
接获数据后立即开始处理
-
无需等到内存缓冲填满
-
-
-
-
使用
// 1. 创建读取流
var readStream = fs.createReadStream('./file2.txt')
// 2. 创建写入流
var writeStream = fs.createWriteStream('./file_strea,.txt')
// 3. 把读取流通过管道传给写入流
readStream.pipe(writeStream)
（6）http模块
-
使用require引入，功能是可以开启一个服务器
-
步骤
-
① 创建服务器
-
const server = http.createServer((req, res) => { })
-
再回调函数里面可以根据请求跟相应进行操作
-
res.statusCode = 200
-
res.setHeader('Content-Type', 'text/plain)
-
res.end('你好')
-
-
-
-
② 发布 web 服务
-
server.listen(port, host, () => { ... })
-
-
3.3 自定义模块
-
Node.js 中每个单独的 .js 文件，就是一个模块
-
每个模块中都有一个 module 变量，其代表当前模块
-
module 的 exports 属性是对外的接口
-
只有到处（module.exports）的属性或方法才能被外部调用
-
未到处的内容是模块私有，不能被外部访问
-
-
使用时，通过 require 引入
（1）模块的加载逻辑
3.4 第三方模块
-
社区维护的 Node.js 模块, 需要单独安装
-
可以通过npm在控制台安装
（1）npm概述
-
npm可以下载（安装）包和包的依赖
-
我们从npm下载的东西都是npm镜像源
-
把镜像源改成国内（下载速度慢）
-
npm cpnfig set registry https://registry.npm.taobao.org -
可以使用
npm config get registry查询
-
-
（2）npm安装包的方式
-
判断好是否是只在开发过程中使用 / 还是发布的时候使用
-
如 minify（压缩脚本）可以在全局里面安装
-
| 方式 | 描述 |
|---|---|
| 全局安装 | 多个项目都能用到（将包当作全局工具使用） |
| 项目安装 | 只有当前项目用到 |
-
① 全局安装
-
写法： npm install <package-name> --global
-
简写： npm i <package-name> -g
-
-
② 项目安装
-
写法：npm install <package-name> --save
-
简写：npm i <package-name> -S（大写）
-
-
步骤：
-
创建项目目录（mkdir oriject）
-
进入项目目录（cd project）
-
初始化项目（npm init）
-
会默认生成一个package文件
-
-
在项目中安装包
-
-
-
③ --save 与 --save-dev
-
--save 用于发布环境
-
--save-dev 用于开发环境
-
-
总结
