Node—前端工程化概述

前端工程化概述

简述

什么是工程？

工程化：在完成一个项目的时候所用到的技术和工具，用来提高前端开发的效率

前端工程化的萌芽：

内容：

项目上线的时候，需要进行压缩代码，更快速，节省带宽

如果要使用ES6新特性或者CSS3新特性，要解决兼容问题（caniuse.com）

多人协同开发，代码风格无法统一

利用工具解决问题

Node.js基础

Node.js

什么是node.js

Runtime（运行时—运行环境），浏览器就是JS的一个运行环境

基于Chrome V8引擎：外壳和内核（引擎）

常见引擎：

node.js能做什么？

我们将V8引擎单独拿出来，就可以在浏览器独立外来运行JS代码，2009年创建了新的运行环境Node.js

• 浏览器端的JS：负责前端的内容，响应事件、数据的验证、DOM操作
• Node.js中的JS：适用于开发服务器端的应用层，提供数据，可以使用文件操作，可以开发前端方向的各种工具，桌面的应用开发
  

Node.js APIs

包含了ECMAScript的方法，扩展了一些fs、path、os、HTTP等的其他方法

Node.js使用

脚本模式：

node path/filename.JS

交互模式

node(回车)
JS代码(回车)
.exit—退出交互模式
//Tab键可以自动补全，Math.双按Tab可以看到所有的方法

全局对象

在交互模式下，声明的变量和函数都是属于global的

在脚本模式下，声明的变量和函数都不属于global的

全局函数

JS语言提供的全局函数，在Node下依旧可以使用

• parseInt、parseFloat、isNaN、isFinite
• 一次性定时器（setTimeout）周期性定时器（setInterval）

Node.js环境下的全局函数

• 立即执行定时器（setImmediate），首先在事件队列中执行的操作
• 进程立即执行定时器（process.nextTick）,主程序的最后执行，在setImmediate之前执行

模块

内置模块—官方提供的，跟随Node.Js一起安装的（node.js/api）

自定义模块—工程师自己写的

第三方模块—社区维护，需要单独下载才能使用（npmjs）

内置模块

console

通过time执行函数测试可以得到，while循环的执行速度要比for循环的执行速度快

process

process进程是全局变量，使用的时候不需要通过require进行引用，可以直接打点调用方法：

console.log(process.version);//版本号
console.log(process.platform);//win32平台
console.log(process.arch);//x86系统
console.log(process.cwd());//文件当前的位置
console.log(process.env);
process.env.NODE_ENV = "develop";
//可以通过此方法来自定义我们的环境

process来控制进程

进入交互模式后，process.pid可以返回进程的序列号，process.kill（pid）可以杀死进程

path

有关路径操作的函数，当前目录./，上一级目录…/，使用前需要通过require进行引入

const path = require("path");
console.log(__dirname); //D:\LG-kc\Test\Part3-1
console.log(__filename); //D:\LG-kc\Test\Part3-1\text.js
console.log(path.dirname(__filename));//D:\LG-kc\Test\Part3-1
console.log(path.extname(__filename));//.js
console.log(path.basename(__filename));//text.js
const t=path.join(,)//帮助我们合并路径

fs—file system

文件操作（内容进行操作）

文件的写入write（只执行一次，后面的会覆盖前面的）fs.writeFile(‘文件路径’,‘写入内容’,回调函数)

fs.writeFile('./1.txt', '今天是开学的第二天', (err) => { if (err) throw err;console.log("写入成功");})

读取read fs.readFile(‘文件路径’,回调函数)

fs.readFile(filename, (err, data) => {
if (err) throw err; console.log(data); //<Buffer e4 bb 8a e5 a4 a9 e6 98 af e5 bc 80 e5 ad a6 e7 9a 84 e7 ac ac e4 ba 8c e5 a4 a9>
console.log(data.toString());})

删除unlink fs.unlink(‘文件路径’，回调函数)

fs.unlink(__dirname + "/1.txt", (err) => {
if (err) throw err;  console.log("删除成功")})

追加append（可以多次执行，在原本内容后面直接追加）

var a = ['数组1', '数组2', '数组3']
for (var i = 0; i < a.length; i++) {
fs.appendFile(__dirname + "/2.txt", a[i] + "\n", (err) => { console.log("追加成功"); })}

目录操作（路径的操作）

创建目录 fs.mkdir(文件路径,回调函数)

删除目录 fs.rmdir(文件路径,回调函数)

重命名目录 fs.renamedir(旧名称，新名称,回调函数)

读取目录 fs.readdir(文件路径,回调函数)

返回的是一个数组，通过map方法能够逐个打印输出，并且fs.stat能够读取文件类型，stat.isDirectory()来判断是否目录，stat.isFile()来判断是否文件

同步函数

同步函数从上往下执行， 相比较异步没有回调函数

fs实践—文件的复制和压缩

文件的复制

虽然没有单独学习如何复制文件，但是可以先读取文件（readFile）中的内容，然后重新写入（writeFile）即可，需要先提前判断一下文件的目录是否存在（existsSync），如果不存在就创建目录（mkdir）

文件的压缩

使用正则表达式，将回车、注释部分的内容转化为空字符串就可以达到压缩的效果

var mydata = data.toString().replace(/\s/g, '').replace(/\/\*{1,2}[\s\S]*\*\//g, '')

文件流

文件缓冲方式

流方式

内存效率提高

• 无需大量加载数据
• 流把大数据切成小块，占用内存更少

时间效率提高

• 接获数据后立即开始处理
• 无需等到内存缓冲填满

// 创建读取流
var readStream=fs.createReadStream('./2.txt');
// 创建写入流
var writeStream =fs.createWriteStream('./2.stream.txt');
// 创建管道连接
readStream.pipe(writeStream);

http

通过require引入可以发布web服务，用来请求和响应数据

const http = require("http");
// 创建服务器
// req=request请求
// res=response响应
const server = http.createServer((req, res) => {  res.statusCode = 200 //响应状态
   res.setHeader('Content-Type', `text/plain;charset=utf-8`)
   res.end('你好，node.js') //以什么结束 })
// 发布web服务
const port = 3000
const host = 'localhost'
// 在浏览器页面访问http://localhost:3000
server.listen(port, host, () => {
console.log(`服务器运行http://${host}:${port}`)
})

自定义模块

简介

Node.js中每一个单独的.js文件就是一个模块

每个模块中都有一个module变量，其代表当前模块，module的exports属性是对外的接口，只有导出的属性和方法才能被外部调用，未导出的内容是模块私有，不能被外部访问到

module.exports={perimeter,area}
const circle=require("./circle")//路径必须写清楚

加载逻辑

如何确定入口文件？在目录中寻找package.json文件，入口文件通过其main属性执行，找不到则默认引用index.js

package.json
{ "main":a.js }

会依次向上在node_modules目录中去寻找顶层文件

第三方模块

需要单独的去安装第三方模块（http://www.npmjs.com）

npm概述

npm从镜像源进行包的下载，国外镜像修改为国内镜像，提高下载效率

安装

全局安装—多个项目都能用到（将包当作全局工具使用）

npm install <package-name> -global

项目安装—只有当前项目用到

npm install <package-name> -save
//初始化项目    npm init

–save和–save-dev

–save
对应的是dependencies安装开发和上线都需要的包

–save-dev对应的是devDependencies只在开发环境中使用的包

脚手架工具

创建项目基础结构、提供项目规范和约定

Yeoman

• 一款脚手架工具，帮助开发人员创建项目的基础结构代码、yo可以在命令行运行yeoman命令，生成器可以针对不同项目有不同的脚手架

• 使用说明

  全局安装yo

  npm install --global yo
  

  安装generator

  npm install --global generator-webapp
  

  通过yo运行generator

  mkdir project-name
  cd project-name
  yo webapp
  

  启动应用

  npm run start
  

Yeoman

• 一款脚手架工具，帮助开发人员创建项目的基础结构代码、yo可以在命令行运行yeoman命令，生成器可以针对不同项目有不同的脚手架

• 使用说明

  全局安装yo

  npm install --global yo
  

  安装generator

  npm install --global generator-webapp
  

  通过yo运行generator

  mkdir project-name
  cd project-name
  yo webapp
  

  启动应用

  npm run start
  

  下篇内容更精彩~