rollup 配置

初始化

安装

npm install --global rollup

使用下面的命令初始化一个项目

mkdir rollup-test
cd rollup-test
npm init
git init

试一试使用 rollup 打包

创建一个 main.js 作为入口文件，写一些代码，例如：

const a = 'remons'
module.export = a;

执行命令

rollup main.js --file bundle.js --format cjs

当然，也可以指定其他模块打包方式

rollup main.js --file bundle.js --format umd --name=remons

配置文件

当然，在实际情况中，很少有人直接在命令行执行打包，通常的解决方案是进行配置

创建配置文件

根目录创建rollup.config.js 文件
package.json 配置命令

"scripts": {
  "build": "rollup -c"
},

export default {
  input: 'main.js',
  output: {
      file: 'cjs/index.js',
      format: 'cjs'
    }
};

执行命令

npm run build

打包完成

配置多出口

通常，我们需要打包多个模块化版本，此时，output 可以是一个数组

output: [
  {
    file: 'cjs/index.js',
    format: 'cjs'
  },
  {
    file: 'iife/index.js',
    format: 'iife',
    name: 'MethodsR'
  }
]

和 babel 一起使用

通常为了浏览器兼容，我们需要对代码进行转换操作

安装所需的依赖

npm i @rollup/plugin-babel @rollup/plugin-node-resolve --save-dev

配置 babel 规则

根目录新建 .babel.lrc

{
  "presets": ["@babel/env"]
  // 当然，也可以自行配置
}

安装 babel 所需核心库

npm i @babel/core @babel/preset-env --save-dev

配置中使用

import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';

export default {
  plugins: [resolve(), babel()]
};

继续执行 build 命令即可

配置压缩插件

通常发布的代码都是压缩编译后的，这里也进行配置
安装所需依赖

npm i rollup-plugin-terser --save-dev

配置中使用

import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/main.js',
  output: [
    {
      file: 'cjs/index.min.js',
      format: 'cjs',
      plugins: [terser()]
    }
  ],
  // 也可以使用下面的定义方式
  // plugins: [
  //   terser()
  // ]
};

支持 TS

安装所需依赖

npm i @rollup/plugin-typescript typescript tslib --save-dev

配置 tsconfig.json

{
  /* 配置其他规则 */
  "include": ["src/**/*", "rollup.config.ts"]
}

配置中使用

import typescript from '@rollup/plugin-typescript';

export default {
  plugins: [
    typescript({typescript: require("typescript")}),
  ]
}

附：完整版配置

import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';
import typescript from '@rollup/plugin-typescript';

/**
 * @type {import('rollup').RollupOptions}
 */
const config = {
  input: 'src/index.ts',
  output: [
    {
      file: 'dist/cjs/index.min.js',
      format: 'cjs'
    },
    {
      file: 'dist/iife/index.min.js',
      format: 'iife',
      name: 'FormatterData'
    },
    {
      file: 'dist/amd/index.min.js',
      format: 'amd'
    },
    {
      file: 'dist/esm/index.min.js',
      format: 'esm'
    },
    {
      file: 'dist/umd/index.min.js',
      format: 'umd',
      name: 'FormatterData'
    },
  ],
  plugins: [
    resolve(), 
    babel(), 
    typescript({typescript: require("typescript")}),
    terser()
  ]
};

export default config;