这是我参与

「第四届青训营」笔记创作活动的第9天

Node.js

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Chrome JavaScript运行时建立的一个平台，基于V8引擎，速度快，性能好
Node.js就是运行在服务端的JavaScript

结构特点

异步I/O

当Node.js执行I/O操作时，会在响应返回后恢复操作，而不是阻塞线程并占用额外内存等待

单线程

JS线程 + UV线程池 + V8任务线程池 + V8 Inspector 线程

优点：不需要考虑线程同步问题，比较高效的利用系统资源
缺点：发生阻塞会产生负面影响

跨平台

JS无需编译环境，开发成本低（无需考虑跨平台问题）

第一个Node.js应用

Server端
使用require载入HTTP模块，createServer()方法创建服务器

const http = require('http')
const port = 3000

const server = http.createServer((req,res)=>{
    res.end('hello')//显示出hello
})

server.listen(port,()=>{
    console.log('server listens on: '${port}'')//控制台输出
})

Client端

const http = require('http')
const body = JSON.stringify({msg: 'hello client'})

const req = http.request('http://localhost:3000',{
    method:'POST'
    headers: {
        'Content-Type':'application/json',
        'Content-Length':body.length,
    },
},(res)=>{
    const.bufs = []
    res.on('data',data=>{
        bufs.push(data)
    })
    res.on('end',()=>{
        const receive = JSON.parse(Buffer.concat(bufs).toString())
        console.log('receive:',receive)
    })
})

req.end(body)

Webpack

Webpack本质上是一个前端资源编译、打包工具，支持将多个资源文件打包成一个Bundle
在工程化工具出现前，资源文件都要手工管理，需要严格按照文件依赖编写代码，开发环境与生成环境一致难以接入新的特性方法，对开发效率影响巨大

Webpack使用

安装依赖 npm i webpack webpack-cli -D
添加配置文件 webpack.config.js

const path = require('path')

//构造函数，创建实例对象
const Hp = new HtmlPlugin({
    //指定复制源
    template: './src/index.html',
    //指定复制出来的文件名和路径
    filename: './index.html'
})
module.exports = {
    mode:'development', //开发模式
    //entry 指定处理哪个文件
    entry : path.join(__dirname,'src/js/index.js'),
    //output指定打包出口
    output : {
        //路径
        path: path.join(__dirname,'dist'),
        //文件名
        filename: 'bundle.js' ,
    },
}

核心流程

关于配置

webpack的使用基本围绕配置展开

流程类：作用于流程中的环节，直接影响打包效果的配置项
工具类：主流程之外，提供更多工程化能力的配置

Loader

将各式各样的资源转换为标准的JS格式内容，能够提高项目的灵活度
Loader函数包含三个参数：source、sourceMap、data

source：资源内容的输入
sourceMap：可选参数，代码的Map结构
data：可选参数，其他需要在Loader中传递的信息

PS：Webpack拥有另一套扩展机制=>Plugin
能在各个对象的钩子中插入特化处理逻辑

Babel

主要用于向下兼容，当浏览器不支持最新JavaScript语法时，Babel能够帮助转换成向后兼容的版本

插件

为什么需要插件

当项目发展壮大时，项目的整体结构会十分复杂，新人需要了解所有的细节，上手成本高
功能迭代成本高，甚至需要改动原始的旧代码，对于开源项目而言缺乏扩展性
而插件的存在就是为了保证主体结构和功能的同时更容易的添加新特性

‘钩子’

插件围绕钩子展开

在编译过程中Webpack通过hook告知当前发生的事情
通过tapable提供的回调机制，以参数上下文的方式传递上下文信息
在上下文参数对象中附带许多[side effect]的交互接口，插件可以通过这些接口改变

前端基础概述-工程化开发|青训营笔记