资讯专栏INFORMATION COLUMN

实现小型打包工具

YFan / 3044人阅读

摘要:函数在返回值对象时,多一个标识符自增数字给每个文件添加对象用来保存自己所依赖的文件对象,方便使用时找到函数。构建字符串时,是和做。用到方法来进行相对路径和的转换。方法多了处理文件的能力代码见参考资料

思路图解

思路:
A方法

找出入口文件所有的依赖关系

读取并编译入口文件代码

依据入口文件代码广度遍历所有依赖文件(包括子级)

对外输出依赖关系

通过构建CommonJS代码来获取exports导出的内容

构建modules对象字符串(key为文件id, 值为[对应的函数, mapping]

构建result函数字符串,并传入modules参数,函数中构建require函数,用于获取并执行对应文件

执行require(entry), 即执行对应的文件

有哪些功能点

读取并编译文件代码

获取所有依赖文件

实现打包功能(构建出CommonJS的写法)

缺点:

是用relativePath做文件模块的唯一标识,容易冲突

B方法

与A方法大体思路一致。

区别

createCode函数 -》createAsset函数。 createAsset函数在返回值对象时,多一个标识符id(自增数字)

getDependencies -》 createGraph, 给每个文件item添加mapping对象用来保存自己所依赖的文件path:id对象,方便使用时找到id

bundle函数。构建modules字符串时,是 id和[function, mapping]做key, value。构建result字符串时,require函数,接收的是filepath对应的id. 有localRequire函数

综上所述:

主要区别是此方法使用自增的id作为文件模块的唯一标识(不会重复)而不是文件相对路径(容易重复)
但是这也导致代码有更大复杂性,比如模块自身需记录mapping(来记住依赖文件相对路径和其id的对应关系)。用到localRequire方法来进行相对路径和id的转换。

A方法多了处理css文件的能力

代码:

见github https://github.com/sunchengua...

参考资料

https://juejin.im/book/5bdc71...

https://zhuanlan.zhihu.com/p/...

https://zhuanlan.zhihu.com/p/...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104260.html

相关文章

  • DevOps 基于Walle的小型持续集成实战(一)概述

    摘要:该文章用于概述一个小型持续集成环境的搭建的方案什么是持续集成持续集成作为当今软件开发实践,可以简单理解为团队开发相对频繁的集成他们的工作,一般让每个成员每天至少集成一次,而这回造成每天会有多次的版本发布。 该文章用于概述一个小型持续集成环境的搭建的方案 什么是持续集成? 持续集成作为当今软件开发实践,可以简单理解为团队开发相对频繁的集成他们的工作,一般让每个成员每天至少集成一次,而这回...

    Yangyang 评论0 收藏0
  • 使用 Vue2.js + Node.js 搭建一个小型的全栈项目

    摘要:大概过来一个多月,我决定两路开工。使用给前端写接口,配备后台管理功能,先把后台搭建好。大概几天过后,后台一些简单的功能实现后,就开始用开始搭建前台,也一直在想做点什么比较好,于是就做了个豆瓣评分类似的项目。 写在前面 由于最近公司业务不是很忙,空闲时间比较多,于是就在纠结Vue.js(之前就学习过)和Node.js先专研哪个比较好,最终选择了先玩玩Node.js。经过一段时间的学习,就...

    freewolf 评论0 收藏0
  • DevOps 基于Walle的小型持续集成实战(三)Docker与Gitlab

    摘要:自动化测试和持续集成发布。在服务型环境中部署和调整数据库或其他的后台应用。容器与镜像的关系类似于面向对象编程中的对象与类。容器容器是独立运行的一个或一组应用。提供了庞大的镜像集合供使用。 还在按照mysql安装教程一步一步配置服务配置账户吗?还在为每开一个新环境重新配置这些服务感到苦恼吗?使用Docker,服务快速构建部署。解决你的研发时间,早点下班~现代技术,还不会docker你就落...

    since1986 评论0 收藏0
  • cxfreeze打包python,飞一般的感觉

    摘要:总所周知,因库多,语法优雅,深受开发者的喜爱。于我来说,写一些小型程序,在不需要考虑太多问题的时候,无疑是我的第一选择。当一切都配置好后,使用打包相应脚本有两种方法。 总所周知,python因库多,语法优雅,深受开发者的喜爱。 于我来说,写一些小型程序,在不需要考虑太多问题的时候,python无疑是我的第一选择。而有的时候,虽然是小型程序,但我还是需要他们通用,即使不考虑使他跨平台...

    hellowoody 评论0 收藏0
  • 微前端 —— 理论篇

    摘要:现在开始从头搭建我们的微前端架构。项目源码微前端项目微前端微前端项目 1. 微前端         基于spa类的单页应用,随着企业工程项目的体积越来越大,开发的功能越来越多,页面也越来越多,项目随之也变得越来越臃肿,维护起来十分困难,往往改一个logo,或者改一个小样式,都要将项目全部重新打包一遍,维护困难,部署也困难。         因此前端在借鉴后端的微服务架构模式后,衍生了...

    wangbinke 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<