跳到主要内容

rollup

1、js模块打包器

2、Rollup就是专门针对类库进行打包，它的优点是小巧而专注

3、Rollup打包出来的体积都比webpack略小一些

rollup特点​

  • rollup最大的亮点就是Tree-shaking，即可以静态分析代码中的 import，并排除任何未使用的代码。这允许我们架构于现有工具和模块之上，而不会增加额外的依赖或使项目的大小膨胀。如果用webpack做，虽然可以实现tree-shaking，但是需要自己配置并且打包出来的代码非常臃肿，所以对于库文件和UI组件，rollup更加适合

Rollup 与 webpack的区别​

  • 对于应用使用 webpack，对于类库使用 Rollup

如果你需要代码拆分(Code Splitting)，或者你有很多静态资源需要处理，再或者你构建的项目需要引入很多CommonJS模块的依赖，那么 webpack 是个很不错的选择。

如果您的代码库是基于 ES2015 模块的，而且希望你写的代码能够被其他人直接使用，你需要的打包工具可能是 Rollup 。

webpack和rollup对比：

  • 打包方式：Webpack 使用模块依赖图的概念来确定如何处理模块之间的依赖关系。相比之下，Rollup 使用静态分析来查找并打包模块之间的依赖关系，这使得它更加适合用于构建小型库或者插件。

rollup支持热更新吗？​

Rollup 可以通过使用插件实现热更新功能。具体来说，你可以使用 rollup-plugin-serve 插件来实现热更新

external​

  • 指出应将哪些模块视为外部模块，外部模块不会被打包
  • external 接受一个模块名称的数组或一个接受模块名称的函数，如果它被视为外部引用（externals）则返回 true

常用插件​

  • @rollup/plugin-typescript

    • 编译的ts

  • @rollup/plugin-babel

    • rollup 的模块机制是 ES6 Modules，但并不会对 es6 其他的语法进行编译。因此如果要使用 es6 的语法进行开发，还需要使用 babel 来帮助我们将代码编译成 es5

  • @rollup/plugin-node-resolve

    • 用来解析依赖的模块路径。

  • @rollup/plugin-commonjs

    • 是将 commonjs 模块转成 es6 模块

  • rollup-plugin-esbuild

    esbuild 是最快的 TS/ESNext 到 ES6 编译器和压缩器之一，此插件为您替换了 rollup-plugin-typescript2、@rollup/plugin-typescript 和 rollup-plugin-terser。