1.rollup Դ?源码????
2.element-plus源码与二次开发:package.json解析
3.Vue3核心源码解析 (一) : 源码目录结构
4.GROUPING运算符
5.一文带你快速上手Rollup
rollup Դ?????
年末学习新技能,react拖拽组件与高效代码调试技巧不容错过!分析学习第三方库如react-sortable-hoc时,源码首先要掌握的分析就是调试技巧。首先,源码创建一个新项目,分析js注册+源码尝试简单的源码react-sortable-hoc示例,然后设置断点进行调试。分析但注意,源码直接在打包后的分析产物中打点是无用的,这时就需要启用sourcemap来映射源代码。源码在项目中开启sourcemap,分析通过克隆并配置项目的源码rollup打包设置,确保调试时能访问源码。分析遇到只读源码文件时,源码检查CALL STACK,可能需要调整映射路径。若需修改node_modules中的文件,可使用patch-package避免覆盖。接下来,分析组件的初始化过程。SortableContainer负责管理,创建Manager对象并传递给子组件SortableElement。SortableElement负责注册自身,SortableHandle则关注节点标识和事件绑定。理解事件触发顺序后,逐步探索handleStart、handlePress、handleSortMove等关键函数。handlePress利用克隆节点模拟拖拽,handleSortMove则调整节点位置并动画化排序,handleSortEnd则进行清理工作。安卓7.0截屏源码react-sortable-hoc主要利用mousemove和touchmove事件,结合css3动画实现拖拽和排序。但要注意,它使用了不推荐的reactDom.findDomNodeapi,以及仅限于类组件使用。学习过程中,还可以记录一些实用的函数,如获取元素偏移、移动数组元素和过滤对象属性等。提升调试效率和理解库的工作原理,是学习react拖拽组件的重要一环。希望这些技巧能帮助你在年末的学习旅程中更顺利,别忘了分享给有需要的朋友哦!
element-plus源码与二次开发:package.json解析
element-plus使用pnpm的workspace来搭建monorepo工程,允许在单一码仓库中集中管理大量互相依赖的包,同时确保发布时的独立性。pnpm-workspace.yaml文件在根目录声明内部可引用的包,执行pnpm i后,会在node_modules中创建软连接,无需手动link。
element-plus组件库将vue声明在peerDependencies中,避免在主项目安装组件库时额外安装vue。通过czg包定义规范,执行提交commit命令,确保遵循git规范。使用play子包进行简单的开发调试,引入本地组件库。通过gen命令快速创建新组件,使用模板生成组件基础模板。生成版本号文件命令用于在构建时提供rollup的banner参数,部署前更新版本号命令从环境变量获取TAG_VERSION和GIT_HEAD,聊天分销代理系统源码写入到三个包的package.json中的version和gitHead字段。
清理dist目录命令使用pnpm run -r --parallel,以并行方式执行所有子包的命令,删除根目录下的dist目录,并执行所有子包的clean命令。构建文档和组件库的关键步骤包括使用rollup执行构建,通过@esbuild-kit/cjs-loader将esm和ts实时转换为CommonJS。生成类型声明文件和代码提示文件,复制源样式文件、编译为css、压缩,并输出到特定目录。启动组件库文档docs项目基于vitepress,构建组件文档,本地测试构建出的生产环境docs,生成多语言文件和CROWDIN_TOKEN。
执行各包的stub命令,使用unbuild打包工具,基于rollup,支持typescript,支持生成commonjs和esmodule和类型声明,无需额外配置。prepare Husky钩子脚本确保自动执行预定义命令,执行pnpm i后,自动执行pnpm stub,编译internal下的三个包入口。
通过上述详细解析,我们可以清晰了解到element-plus源码与二次开发中的核心功能与流程,从构建结构到构建流程,再到二次开发工具的运用,展示了其高效、箱体捉妖指标源码主图灵活的特点。
Vue3核心源码解析 (一) : 源码目录结构
通过软件框架源码阅读,深入理解框架运行机制,API设计、原理及流程成为开发者进阶的关键。Vue 3源码相较于Vue 2版本的改进明显,采用Monorepo目录结构,引入TypeScript作为开发语言,新增特性和优化显著。
启动Vue3源码,最新版本为V3.3.0-alpha.5。下载后进入core文件夹,使用Yarn进行构建。安装依赖后,执行npm run dev启动调试模式,可直观查看完整的源代码目录结构。
核心模块包括compiler-core、compiler-dom、runtime-core、runtime-dom。compiler模块在编译阶段负责将.vue文件转译成浏览器可识别的.js文件,runtime模块则负责程序运行时的处理。reactivity目录内是响应式机制的源码,遵循Monorepo规范,每个子模块独立编译打包,通过require引入。
构建Vue 3版本可使用命令,构建结果保存在core\packages\vue\dist目录下。选择性构建可通过命令实现,具体参数配置在core/rollup.config.js中查看。对于客户端编译模板,附图指标共振爆发公式源码需构建完整版本,而使用Webpack的vue-loader时,.vue文件中的模板在构建时预编译,无需额外编译器。浏览器直接打开页面时采用完整版本,构建工具如Webpack引入运行时版本。Vue的构建脚本源码位于core/scripts下。
GROUPING运算符
在处理汇总数据时,传统的GROUP BY语句无法直接实现合计和小计,这需要通过多次查询和union操作,增加了代码复杂性和数据库处理负担。为了解决这一问题,GROUPING运算符应运而生,包括rollup、cube和grouping sets三种。
例如,rollup运算符如例题1所示,用于按课程号计算平均成绩并包含合计行。源代码执行后,第五行即为总成绩的汇总。
在更复杂的场景下,如例题2,按照学号和课程号分组并求小计和总计,能清晰看到每个学生的课程汇总。变换列顺序(例题3)则会先对课程进行汇总,再对所有数据做汇总。
然而,当结果集中包含null值时,分组和总计可能会混淆。为解决这个问题,例题4通过grouping函数将null转换为便于识别的1或0。
cube函数(例题5)与rollup类似,但对所有列都进行汇总,提供了更全面的汇总信息。相比之下,grouping sets函数(例题7)仅提供各个聚合键的结果,不包含总计,适用于特定的分析需求。
一文带你快速上手Rollup
项目中一直用的都是webpack,前一段需要开发几个类库供其他平台使用,本来打算继续用webpack的,但感觉webpack用来开发js库,不仅繁琐而且打包后的文件体积也比较大。正好之前看vue源码,知道vue也是通过rollup打包的。这次又是开发类库的,于是就快速上手了rollup。
什么是rollup?
关于rollup的介绍,官方文档已经写的很清楚了:Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。
与Webpack偏向于应用打包的定位不同,rollup.js更专注于Javascript类库打包。
我们熟知的Vue、React等诸多知名框架或类库都是通过rollup.js进行打包的。
为什么是rollup?
webpack我相信做前端的同学大家都用过,那么为什么有些场景还要使用rollup呢?这里我简单对webpack和rollup做一个比较:
总体来说webpack和rollup在不同场景下,都能发挥自身优势作用。webpack对于代码分割和静态资源导入有着“先天优势”,并且支持热模块替换(HMR),而rollup并不支持。
所以当开发应用时可以优先选择webpack,但是rollup对于代码的Tree-shaking和ES6模块有着算法优势上的支持,若你项目只需要打包出一个简单的bundle包,并是基于ES6模块开发的,可以考虑使用rollup。
其实webpack从2.0开始就已经支持Tree-shaking,并在使用babel-loader的情况下还可以支持es6 module的打包。实际上,rollup已经在渐渐地失去了当初的优势了。但是它并没有被抛弃,反而因其简单的API、使用方式被许多库开发者青睐,如React、Vue等,都是使用rollup作为构建工具的。
快速上手
我们先花大概十分钟左右的时间来了解下rollup的基本使用以及完成一个hello world。
安装
首先全局安装rollup:
接着,我们初始化一个如下所示的项目目录
首先我们在src/index.js中写入如下代码:
然后在命令行执行以下命令:
执行命令,我们即可在dist目录下生成bundle.js文件:
这时,我们再在example/index.html中引入上面打包生成的bundle.js文件,打开浏览器:
如我们所预料的,控制台输出了柯森。
到这里,我们就用rollup打包了一个最最简单的demo。
可能很多同学看到这里对于上面命令行中的参数不是很明白,我依次说明下:
其实除了这两个,还有很多其他常用的命令(这里我暂且列举剩下两个也比较常用的,完整的 rollup 命令行参数):
使用配置文件(rollup.config.js)
使用命令行的方式,如果选项少没什么问题,但是如果添加更多的选项,这种命令行的方式就显得麻烦了。
为此,我们可以创建配置文件来囊括所需的选项
在项目中创建一个名为rollup.config.js的文件,增加如下代码:
然后命令行执行:
打开dist/bundle.js文件,我们会发现和上面采用命令行的方式打包出来的结果是一样的。
这里,我对配置文件的选项做下简单的说明:
到这里,相信你已经差不多上手rollup了。
进阶
但是,这对于真实的业务场景是远远不够的。
下面,我将介绍rollup中的几种常用的插件以及external属性、tree-shaking机制。
resolve插件
为什么要使用resolve插件
在上面的入门案例中,我们打包的对象是本地的js代码和库,但实际开发中,不太可能所有的库都位于本地,我们大多会通过npm下载远程的库。
与webpack和browserify这样的其他捆绑包不同,rollup不知道如何打破常规去处理这些依赖。因此我们需要添加一些配置。
resolve插件使用
首先在我们的项目中添加一个依赖the-answer,然后修改src/index.js文件:
执行npm run build。
这里为了方便,我将原本的rollup -c -w添加到了package.json的scripts中:"build": "rollup -c -w"
会得到以下报错:
打包后的bundle.js仍然会在Node.js中工作,但是the-answer不包含在包中。为了解决这个问题,将我们编写的源码与依赖的第三方库进行合并,rollup.js为我们提供了resolve插件。
首先,安装resolve插件:
修改配置文件rollup.config.js:
这时再次执行npm run build,可以发现报错已经没有了:
打开dist/bundle.js文件:
打包文件bundle.js中已经包含了引用的模块。
有些场景下,虽然我们使用了resolve插件,但可能我们仍然想要某些库保持外部引用状态,这时我们就需要使用external属性,来告诉rollup.js哪些是外部的类库。
external 属性
修改rollup.js的配置文件:
重新打包,打开dist/bundle.js文件:
这时我们看到the-answer已经是做为外部库被引入了。
commonjs插件
为什么需要commonjs插件
rollup.js编译源码中的模块引用默认只支持 ES6+的模块方式import/export。然而大量的npm模块是基于CommonJS模块方式,这就导致了大量 npm模块不能直接编译使用。
因此使得rollup.js编译支持npm模块和CommonJS模块方式的插件就应运而生:@rollup/plugin-commonjs。
commonjs插件使用
首先,安装该模块:
然后修改rollup.config.js文件:
babel插件
为什么需要babel插件?
我们在src目录下添加es6.js文件(⚠️ 这里我们使用了 es6 中的箭头函数):
然后修改rollup.config.js配置文件:
执行打包,可以看到dist/esBundle.js文件内容如下:
可以看到箭头函数被保留下来,这样的代码在不支持ES6的环境下将无法运行。我们期望在rollup.js打包的过程中就能使用babel完成代码转换,因此我们需要babel插件。
babel插件的使用
首先,安装:
同样修改配置文件rollup.config.js:
然后打包,发现会出现报错:
提示我们缺少@babel/core,因为@babel/core是babel的核心。我们来进行安装:
再次执行打包,发现这次没有报错了,但是我们尝试打开dist/esBundle.js:
可以发现箭头函数仍然存在,显然这是不正确的,说明我们的babel插件没有起到作用。这是为什么呢?
原因是由于我们缺少.babelrc文件,添加该文件:
我们看.babelrc配置了preset env,所以先安装这个插件:
这次再次执行打包,我们打开dist/esBundle.js文件:
可以看到箭头函数被转换为了function,说明babel插件正常工作。
json插件
为什么要使用json插件?
在src目录下创建json.js文件:
内容很简单,就是引入package.json,然后去打印author字段。
修改rollup.config.js配置文件:
执行打包,发现会发生如下报错:
提示我们缺少@rollup/plugin-json插件来支持json文件。
json插件的使用
来安装该插件:
同样修改下配置文件,将插件加入plugins数组即可。
然后再次打包,发现打包成功了,我们打开生成的dist/jsonBundle目录:
完美!!
tree-shaking机制
这里我们以最开始的src/index.js为例进行说明:
修改上述文件:
执行打包。打开dist/bundle.js文件:
再次修改src/index.js文件:
再次执行打包,打开打包文件:
发现了什么?
我们发现关于变量b的定义没有了,因为源码中并没有用到这个变量。这就是ES模块著名的tree-shaking机制,它动态地清除没有被使用过的代码,使得代码更加精简,从而可以使得我们的类库获得更快的加载速度。
总结
本文大致向大家介绍了什么是rollup以及如何快速上手rollup。文中提到的这些其实只是冰山一角,rollup能玩的东西还有很多,关于更多可以去 rollup 官网查询。