module1_01_前端工程化概述、Node.js基础

2022-03-05 12:10:17

前端工程化概述、Node.js基础

一、为何要讲前端工程化概述呢？

  • 因为前端开发中进场会碰到需要用不同工具解决的问题

1.1 面临的问题

  • ① 项目上线之前，代码需要压缩

  • ② 想用ES6+ 或CSS3 新特性，要解决兼容性问题

    • 有一个可以查看兼容性的网站

  • ③ 多人协作开发，代码风格无法统一

  • ④ 对 Less 等 CSS 的预编译语言进行编译处理

module1_01_前端工程化概述、Node.js基础

module1_01_前端工程化概述、Node.js基础

1.2 基于node.js

  • 工程化都依赖与Node.js来实现的

  • 所以首先了解node.js基础

二、Node.js基础

2.1 什么是node.js?

  • node.js主要提供的是一个Runtime（运行时 - 运行环境）

    • 基于chrome V8引擎的

    • 那么浏览器内核呢？

      • module1_01_前端工程化概述、Node.js基础

    • 有多少种浏览器内核呢

      • module1_01_前端工程化概述、Node.js基础

  • Node.js的作者是 Ryan Dahl

  • 所以Node.js 是除了浏览器之外，可以运行JS的环境

    • 但是 Node.js 不是一门新的语言，也不是js框架

module1_01_前端工程化概述、Node.js基础

2.2 Node.js可以做什么

  • 要了解这个的话先要了解浏览器可以做什么

（1）浏览器可以做什么

  • ① 相应浏览器事件

  • ② 数据验证

  • ③ DOM操作

  • ....

  • 但是不能做文件操作

（2）Node.js可以做什么

  • Node.js 使用于开发前端方向的各种工具

    • 各种前端工程化的工具

  • Node.js 适合开发服务器端的应用层(BFF)

    • 为网站，APP，小程序等提供数据服务

  • Node.js 可以用来做桌面应用开发

    • 各种跨平台的桌面应用

  • 一些用 Node.js 做的桌面应用

    • module1_01_前端工程化概述、Node.js基础

  • 相当于给 js 插上了全栈变成的翅膀

2.3 Node.js APIs

（1）浏览器的 APIs

  • DOM 和 BOM

（2）Node APIs

  • module1_01_前端工程化概述、Node.js基础

  • module1_01_前端工程化概述、Node.js基础

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是一个单线程，为了弥补所以推出了事件队列。

module1_01_前端工程化概述、Node.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）模块的加载逻辑

module1_01_前端工程化概述、Node.js基础

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（大写）

    • 步骤：

        1. 创建项目目录（mkdir oriject）

        2. 进入项目目录（cd project）

        3. 初始化项目（npm init）

          • 会默认生成一个package文件

        4. 在项目中安装包

  • ③ --save 与 --save-dev

    • --save 用于发布环境

    • --save-dev 用于开发环境

  • 总结

 

module1_01_前端工程化概述、Node.js基础

上一篇：将JSON文件转换为Excel


下一篇：小程序整理