webpack用到的第三方库

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

• 模块化的几个概念

1. babel: 将es6转换为es5的, babel转换后的代码是遵循commonJS规范的 而commonJS规范是node的语法规范,浏览器则不支持
2. webpack 将commonJS规范转换为浏览器能识别的代码

es6->es5(commonJS规范)->浏览器可执行代码

• webpack用到的第三方库

1. ejs

字符串模板引擎. 模板字符串中引用数据变量,数据确定后生成最终模板字符串

2. Babylon 是Babel 中使用的 JavaScript 解析器。 主要是用来将代码生成ast树,以便修改ast树
3. @babel/generator 将修改后的ast转化为代码
4. @babel/traverse 遍历ast 操作ast

babel-traverse是一个对ast遍历的工具。然后对节点增删改查 几个关键的api path.replaceWith() //替换 path.skip() //跳过子节点 path.remove() // 删除

5. @babel/types

let copyNode = types.cloneNode(node)//复制当前节点
节点类型判断types.isIdentifier types.isExpressionStatement 节点创建 const str = types.stringLiteral('string') // string const num = types.numericLiteral(10e4) // 10000 types.booleanLiteral(false) //bool值

6. ajv

对json文件的类型校验.好多loader都有用到这个库

const scheme = {
    "title": "Product",
    "description": "A product from Acme's catalog",
    "required": [ "productId", "productName", "price" ],
    "type": "object",
    "properties": {
        "productId": {
            "description": "The unique identifier for a product",
            "type": "integer"
        },
        "productName": {
            "description": "Name of the product",
            "type": "string"
        },
        "price": {
            "description": "The price of the product",
            "type": "number",
            "exclusiveMinimum": 0
        },
        "tags": {
            "description": "Tags for the product",
            "type": "array",
            "items": {
                "type": "string"
            },
            "minItems": 1,
            "uniqueItems": true
        },
        "dimensions": {
            "type": "object",
            "properties": {
                "length": {
                    "type": "number"
                },
                "width": {
                    "type": "number"
                },
                "height": {
                    "type": "number"
                }
            },
            "required": [ "length", "width", "height" ]
        }
    }
}
let ajv = new Ajv();
let validate = ajv.compile(schema);
let valid = validate(data);
if (!valid) console.log(validate.errors);

7. ajv-keywords

给ajv 添加关键字,ajv关键字太少,自定义关键字用.

8.Tapable是 webpack的核心关键库，webpack最终要的就是发布订阅模式。Tapable就是实现发布订阅的 使用方法

const {SyncHook} = require("tapable");

const syncHook = new SyncHook()
syncHook.tap('logPlugin', () => { console.log('synchook 被执行了.')}) 
//将传进去的参数变成 options: {type: "sync", fn: Function, name: "logPlugin"} 
//把option赋值给hook实例 ===> 最终执行 this.taps[i] = option;
syncHook.call()
// 生成执行函数并执行  第三行代码`syncHook.call()`

总结：关键是ajv和babel这两个都是做转换作用的，tapable则是我们能接触到源码的关键， 一般发布订阅模式，都是收集所有订阅，一旦tap关键的hook后，就会从数组里面取出保存的订阅方法，遍历调用。