minipack源码解析以及扩展

前置知识
  1. 首先可能你需要知道打包工具是什么存在
  2. 基本的模块化演变进程
  3. 对模块化bundle有一定了解
  4. 了解babel的一些常识
  5. 对node有一定常识

常见的一些打包工具

如今最常见的模块化构建工具 应该是webpack,rollup,fis,parcel等等各种各样。

但是现在可谓是webpack社区较为庞大。

其实呢,模块化开发很大的一点是为了程序可维护性

那么其实我们是不是可以理解为打包工具是将我们一块块模块化的代码进行智能拼凑。使得我们程序正常运行。

基本的模块化演变

// 1. 全局函数

function module1 () {
    // do somethings
}
function module2 () {
    // do somethings
}

// 2. 以对象做单个命名空间

var module = {}

module.addpath = function() {}

// 3. IIFE保护私有成员

var module1 = (function () {
    var test = function (){}
    var dosomething = function () {
        test();
    }
    return {
        dosomething: dosomething
    }
})();

// 4. 复用模块

var module1 = (function (module) {
    module.moduledosomething = function() {}
    return module
})(modules2);

// 再到后来的COMMONJS、AMD、CMD

// node module是COMMONJS的典型

(function(exports, require, module, __filename, __dirname) {
    // 模块的代码实际上在这里
    function test() {
        // dosomethings
    }
    modules.exports = {
        test: test
    }
});

// AMD 异步加载 依赖前置

// requireJS示例

define('mymodule', ['module depes'], function () {
    function dosomethings() {}
    return {
        dosomethings: dosomethings
    }
})
require('mymodule', function (mymodule) {
    mymodule.dosomethings()
})

// CMD 依赖后置 
// seajs 示例
// mymodule.js
define(function(require, exports, module) {
    var module1 = require('module1')
    module.exports = {
        dosomethings: module1.dosomethings
    }
})

seajs.use(['mymodule.js'], function (mymodule) {
    mymodule.dosomethings();
})


// 还有现在流行的esModule

// mymodule 

export default {
    dosomething: function() {}
}

import mymodule from './mymodule.js'
mymodule.dosomething()

minipack的打包流程

可以分成两大部分
  1. 生成模块依赖(循环引用等问题没有解决的~)
  2. 根据处理依赖进行打包

模块依赖生成

具体步骤

  1. 给定入口文件
  2. 根据入口文件分析依赖(借助bable获取)
  3. 广度遍历依赖图获取依赖
  4. 根据依赖图生成(模块id)key:(数组)value的对象表示
  5. 建立require机制实现模块加载运行

源码的分析

const fs = require('fs');
const path = require('path');
const babylon = require('babylon');//AST 解析器
const traverse = require('babel-traverse').default; //遍历工具
const {transformFromAst} = require('babel-core'); // babel-core

let ID = 0;

function createAsset(filename) {
  const content = fs.readFileSync(filename, 'utf-8');
  // 获得文件内容, 从而在下面做语法树分析
  const ast = babylon.parse(content, {
    sourceType: 'module',
  });
  
  // 解析内容至AST
  // This array will hold the relative paths of modules this module depends on.
  const dependencies = [];
  // 初始化依赖集
  // 使用babel-traverse基础知识,需要找到一个statement然后定义进去的方法。
  // 这里进ImportDeclaration 这个statement内。然后对节点import的依赖值进行push进依赖集
  traverse(ast, {
    ImportDeclaration: ({node}) => {
      // We push the value that we import into the dependencies array.
      dependencies.push(node.source.value);
    },
  });
  // id自增
  const id = ID++;

  const {code} = transformFromAst(ast, null, {
    presets: ['env'],
  });

  // 返回这么模块的所有信息
  // 我们设置的id filename 依赖集 代码
  return {
    id,
    filename,
    dependencies,
    code,
  };
}

function createGraph(entry) {
  // 从一个入口进行解析依赖图谱
  // Start by parsing the entry file.
  const mainAsset = createAsset(entry);

  // 最初的依赖集
  const queue = [mainAsset];

  // 一张图常见的遍历算法有广度遍历与深度遍历
  // 这里采用的是广度遍历
  for (const asset of queue) {
    // 给当前依赖做mapping记录
    asset.mapping = {};
    // 获得依赖模块地址
    const dirname = path.dirname(asset.filename);
    // 刚开始只有一个asset 但是dependencies可能多个
    asset.dependencies.forEach(relativePath => {
      // 这边获得绝对路径
      const absolutePath = path.join(dirname, relativePath);
      // 这里做解析
      // 相当于这层做的解析扩散到下一层,从而遍历整个图
      const child = createAsset(absolutePath);

      // 相当于当前模块与子模块做关联
      asset.mapping[relativePath] = child.id;
      // 广度遍历借助队列
      queue.push(child);
    });
  }

  // 返回遍历完依赖的队列
  return queue;
}
function bundle(graph) {
  let modules = '';
  graph.forEach(mod => {
    modules += `${mod.id}: [
      function (require, module, exports) { ${mod.code} },
      ${JSON.stringify(mod.mapping)},
    ],`;
  });
  // CommonJS风格
  const result = `
    (function(modules) {
      function require(id) {
        const [fn, mapping] = modules[id];
        function localRequire(name) {
          return require(mapping[name]);
        }
        const module = { exports : {} };
        fn(localRequire, module, module.exports);
        return module.exports;
      }

      require(0);
    })({${modules}})
  `;
  return result;
}

一个简单的实例

// doing.js 
import t from './hahaha.js'

document.body.onclick = function (){
    console.log(t.name)
}

// hahaha.js

export default {
    name: 'ZWkang'
}

const graph = createGraph('../example/doing.js');
const result = bundle(graph);

实例result 如下

// 打包出的代码类似
    (function(modules) {
      function require(id) {
        const [fn, mapping] = modules[id];
        function localRequire(name) {
          return require(mapping[name]);
        }
        const module = { exports : {} };
        fn(localRequire, module, module.exports);
        return module.exports;
      }

      require(0);
    })({0: [
      function (require, module, exports) { "use strict";
        
        var _hahaha = require("./hahaha.js");
        
        var _hahaha2 = _interopRequireDefault(_hahaha);
        
        function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
        
        document.body.onclick = function () {
          console.log(_hahaha2.default.name);
        }; },
      {"./hahaha.js":1},
    ],1: [
      function (require, module, exports) { "use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = {
  name: 'ZWkang'
}; },
      {},
    ],})
依赖的图生成的文件可以简化为
modules = {
    0: [function code , {deps} ],
    1: [function code , {deps} ]
}

而require则是模拟了一个很简单的COMMONJS模块module的操作

function require(id) {
    const [fn, mapping] = modules[id];
    function localRequire(name) {
      return require(mapping[name]);
    }
    const module = { exports : {} };
    fn(localRequire, module, module.exports);
    return module.exports;
}

require(0);

分析得

我们模块代码会被执行。并且执行的结果会存储在module.exports中

并接受三个参数 require module module.exports

类似COMMONJS module会在模块闭包内注入exports, require, module, __filename, __dirname

会在入口处对其代码进行require执行一遍。

minipack源码总结

通过上述分析,我们可以了解

  • minipack的基本构造
  • 打包工具的基本形态
  • 模块的一些问题

扩展

既然bundle都已经实现了,我们可不可以基于minipack实现一个简单的HMR用于热替换模块内容

可以简单的实现一下

一个简单HMR实现

可以分为以下几步
  1. watch file change
  2. emit update to front-end
  3. front-end replace modules

当然还有更多仔细的处理。

例如,模块细分的hotload 处理,HMR的颗粒度等等

主要还是在设置module bundle时需要考虑。

基于minipack实现

我们可以设想一下需要做什么。

watch module asset的变化
利用ws进行前后端update通知。
改变前端的modules[变化id]

// 建立一个文件夹目录格式为

- test.js
- base.js
- bundle.js
- wsserver.js
- index.js
- temp.html
// temp.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button class="click"> click me </button>
    <% script %> 
    <!-- 替换用占位符 -->
</body>
</html>
// base.js与test.js则是测试用的模块
// base.js

var result = {
    name: 'ZWKas'
}

export default result

// test.js

import t from './base.js'

console.log(t, '1');
document.body.innerHTML = t.name

watch module asset的变化

// 首先是实现第一步
// watch asset file

function createGraph(entry) {
  // Start by parsing the entry file.
  const mainAsset = createAsset(entry);

  const queue = [mainAsset];

  for (const asset of queue) {
    asset.mapping = {};

    const dirname = path.dirname(asset.filename);

    fs.watch(path.join(__dirname,asset.filename), (event, filename) => {
        console.log('watch ',event, filename)
        const assetSource = createAsset(path.join(__dirname,asset.filename))
        wss.emitmessage(assetSource)
    })
    asset.dependencies.forEach(relativePath => {

      const absolutePath = path.join(dirname, relativePath);

      const child = createAsset(absolutePath);

      asset.mapping[relativePath] = child.id;
      queue.push(child);
    });
  }

  return queue;
}

简单改造了createGraphl 添加了fs.watch方法作为触发点。

(根据操作系统触发底层实现的不同,watch的事件可能触发几次)

创建资源图的同时对资源进行了watch操作。

这边还有一点要补充的。当我们使用creareAsset的时候,如果没有对id与path做关联的话,那再次触发获得的id也会发生改动。

可以直接将绝对地址module id关联。从而复用了module的id

// createasset一些代码的改动 关键代码
let mapWithPath = new Map()
if(!mapWithPath.has(path.resolve(__dirname, filename))) {
    mapWithPath.set(path.resolve(__dirname, filename), id)
}
const afterid = mapWithPath.get(path.resolve(__dirname, filename))
return {
    id: afterid,
    filename,
    dependencies,
    code,
};

利用websockt进行交互提示update

 
// wsserver.js file 则是实现第二步。利用websocket与前端进行交互,提示update


const EventEmitter = require('events').EventEmitter
const WebSocket = require('ws')

class wsServer extends EventEmitter {
    constructor(port) {
        super()
        this.wss = new WebSocket.Server({ port });
        this.wss.on('connection', function connection(ws) {
            ws.on('message', function incoming(message) {
              console.log('received: %s', message);
            });
        });
    }
    emitmessage(assetSource) {
        this.wss.clients.forEach(ws => {
            ws.send(JSON.stringify({
                type: 'update',
                ...assetSource
            }))
        })
    }
}


const wsserver = new wsServer(8080)
module.exports = wsserver
// 简单地export一个带对客户端传输update信息的websocket实例

在fs.watch触发点触发


const assetSource = createAsset(path.join(__dirname,asset.filename))
wss.emitmessage(assetSource)

这里就是做这个操作。将资源图进行重新的创建。包括id,code等

bundle.js则是做我们的打包操作

const minipack = require('./index')
const fs = require('fs')

const makeEntry = (entryHtml, outputhtml ) => {
    const temp = fs.readFileSync(entryHtml).toString()
    // console.log(temp)caches.c
    const graph = minipack.createGraph('./add.js')

    const result = minipack.bundle(graph)

    const data = temp.replace('<% script %>', `<script>${result}</script><script>
    const ws = new WebSocket('ws://127.0.0.1:8080')

    ws.onmessage = function(data) {
        console.log(data)
        let parseData
        try {
            parseData = JSON.parse(data.data)
        }catch(e) {
            throw e;
        }
        if(parseData.type === 'update') {
            const [fn,mapping] = modules[parseData.id]
            modules[parseData.id] = [
                new Function('require', 'module', 'exports', parseData.code),
                mapping
            ]
            require(0)
        }
    }
    
    </script>`)
    fs.writeFileSync(outputhtml, data)
}

makeEntry('./temp.html', './index.html')

操作则是获取temp.html 将依赖图打包注入script到temp.html中

并且建立了ws链接。以获取数据

在前端进行模块替换

const [fn,mapping] = modules[parseData.id]
modules[parseData.id] = [
    new Function('require', 'module', 'exports', parseData.code),
    mapping
] // 这里是刷新对应module的内容
require(0) // 从入口从新运行一次

当然一些细致操作可能replace只会对引用的模块parent进行replace,但是这里简化版可以先不做吧

这时候我们去run bundle.js的file我们会发现watch模式开启了。此时
访问生成的index.html文件

网页实际访问效果

当我们改动base.js的内容时

第一次修改base.js editor
第一次修改效果
第二次修改base.js editor
第二次修改效果

就这样 一个简单的基于minipack的HMR就完成了。

不过显然易见,存在的问题很多。纯当抛砖引玉。

(例如module的副作用,资源只有js资源等等,仔细剖析还有很多有趣的点)

扩展阅读

本文示例代码

minipack hmr

联系我


源码学习个人小空间
此处存放阅读源码学习的总结跟心得 有的可能是会参考他人结合自己总结 有的可能是自己阅读分析总结 有的...

所有的flag都完不成的。

594 声望
18 粉丝
0 条评论
推荐阅读
ctressa和linecitats
轮子造了就写文章以免遗忘咯。 ctressa ctressa是前一段时间对测试较为入迷。 所以阅读了一些断言库,断言框架的代码。 本质上断言框架例如 mocha,ava 这些,最初的实现大抵都是一个任务执行器。 每一个断言都是...

ZWkang阅读 1.1k

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城31阅读 7.1k评论 5

封面图
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.8k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.5k评论 10

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.6k评论 3

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco18阅读 2k评论 2

「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.3k

封面图

所有的flag都完不成的。

594 声望
18 粉丝
宣传栏