Skip to main content

Rollup

Rollup 是一个现代 JavaScript 模块打包工具，它的核心特点是对 ES6 模块的支持和高效的 Tree-shaking（摇树优化） 机制。 以下是 Rollup 的执行原理的简要概述：

入口分析​

  • Rollup 以一个或多个入口文件开始，这些文件通常是项目中的主 JavaScript 文件。
  • Rollup 分析这些入口文件，解析其中的 import 语句，构建起依赖关系图。

模块解析​

  • 对于每一个 import 语句，Rollup 解析相应的模块，并将它们添加到依赖图中。
  • Rollup 处理模块路径，可以处理相对路径或通过配置解析的别名。

模块加载​

  • Rollup 加载依赖图中的所有模块。它读取文件内容，并将其转换为 AST（抽象语法树） 。
  • 在这个阶段，Rollup 还会应用插件，这些插件可以转换模块的内容（例如，编译 TypeScript 或处理 JSON 文件）。

Tree-shaking​

  • Rollup 对 AST 进行 Tree-shaking ，移除那些被引入但未实际使用的代码。
  • 这一步是 Rollup 优化包大小的关键，特别是对于大型库或应用程序。
npm
npm i -D rollup rollup-plugin-terser @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-delete @rollup/plugin-json
yarn
yarn add -D rollup rollup-plugin-terser @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-delete @rollup/plugin-json
pnpm
pnpm add -D rollup rollup-plugin-terser @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-delete @rollup/plugin-json
package.json
{
  "scripts": {
    "build": "rollup -c"
  }
}
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import json from "@rollup/plugin-json";
import del from 'rollup-plugin-delete';
import livereload from 'rollup-plugin-livereload';//热更新
import postcss from 'rollup-plugin-postcss';
import image from '@rollup/plugin-image';
import serve from 'rollup-plugin-serve';//本地服务
import babel from 'rollup-plugin-babel';//将代码转译为浏览器或者node支持的语法，

const globals = {
    jquery: '$',
    react: 'React',
    vue: 'Vue',
    lodash: '_' // 告诉Rollup lodash对应的全局变量是'_'
}
const input = 'src/index.js'

export default {
    input, // 入口文件
    output: [
        {
            file: 'dist/bundle.cjs.js',
            format: 'cjs',
            globals,
        },
        {
            file: 'dist/bundle.esm.js',
            format: 'es',
            globals,
        },
        {
            file: 'dist/bundle.amd.js',
            format: 'amd',
            globals,

        },
        {
            file: 'dist/bundle.umd.js',
            format: 'umd',
            globals,
            name: 'MyLibrary',
        }
    ],
    plugins: [
        postcss({
          extensions: [ '.css' ],
        }),
        image(),
        del({ targets: 'dist/*' }), // 删除dist目录下的所有文件
        livereload({watch:'dist'}), // 热更新 默认监听根文件夹
        resolve(),      // 解析node_modules中的模块
        babel({
            exclude: 'node_modules/**' // 只转译我们的源代码
        }),
        commonjs(),     // 转换CommonJS模块为ES6
        terser(),    // 压缩JavaScript代码
        json(),      // <---- put after commonjs
        serve({
          open: true, // 自动打开页面
          port: 8000, 
          openPage: '/src/test.html', // 打开的页面
          contentBase: ''
        })
    ],
    external: ['lodash', 'axios', 'vue', 'react'] // 不将第三方库打进模块
};
Rollup 优缺点

优点​

  1. 高效的打包算法：Rollup 使用的 树摇 （Tree-shaking） 算法可以有效地移除未使用的代码，生成更小的 bundle。
  2. 简洁的输出：Rollup 通常生成更简洁、更易于调试的代码。它保持了源代码的结构，使得打包后的代码更接近原始代码。
  3. ES模块支持：Rollup 从一开始就被设计为支持 ES6 模块，能够更好地处理模块间的依赖关系。
  4. 快速的加载时间：由于生成更小的代码，使用 Rollup 打包的应用程序和库的加载时间更短。
  5. 插件丰富：Rollup 拥有一个活跃的社区，提供了丰富的插件，支持多种用例和功能。
  6. 简洁的配置：Rollup 的配置文件通常更简单，易于理解和维护。
  7. 适合库和工具：Rollup 特别适合用于构建 JavaScript 库和工具，因为它生成的代码往往更适合分发和使用。

缺点​

  1. 不适合大型应用：对于大型的、复杂的应用程序，Rollup 可能不是最佳选择。 Webpack 或 Parcel 在这方面表现更佳， 因为它们提供了更先进的代码拆分和动态加载功能。
  2. 加载非JS资源的能力有限：尽管有插件可以导入其他类型的文件，但 Rollup 在处理非 JavaScript 资源方面不如 Webpack 灵活。
  3. 热模块替换 （HMR） 支持有限：Rollup 对 HMR 的支持不如 Webpack ，这可能对开发体验有所影响。
  4. 学习资源较少：相比 Webpack ，Rollup 的学习资源和社区支持相对较少。
  5. 某些插件质量参差不齐：虽然插件众多，但质量和维护程度不一，有时可能需要额外的调研和测试。

总结​

Rollup 是一个优秀的模块打包器，仅适合使用打包类库，特别适合于构建需要高效、紧凑代码的 JavaScript 库和小型应用。 然而，对于需要复杂拆分和加载策略的大型应用，可能需要考虑其他工具。