Rollup 打包项目实战详解：打造高效、定制化前端工作流

前端

2023-11-02 17:32:10

利用 Rollup 提升你的前端开发工作流

在前端开发的广阔世界中，Rollup 已然成为一个不可或缺的工具。它以其强大的模块化、灵活的插件系统和开箱即用的简洁性脱颖而出。本文将指导你踏上 Rollup 的实践之旅，助你打造一个高效、定制化的前端工作流。

Rollup 的优势

与其他打包工具相比，Rollup 拥有以下独一无二的优势：

模块化优先： Rollup 围绕模块化展开设计，便于维护和扩展大型项目。
零配置： Rollup 开箱即用，无需繁琐的配置即可启动打包流程。
高性能： Rollup 采用 AST（抽象语法树）分析，使打包速度大幅提升。

实践 Rollup 打包

准备好拥抱 Rollup 的魅力了吗？以下步骤将带你踏上实践之旅：

1. 安装 Rollup 和插件

首先，你需要安装 Rollup 及其必备插件：

npm install rollup --save-dev
npm install rollup-plugin-commonjs --save-dev
npm install rollup-plugin-node-resolve --save-dev

2. 创建 Rollup 配置文件

在项目根目录下创建名为 rollup.config.js 的文件，并添加以下配置：

import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    commonjs(),
    nodeResolve()
  ]
};

3. 自动声明外部依赖

Rollup 会自动将依赖标记为外部依赖，但你也可以手动进行声明：

import commonjs from 'rollup-plugin-commonjs';

export default {
  ...
  plugins: [
    commonjs({
      extensions: ['.js'],
      include: ['node_modules/**'],
      exclude: ['node_modules/some-excluded-module/**']
    })
  ]
};

4. 处理外部 npm 依赖

通过指定外部依赖名称，你可以将它们排除在打包之外：

import nodeResolve from 'rollup-plugin-node-resolve';

export default {
  ...
  external: ['some-external-dependency'],
  plugins: [
    nodeResolve()
  ]
};

5. 构建项目

最后，运行以下命令构建项目：