打包工具就是负责把一些分散的小模块,按照一定的规则整合成一个大模块的工具。与此同时,打包工具也会处理好模块之间的依赖关系,最终这个大模块将可以被运行在合适的平台中。

打包工具会从一个入口文件开始,分析它里面的依赖,并且再进一步地分析依赖中的依赖,不断重复这个过程,直到把这些依赖关系理清挑明为止。

从上面的描述可以看到,打包工具最核心的部分,其实就是处理好模块之间的依赖关系。

为了简单起见,minipack项目直接使用ES modules规范,接下来我们新建三个文件,并且为它们之间建立依赖:

/* name.js */

export const name = 'World'
/* message.js */

import { name } from './name.js'

export default `hello ${name}!`
/* entry.js */

import message from './message.js'

console.log(message)

它们的依赖关系非常简单:entry.js → message.js → name.js,其中entry.js将会成为打包工具的入口文件。

但是,这里面的依赖关系只是我们人类所理解的,如果要让机器也能够理解当中的依赖关系,就需要借助一定的手段了。

依赖关系解析

新建一个js文件,命名为minipack.js,首先引入必要的工具

/* minipack.js */

const fs = require('fs')
const path = require('path')
const babylon = require('babylon')
const traverse = require('babel-traverse').default
const { transformFromAst } = require('babel-core')

接下来,我们会撰写一个函数,这个函数接收一个文件作为模块,然后读取它里面的内容,分析出其所有的依赖项。当然,我们可以通过正则匹配模块文件里面的import关键字,但这样做非常不优雅,所以我们可以使用babylon这个js解析器把文件内容转化成抽象语法树(AST),直接从AST里面获取我们需要的信息。

得到了AST之后,就可以使用babel-traverse去遍历这棵AST,获取当中关键的“依赖声明”,然后把这些依赖都保存在一个数组当中。

最后使用babel-coretransformFromAst方法搭配babel-preset-env插件,把ES6语法转化成浏览器可以识别的ES5语法,并且为该js模块分配一个ID。

let ID = 

function createAsset (filename) {
// 读取文件内容
const content = fs.readFileSync(filename, 'utf-8') // 转化成AST
const ast = babylon.parse(content, {
sourceType: 'module',
}); // 该文件的所有依赖
const dependencies = [] // 获取依赖声明
traverse(ast, {
ImportDeclaration: ({ node }) => {
dependencies.push(node.source.value);
}
}) // 转化ES6语法到ES5
const {code} = transformFromAst(ast, null, {
presets: ['env'],
}) // 分配ID
const id = ID++ // 返回这个模块
return {
id,
filename,
dependencies,
code,
}
}

运行createAsset('./example/entry.js'),输出如下:

{ id: ,
filename: './example/entry.js',
dependencies: [ './message.js' ],
code: '"use strict";\n\nvar _message = require("./message.js");\n\nvar _message2 = _interopRequireDefault(_message);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nconsole.log(_message2.default);'
}

可见entry.js文件已经变成了一个典型的模块,且依赖已经被分析出来了。接下来我们就要递归这个过程,把“依赖中的依赖”也都分析出来,也就是下一节要讨论的建立依赖关系图集。

建立依赖关系图集

新建一个名为createGragh()的函数,传入一个入口文件的路径作为参数,然后通过createAsset()解析这个文件使之定义成一个模块。

接下来,为了能够挨个挨个地对模块进行依赖分析,所以我们维护一个数组,首先把第一个模块传进去并进行分析。当这个模块被分析出还有其他依赖模块的时候,就把这些依赖模块也放进数组中,然后继续分析这些新加进去的模块,直到把所有的依赖以及“依赖中的依赖”都完全分析出来。

与此同时,我们有必要为模块新建一个mapping属性,用来储存模块、依赖、依赖ID之间的依赖关系,例如“ID为0的A模块依赖于ID为2的B模块和ID为3的C模块”就可以表示成下面这个样子:

{
: [function A () {}, { 'B.js': , 'C.js': }]
}

搞清楚了个中道理,就可以开始编写函数了。

function createGragh (entry) {
// 解析传入的文件为模块
const mainAsset = createAsset(entry) // 维护一个数组,传入第一个模块
const queue = [mainAsset] // 遍历数组,分析每一个模块是否还有其它依赖,若有则把依赖模块推进数组
for (const asset of queue) {
asset.mapping = {}
// 由于依赖的路径是相对于当前模块,所以要把相对路径都处理为绝对路径
const dirname = path.dirname(asset.filename)
// 遍历当前模块的依赖项并继续分析
asset.dependencies.forEach(relativePath => {
// 构造绝对路径
const absolutePath = path.join(dirname, relativePath)
// 生成依赖模块
const child = createAsset(absolutePath)
// 把依赖关系写入模块的mapping当中
asset.mapping[relativePath] = child.id
// 把这个依赖模块也推入到queue数组中,以便继续对其进行以来分析
queue.push(child)
})
} // 最后返回这个queue,也就是依赖关系图集
return queue
}

尝试运行一下createGraph('./example/entry.js'),就能够看到如下的输出:

[ { id: ,
filename: './example/entry.js',
dependencies: [ './message.js' ],
code: '"use strict";\n\nvar _message = require("./message.js");\n\nvar _message2 = _interopRequireDefault(_message);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nconsole.log(_message2.default);',
mapping: { './message.js': } },
{ id: ,
filename: 'example/message.js',
dependencies: [ './name.js' ],
code: '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n value: true\n});\n\nvar _name = require("./name.js");\n\nexports.default = "Hello " + _name.name + "!";',
mapping: { './name.js': } },
{ id: ,
filename: 'example/name.js',
dependencies: [],
code: '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n value: true\n});\nvar name = exports.name = \'world\';',
mapping: {} }
]

现在依赖关系图集已经构建完成了,接下来就是把它们打包成一个单独的,可直接运行的文件啦!

进行打包

上一步生成的依赖关系图集,接下来将通过CommomJS规范来实现加载。由于篇幅关系,本文不对CommomJS规范进行扩展,有兴趣的读者可以参考@阮一峰 老师的一篇文章《浏览器加载 CommonJS 模块的原理与实现》,说得非常清晰。简单来说,就是通过构造一个立即执行函数(function () {})(),手动定义moduleexportsrequire变量,最后实现代码在浏览器运行的目的。

接下来就是依据这个规范,通过字符串拼接去构建代码块。

function bundle (graph) {
let modules = '' graph.forEach(mod => {
modules += `${mod.id}: [
function (require, module, exports) { ${mod.code} },
${JSON.stringify(mod.mapping)},
],`
}) 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();
})({${modules}})
`
return result
}

最后运行bundle(createGraph('./example/entry.js')),输出如下:

(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();
})({
: [
function (require, module, exports) {
"use strict"; var _message = require("./message.js"); var _message2 = _interopRequireDefault(_message); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } console.log(_message2.default);
},
{ "./message.js": },
], : [
function (require, module, exports) {
"use strict"; Object.defineProperty(exports, "__esModule", {
value: true
}); var _name = require("./name.js"); exports.default = "Hello " + _name.name + "!";
},
{ "./name.js": },
], : [
function (require, module, exports) {
"use strict"; Object.defineProperty(exports, "__esModule", {
value: true
});
var name = exports.name = 'world';
},
{},
],
})

这段代码将能够直接在浏览器运行,输出“Hello world!”。

至此,整一个打包工具已经完成。

归纳总结

经过上面几个步骤,我们可以知道一个模块打包工具,第一步会从入口文件开始,对其进行依赖分析,第二步对其所有依赖再次递归进行依赖分析,第三步构建出模块的依赖图集,最后一步根据依赖图集使用CommonJS规范构建出最终的代码。明白了当中每一步的目的,便能够明白一个打包工具的运行原理

打包工具的核心原理(转自:https://juejin.im/entry/5b223ebd518825748b569bda)的更多相关文章

  1. 透过实现小型打包工具理解webpack

    面试经常有问到 webpack,偶遇一篇比较有实用价值的且有利于理解的文章,现总结如下: 本篇文章中要实现的这个迷你打包工具,它主要能实现如下两个功能: ①.将 ES6 转换成 ES5: ②.支持在 ...

  2. Maven 核心原理

    Maven 核心原理 标签 : Java基础 Maven 是每一位Java工程师每天都会接触的工具, 但据我所知其实很多人对Maven理解的并不深, 只把它当做一个依赖管理工具(下载依赖.打包), M ...

  3. 开源框架TLog核心原理架构解析

    前言 最近在做TLog 1.2.5版本的迭代,许多小伙伴之前也表示说很想参与开源项目的贡献.为了让项目更好更快速的迭代新特性以及本着发扬开源精神互相学习交流,很有幸招募到了很多小伙伴与我一起前行. 为 ...

  4. 【算法】(查找你附近的人) GeoHash核心原理解析及代码实现

    本文地址 原文地址 分享提纲: 0. 引子 1. 感性认识GeoHash 2. GeoHash算法的步骤 3. GeoHash Base32编码长度与精度 4. GeoHash算法 5. 使用注意点( ...

  5. Atitit.项目修改补丁打包工具 使用说明

    Atitit.项目修改补丁打包工具 使用说明 1.1. 打包工具已经在群里面.打包工具.bat1 1.2. 使用方法:放在项目主目录下,执行即可1 1.3. 打包工具的原理以及要打包的项目列表1 1. ...

  6. iOS 本地自动打包工具

    1.为什么要自动打包工具? 每修改一个问题,测试都让你打包一个上传fir , 你要clean -> 编译打包 -> 上传fir -> 通知测试.而且打包速度好慢,太浪费时间了.如果有 ...

  7. Unity 游戏框架搭建 (十一) 简易AssetBundle打包工具(一)

    最近在看Unity官方的AssetBundle(以下简称AB)的教程,也照着做了一遍,不过做出来的AssetBundleManager的API设计得有些不太习惯.目前想到了一个可行的解决方案.AB相关 ...

  8. 多渠道打包工具Walle源码分析

    一.背景 首先了解多渠道打包工具Walle之前,我们需要先明确一个概念,什么是渠道包. 我们要知道在国内有无数大大小小的APP Store,每一个APP Store就是一个渠道.当我们把APP上传到A ...

  9. 手写webpack核心原理,再也不怕面试官问我webpack原理

    手写webpack核心原理 目录 手写webpack核心原理 一.核心打包原理 1.1 打包的主要流程如下 1.2 具体细节 二.基本准备工作 三.获取模块内容 四.分析模块 五.收集依赖 六.ES6 ...

随机推荐

  1. 【转】合理的布局,绚丽的样式,谈谈Winform程序的界面设计

    从事Winform开发很多年了,由于项目的需要,设计过各种各样的界面效果.一般来说,运用传统的界面控件元素,合理设计布局,能够设计出比较中规中矩的标准界面:利用一些换肤的控件或者部分界面组件,能够设计 ...

  2. 微信授权获取code(微信支付)

    摘要:最近在做h5支付,然后发现一个问题,微信自带浏览器不支持h5支付,然后后台又做了一个微信支付的接口,然后要传code参数,代码写好总结后,就发到这里记录一下: 因为有两个支付接口,所以首先判断打 ...

  3. H5+MUI上传文件

    应用场景:MUI+H5+WEBAPI 今天在给我外甥女调手机端上传图片的时候,发现他是直接调用的MUI下的api,直接调取相册或者相机,到最后只看见了一个文件的路径,所以以前写的上传文件就不太好套上去 ...

  4. 数据结构(三)--- B树(B-Tree)

       文章图片代码来自邓俊辉老师的课件 概述 上图就是 B-Tree 的结构,可以看到这棵树和二叉树有点不同---"又矮又肥".同时子节点可以有若干个小的子节点构成.那么这样一棵树 ...

  5. sc create SVN-Service binpath= "D:\Program Files\Svn\bin\s vnserve.exe --service -r E:\repository\svn" displayname= "SVN-Service" start= au to depend= Tcpip [SC] OpenSCManager 失败 5:

    在安装SVN服务时就会出现如下问题: C:\Users\gushangzao>sc create SVN-Service binpath= "D:\Program Files\Svn\ ...

  6. 使用Mac自带svn搭建服务器,并使用idea进行连接

    一.检查Mac自带SVN版本号 二.创建代码仓库 $ mkdir -p /Users/Shared/svn/repository $ svnadmin create /Users/Shared/svn ...

  7. jquery 提示语淡入效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Jquery中动态生成的元素没有点击事件或者只有一次点击事件

    今天用jq做动态生成的元素的click事件时,click只执行了一次,当然有些朋友可能根本没执行, 执行了一次的原因是因为可能有函数加载了一遍,一次都没执行的可能是没绑定对象或者jq版本问题, 动态生 ...

  9. FCC上的javascript算法题之中级篇

    FCC中的javascript中级算法题解答 中级算法的题目中用到了很多js的知识点,比如迭代,闭包,以及对json数据的使用等等,现在将自己中级算法的解答思路整理出来供大家参考讨论.欢迎大家提出新的 ...

  10. laraval开发之QQ登录及QQ报错

    1.composer安装依赖 2.在config/app.php中注册providers并添加Socialite门面 3.在app/Providers/EventServiceProcider.php ...