避免错误的roll-up模式，节省项目的生命周期

2024-01-18 17:15:27

正所谓万事开头难，配置rollup最难的一步也正是开头的第一步。但实际上，初始化一个项目只是第一步，而且不难。本文将从初始化开始，为您分步骤完成rollup的完整项目配置过程，避免您因为错误的配置而浪费时间，甚至让项目夭折。

首先，按照roll-up的文档，您需要创建rollup.config.js文件。

// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'umd'
  },
  plugins: [
    resolve(),
    babel({
      exclude: 'node_modules/**'
    })
  ]
};

接着，按照这个文件树创建相应的场景与角色（文件夹&文件）：

├── dist    # 打包文件目录
├── node_modules # npm 安装后的依赖包目录
├── package.json   # 项目包信息文件
├── rollup.config.js  # rollup 配置文件
├── src    # 源代码目录
│   ├── index.js # 源代码入口文件
│   └── other.js  # 其他源代码文件
└── test    # 测试目录
    ├── index.js  # 测试入口文件
    └── other.spec.js  # 其他测试文件

文件树中的其他文件可以按照实际情况进行调整。例如，如果您使用ES模块，则output.format可以设置为'es'。如果您使用CommonJS模块，则output.format可以设置为'cjs'。

如果您需要对代码进行压缩，可以使用rollup-plugin-terser插件。

// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'umd'
  },
  plugins: [
    resolve(),
    babel({
      exclude: 'node_modules/**'
    }),
    terser()
  ]
};