DripForm源码分析(Rollup打包流程)

·  阅读 668

「这是我参与2022首次更文挑战的第1天,活动详情查看:2022首次更文挑战」。

介绍

京东开源的动态表单配置方案DripForm采用的是rollup打包,借助lerna+yarn的大仓管理代码的方式(monorepo)进行开发,每个package都可以被当做一个独立的包发布,rollup的结构由根目录的rollup.base.config.js和各个子package的rollup.config.js组成,子包的配置继承于公共的基础rollup配置,也符合monorepo的理念。

公共配置结构设计

根目录下的rollup配置主要做了三件事:

1. 生成打包目录

在getOutput这个函数中,通过导入package.json文件获取对应的属性名,然后使用minimist这个轻量级命令行参数解析引擎获取用户在终端的输入,获取到的argv数组是node的路径和rollup的包路径,所以命令行参数得从第三个参数获取,如果设置了banner参数则打包到lib目录中,这里的目的是为了打包ui库的css文件。因为包文件是scope的,如果取包名全称,则会生成两级目录,所以要取”/“后面的字符串。 DripForm在子package中自定义了一个字段,叫做distExports,接受一个对象字段,其中的format字段定义了编译后遵循的规范,可以是amd、cjs、esm、iife、umd,最为常用的就是common.js和es Modules规范了,因为这里可以接受一个数组或者是一个字符串,则会有两种不同的处理方式,解释到这里,就可以大致明白后面的代码内容了,强调一下file对象中则是可以生成如下格式的打包文件:

-- dist
  -- esm
    -- index.js
  -- cjs
    -- index.js
复制代码

getOutPut.png

2. 处理外部依赖

这里的作用是将外部依赖给排除,rollup的官方文档描述的external是:将模块ID的逗号分隔列表排除,我的理解是在打包的时候,会依赖于dependencies和peerDependencies下描述的第三方包,打包后的产物会变得很大,只打纯package,比如说你使用的库引入了react和react-dom,你肯定不希望在你所写的库中包含react的打包内容,所以要讲这一部分排除在外,当然,排除的也有肯能在项目中识别不到,这时候就得定义global字段了。详情参见:www.rollupjs.com/guide/comma… getExternal.png

3. 对rollup插件进行处理

这里将会对部分重点代码进行分析,其实是rollup提供了一系列插件来帮助我们进行打包。 "watch:babel": "lerna run --parallel watch -- --environment NODE_ENV:development:babel", "watch:ts": "lerna run --parallel watch -- --environment NODE_ENV:development:ts",这里提供了babel和ts的的编译参数,可以使用不同的工具进行代码编译。 transpiler.png getPlugins函数主要返回的是一个数组对象,包含了对插件的配置情况,主要流程如下:

利用@rollup/plugin-alias来对传入的别名参数进行解析,传入rollup-plugin-progress来显示打包的进程,打包的过程会在终端进行显示,利用rollup-plugin-clear清除dist文件(非watch状态下清除,watch由于并行编译,删除后会出现找不到包的情况),利用@rollup/plugin-node-resolve来加载node_modules里面得模块等等。 编译.png 关键是这段代码,区分了再watch模式下利用babel去编译代码,eslint对ts进行校验,但你要打包到生产环境上进行发包处理,那么ts声明文件也得随之生成,这里不再讲述typescript和babel的具体配置。主要是集成了@rollup/plugin-babel和rollup-plugin-ts。 中间过程会对非es6模块、postcss、json文件进行处理,并压缩。 最后会通过rollup-plugin-visualizer将打包结果的分析文件存放在build-info目录下。

visualizer({
  title: `${name}`,
  sourceMaps: true,
  filename: `./${buildToLib ? 'build-css-info' : 'build-info'}/index.stats.html`,
  open: false,
  template: 'sunburst',
}),
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改