ESM打包工具-Rollup

serendipity_tang
3,301 阅读5分钟

小巧，仅仅是一款ESM打包器，不支持类似HMR之类的高级特性，rollup是为了提供一个高效的ESM打包器，默认只能处理ESM模块，充分利用ESM的各项特性，构建结构比较扁平，性能比较出众的类库

快速上手

  1. npm i rollup --dev下载rollup依赖，
  2. 在npm scripts中配置打包命令行"build": "rollup ./src/index.js --format iife --file dist/bundle.js"

./src/index.js打包的入口
--format iife 以什么样的格式输出，以自调用函数的形式输出
--file dist/bundle.js 输出文件目录

  1. 默认会开启tree shaking优化输出结果，这个概念最早也是在rollup中产生的

Rollup配置文件

项目根目录下新建rollup.config.js,文件运行在node环境当中，但是rollup会额外处理这个文件，所以我们可以使用ESM

在npm scripts中配置打包命令行"build": "rollup --config"表示使用配置文件
也可以配置"build": "rollup --config --rollup.dev.js"在后面加上配置文件名称，来使用不同的配置文件为各个环境打包

rollup插件使用

对于一些额外的打包需求，rollup支持使用插件的方式扩展，插件是rollup唯一的扩展方式， 不像webpack中划分了loader,plugin,minimizer三种扩展方式

这里我们使用的是一个在代码中导入json文件的插件rollup-plugin-json

  1. npm i rollup-plugin-json --dev
  2. 在配置文件中导入，并在plugins数组中使用，这里这个插件是将调用结果放到数组中

然后再js文件中通过import的方式导入，json文件中的每个属性都可以作为一个单独的导出成员导出

打包过后，package.json中使用的到的属性被打包进来了，而没有用到的属性，被tree shaking掉了

rollup中代码对于npm模块引入的使用

rollup默认在业务代码中只能按照文件路径的形式加载本地的模块，不能像webpack那样直接通过文件名称直接引入的方法加载node_modules中的第三方模块

通过使用这个插件rollup-plugin-node-resolve,我们就可以在日常的开发代码中，正常的通过import模块名的方式引入第三方模块了，同时在打包的过程中，引入并被使用的第三方模块才能被正常的打包进最后的bundle.js中

使用方法：npm i rollup-plugin-node-resolve --dev

rollup加载commonjs模块

rollup被设计的只处理esm模块打包，所以代码中导入commonjs模块，默认是不被支持的，由于目前大量的第三方库还是使用的commonjs，所以官方给出了一个插件兼容rollup-plugin-commonjs

npm i rollup-plugin-commonjs --dev ，配置文件配置如下

这样我们在代码中就可以直接导入commonjs模块了

node 只是把module.exports整体当做export default 打包工具除了把module.export整体当做export default，还把module.export又当做export输出，这样做是为了更加简洁

// module.js
module.export.a = 1

// index.js webpack rollup
import * as a from './module'
console.log(a) // { a: 1, default: { a:1 } }

// index.mjs node
import * as a from './module'
console.log(a) // { default: { a:1 } }

rollup的代码拆分

umd 和 iife（自执行函数）不支持代码拆分，自执行函数会把所有模块都放在一个函数中，并不会有引导代码，无法实现代码拆分

使用动态导入的方式实现的，并且需要使用AMD或者commonjs的标准支持代码拆分

动态导入

rollup的多入口打包

多入口打包内部自动提取公共模块，内部会使用代码拆分，就不能使用iife(自调用函数)，这里使用的是amd，然后对应amd格式的输出文件，我们不能直接引用到页面上，必须要通过实现amd标准的库加载，可以使用requirejs库

rollup和webpack选哪个

rollup优点

  1. 输出结果更加扁平，执行效率更高
  2. 自动移除未引用代码 tree shaking
  3. 打包结果依然可读 缺点
  4. 加载非EMS的第三方模块比较复杂 需要配置插件
  5. 模块最终都被打包到一个函数中，无法实现HMR的开发体验
  6. 浏览器环境中，代码拆分功能依赖AMD库，因为代码拆分必须要使用amd之类的输出格式

所以我们开发应用程序的时候

  1. 需要引入大量三方模块
  2. 需要HMR提升开发体验
  3. 应用变大之后需要分包 这些rollup都有所欠缺，所以要使用webpack

而当开发第三方库的时候，会很少使用第三方库，rollup的有点也很有必要，所以选择rollup

webpack大而全，rollup小而美

Parcel

提供了近乎傻瓜式的使用体验，只需要了解提供的几个简单命令，就可以构建应用程序了

npm i parcel-bundler --dev这个包叫parcel-bundler

parcel支持以任意类型的文件作为打包入口，官方推荐使用html作为文件的打包入口，理由html是应用运行在浏览器端的入口

parcel命令不仅帮我们打包，同时还帮我们开启了一个开发服务器

  1. 同样支持模块热替换
  2. 支持自动安装依赖，只需要直接导入就好了
  3. 加载其他类型的资源模块，也是零配置的
  4. 支持动态导入 生产模式打包 npx parcel build src/index.html使用parcel工具提供的build命令，就可以以生产模式打包了 相同体量打包，parcel比webpack快，parcel使用的是多进程工作，webpack中可以使用一个叫happypack的插件来实现这一点

parcel和webpack， webapck有更好的生态，这两年webpack越来越好用

avatar
文章
阅读
粉丝