前端进阶特训营-TDD制造rollup-0


11月22日
然叔(夏然)带着大家写rollup, 全部采用TDD方式开发。
rollup是什么?就是一个打包器。
rollup适合类库场景,工程上使用webpack.

mini-rollup项目分为6部分
1.原型 Treeshaking,AST
2.节点遍历器 Walk
3.构造作用域 Scope
4.模块分析函数 analyze
5.单模块实例 Module
6.打包器 Module,Bundle

第一部分 原型 Treeshaking,AST
Tree-shaking的本质是消除无用js代码。无用代码消除广泛存在于编译器中。编译器
可以判断某些代码根本不影响输出,然后消除这些代码,这个称为DCE dead code elimination

今天写个最简单的,先在单模块做,以后扩展到多模块。
原型项目
const a = () => 'a'
const b = () => 'b'
a()

output:
const a = () => 'a'
a()
其实就是把b过滤掉。

如何做?
1.构建语法树,剔除无用的部分?谁未用到谁就被踢掉。
2.支持保存使用的代码?本来是有作用域的scope,现在可以先简单一些,只有一个全局作用域。

模块分析相当于对读取的文件代码字符串进行解析。这一步其实和高级语言的编译过程一致。需要将模块
解析为抽象语法树AST。我们借助babel/parser来完成。

首先认识一下语法树
AST Abstract Syntax Tree 抽象语法树 在计算机科学中,或简称语法树 Syntax tree,是源代码语法
结构的一种抽象表示。它以树状的形式表现编程语言的语法结构,树上的每个节点都表示源代码中的
一种结构。https://astexplorer.net

分两层:1)文本生成对象。parse 2)针对对象进行各种遍历
1.PARSE:
const a = () => 'a'; 放到https://astexplorer.net
const a = () => 'a';
const b = () => 'b';
抽象:就是把分隔符去掉,编程一个对象。
2.TRANSFORM
3.GENERATE

const fs = require('fs')
const acorn = require('acorn')
const MagicSting = require('magic-string');
-----------------------------------------------------
开始手动编码:
1.开始,先测试nodejs是否安装完毕
index.js
const fs = require('fs')
const path = require('path')
console.log('rollup')
终端界面运行:
node index.js
可以打印出东西,说明nodejs已经安装。

2.先安装一下语法树的库
npm i acorn

3.引入acorn来建立语法树
const acorn = require('acorn')
然后创建一个source.js文件,加入几行语法:
const a = () => 'a';
const b = () => 'b';
a()
然后开始读文件
const code = fs.readFileSync('./src/source.js',"utf-8").toString()
运行结果:
node index.js
rollup const a = () => 'a';
const b = () => 'b';
a()

然后开始用acorn包parse读出的文件内容,形成语法树。
const ast = acorn.parse(code, {
    locations: true,
    ranges: true,
    sourceType: 'module',
    ecmaVersion: 7
})

然后裁剪代码,裁剪用的magicstring做的,用这个库裁剪。
npm i magic-string
引入:
const MagicString = require('magic-string')
这是一个对象,需要new
const m = new MagicString(code)
m.snip(0,19)

裁剪思路:
1. 首先收集声明
2. 在声明首次引用时把它放到引用前面

const declarations ={} 
把前两个node搞出来
ast.body
key:变量名
value:节点
就是一个循环+一个if判断
ast.body.forEach( node => {
    if (node.type === 'VariableDeclaration') {
        declarations[node.declarations[0].id.name] = node
    }
})

调用a()时,把a的声明一起放到一个新数组中。
首先定义一个新数组
const statements = []
ast.body
 .filter(node => node.type !== 'VariableDeclaration')
 .forEach(node => {
    statements.push(declarations[node.expression.callee.name])
    statements.push(node)
 })

最后一步,将AST输出成代码
MagicString根据statements输出打印即可
statements.forEach((node) => {
    str += m.snip(node.start, node.end).toString()+'\n'
}
完成第一个程序。

当前程序问题:
1. 嵌套问题 -代码的层级问题
const a = () => 'a';
const b = () => 'b';
if(true) {
    a()
}
2. 模块问题

3.作用域
function() {

}
4.Type问题

5.语法问题
---------------------
先解决代码层级问题
if(true) {
    a()
}
如何找到a?
开始做树的遍历
安装单元测试
npm i jest -g
npm config get registry
#最新地址 淘宝 NPM 镜像站喊你切换新域名啦!
npm config set registry https://registry.npmmirror.com

walk.js

mkdir __tests__


PS C:\film\front\rollup> jest 
 PASS  __tests__/walk.spec.js
  ast walk function
    √ single node (11 ms)                                                            
                                                                                     
Test Suites: 1 passed, 1 total                                                       
Tests:       1 passed, 1 total                                                       
Snapshots:   0 total
Time:        0.562 s
Ran all test suites.

jest ./__tests__/walk.spec.js

VUE的源代码都有测试用例
----------------------------
walk.js怎么写?


理解单元测试的玩法
-----------------------------
正式步入测试驱动开发的时代

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/1435.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

无损以太网的ROCE革命,队列的缓存空间优化分析

ROCE无损以太网,队列的缓存空间优化 多级缓存架构优化芯片性能:* 缓存空间细分为芯片级、端口级和队列级,实现精细管理。* 无损队列引入Headroom缓存空间,确保数据完整性。 在芯片层面: 静态缓存为端口提供保证的缓存空…

欧鹏RHCE 第三次作业

unit3.远程连接服务实战 作业题目: 1. 一.配置两台主机 主机1. 主机名: server.example.com ip: 172.25.254.100 建立用户timinglee,其密码为timinglee 主机2 主机名:client.example.com ip: 172.25.254.200 2.安需求完成项目 172.25.254.200 在远程…

2024.4.19作业

1.总结二进制信号量和计数型信号量的区别,以及他们的使用场景。 二进制信号量只有0和1两个状态,如果信号被一个线程接收,那别的线程就无法接收此信号 计数型信号可以累计,可以被多个线程接收 2.使用计数型信号量完成生产者和消费…

【深度学习实战(11)】搭建自己的dataset和dataloader

一、dataset和dataloader要点说明 在我们搭建自己的网络时,往往需要定义自己的dataset和dataloader,将图像和标签数据送入模型。 (1)在我们定义dataset时,需要继承torch.utils.data.dataset,再重写三个方法…

ModuleNotFoundError: No module named ‘scripts.animatediff_mm‘ 解决方案

本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里,订阅后可阅读专栏内所有文章。 大家好,我是水滴~~ 本文主要介绍在使用 Stable Diffusion WebUI 安装 AnimateDiff 插件后出现的ModuleNotFoundError: No module named scripts.animatediff_mm异常的解决方案,希望…

第三方应用类---Phpmyadmin 后台 Getshell 操作

免责声明:本节仅做技术交流学习. 目录 什么是Phpmyadmin? getshell前提条件: 详细步骤: 1-搜集到开放phpmyadmin的web,然后访问进去 2-执行SQL命令查看是否开启了读写权限 3-开启了读写权限-->继续 没有开读写权限--->鸡鸡 4-有读写权限之后,执行SQL语句导出文件…

关于edge浏览器点击下载后没有反应的问题解决

不知道什么时候开始,edge浏览器点击下载后没有反应了。 根据网上教程,关闭smartscreen的方式试了没用 后来偶然发现,是因为在扩展里,有一个迅雷下载的扩展,关闭后,就可以正常下载了 具体如下&#xff1a…

Java,Python和Go语言语法差异对比

前段时间一直在找工作,比较颓废,很长时间都没有更新博客了,最近公司的项目需要用到Python语言和Go语言, 所以又重新学习了一下Python语言和Go语言,现在做一些总结,方便以后复习使用,同时也给其他…

扩散卷积模型 笔记

1 Title Diffusion Convolutional Neural Networks(James Atwood and Don Towsley)【NeurIPS 2016】 2 Conclusion This paper presents diffusion-convolutional neural networks (DCNNs), a new model for graph-structured data. Through the introd…

使用docker搭建GitLab个人开发项目私服

一、安装docker 1.更新系统 dnf update # 最后出现这个标识就说明更新系统成功 Complete!2.添加docker源 dnf config-manager --add-repohttps://download.docker.com/linux/centos/docker-ce.repo # 最后出现这个标识就说明添加成功 Adding repo from: https://download.…

【JavaEE初阶系列】——网络层IP协议(地址管理和路由选择)

目录 🚩网络层 🎈IP协议 👩🏻‍💻IP协议"拆包组包"功能 🎈地址管理 👩🏻‍💻IP地址的分类 👩🏻‍💻NAT机制如何工作的…

[阅读笔记20][BTX]Branch-Train-MiX: Mixing Expert LLMs into a Mixture-of-Experts LLM

这篇论文是meta在24年3月发表的,它提出的BTX结构融合了BTM和MoE的优点,既能保证各专家模型训练时的高度并行,又是一个统一的单个模型,可以进一步微调。 这篇论文研究了以高效方法训练LLM使其获得各领域专家的能力,例如…

VBA技术资料MF144:将PDF首页作为对象插入工作表

我给VBA的定义:VBA是个人小型自动化处理的有效工具。利用好了,可以大大提高自己的工作效率,而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套,分为初级、中级、高级三大部分,教程是对VBA的系统讲解&#…

【推理优化】超详细!AIGC面试系列 大模型推理系列(2)

本期问题聚焦于大模型的推理优化技术 本期问题快览 有哪些常见的大模型推理优化技术介绍下通过流水线处理技术来加速大模型推理方案介绍下并行计算技术来加速大模型推理的方案有哪些通过硬件来加速大模型推理的方式?模型量化是如何加速大模型推理的?有哪…

【办公类-21-16】 20240410三级育婴师 344多选题(题目与答案合并word)

作品展示 背景需求: 前文将APP题库里的育婴师题目下载到EXCEL,并进行手动整理【办公类-21-14】 20240406三级育婴师 344道多选题 UIBOT下载整理-CSDN博客文章浏览阅读287次,点赞8次,收藏9次。【办公类-21-14】 20240406三级育婴师…

设计模式-23种基础模式目录

种一棵树最好的时间点是十年前,其次是现在 —— Dambisa Moyo《dead aid》 对软件设计来说,23种基本设计模式就像象棋里面的基本杀法一样。就算你从来没学过基本杀法,从来没听说过二鬼拍门、八角马和双车错这种专业术语,也不代表你…

OpenHarmony鸿蒙南向开发案例:【智能猫眼(基于3518开发板)】

样例简介 本Demo是基于Hi3518开发板,使用开源OpenHarmony开发的RTSP协议流媒体应用。达到将Hi3518开发板中摄像头获取的数据通过RTSP协议传输到手机并显示 。 rtsp实现可参考文档:openharmony_1.0.1实现RTSPServer 运行效果 样例原理 如上图所示&…

【编程Tool】VS code安装与使用配置保姆级教程

目录 1.软件介绍 2.软件下载: 3.安装 3.1. 双击可执行文件 3.2. 同意协议 3.3. 选择安装路径,默认在C盘 3.4. 点击下一步 3.5. 可选择所有附加任务 3.6. 点击安装 3.7. 等待安装 3.8. 点击完成 3.9. 安装成功 4.下载MinGW64 4.1. MinGW-64下载地址 &…

【UnityShader】图片圆角

1.需求 我们在开发的时候,有时候一些按钮或者菜单栏的边角是直角的需要改成圆角,但是让美术重新绘制耽误时间不说也确实没必要,这个时候我们不妨使用一个简单的shader去解决这个问题,下面我们就讲讲这个shader要如何实现。 需求1…

QoS流量整形

流量整形是一种带宽技术形式,它延迟某些类型的网络数据包的流动,以确保更高优先级应用程序的网络性能,它主要涉及调整数据传输速率,以确保网络资源以最佳容量得到利用。流量整形的目的是防止网络拥塞并提高网络的整体性能&#xf…