rollup打包工具

Posted 2022-03-28 coderlin_

Rollup

• webpack的打包比较繁琐，打包体积比较大。
• rollup主要是用来打包js库的。
• vue/react等都在用rollup作为打包工具。

使用

安装依赖

yarn add @babel/core @babel/preset-env @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-typescript loadsh rollup rollup-plugin-babel postcss rollup-plugin-postcss -D

yarn add rollup-plugin-terser tslib typescript rollup-plugin-serve rollup-plugin-livereload -D

配置相对简单，打包后的代码也是很清晰。
比wbepack打包后的代码简单太多。

plugin的使用

babel和typescript的使用

rollup的钩子就是要一个对象，它可以包含一些特定的方法。

这些特定的方法会在rollup的执行过程中被执行，如上图。

官网上简单的插件例子
可以简单理解插件就是一个对象，有很多钩子属性，在rollup的特定阶段会调用插件的这些钩子。

Tree shaking

• rollup只处理函数和顶层的import/export变量
  就是当导入的变量没有使用的时候，不会被打爆。

第三方模块

• rollup编译源码中的模块只支持esmodule。要支持commonjs需要插件。比如lodash内部是commonjs，不可以通过import引入，需要插件支持。
• rollup也不支持加载node_module里面的模块，都需要插件支持。
  
  
  
  
  这样才能正常打包。

配合cdn引入

支持css

import postcss from ‘rollup-plugin-postcss’
在rollup中，基本都是插件。

很像webpack的css-loader，都是生成style标签插入head中。

本地服务器

import serve from ‘rollup-plugin-serve’，也是一个插件。

可以理解成打包后的代码在dist目录下，然后通过Http-server启动。

webpack vs rollup

• 都可以打包入口文件
• 都可以加载各种不同类型的文件
• webpack和rollup加载好模块之后，都会进行模块解析，转成语法树，分析Import等依赖，再递归处理依赖的模块。
• 都有输入和输出。
• 都有插件机制，可以通过插件修改打包的过程。webpack的插件是一个有apply方法的类。rollup的插件是对象。

不同：

• webpack加载别的类型的文件用的是loader，rollup用的是插件里面的transform钩子。
• webpack打包出来的是commonjs，体积大，模块是分开的。
• rollup打包出来的可以是很多种类型的，比如esmodule，体积小，模块代码会合并在一起。

rollup最大的优点：

简单，生成的文件很小，支持esmodule，强大的tree shaking能力。