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

前端工程化概述、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(大写)

    • 步骤:

        1. 创建项目目录(mkdir oriject)

        2. 进入项目目录(cd project)

        3. 初始化项目(npm init

          • 会默认生成一个package文件

        4. 在项目中安装包

  • --save--save-dev

    • --save 用于发布环境

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

  • 总结

 

posted @ 2021-03-29 09:36  叻仔猪  阅读(77)  评论(0编辑  收藏  举报