你是怎样的rollup-- rollup打包typescript编写的类库

起因

最近大火的vite开发运行时直接使用esmodule和devServer但是真正执行打包时使用的rollup来进行打包的。

rollup配置

照例直接po出rollup配置,并在配置后面注释一下配置的关键点，通过配置文件就可以直观的看到所有的配置，这也是相比webpack来说配置简单的优势

// rollup.config.js
// 1. 这里使用到的安装包均需要安装成开发依赖
// 例如下面用到需要如下安装
// yarn add -D rollup rollup-plugin-babel @rollup/plugin-typescript @rollup/plugin-node-resolve

// 导出defineConfig方法可以让编辑器（VSCode）智能提示所有的rollup的配置项，很方便
import { defineConfig } from 'rollup';
// 这里是babel的插件，用来处理es的转换，当然会用一个.babelrc配置文件，下面也会简单列出来
import babel from 'rollup-plugin-babel';
// rollup处理typescript的插件
import typescript from '@rollup/plugin-typescript';
// resolve将我们编写的源码与依赖的第三方库进行在之前的文章里面也有提到但是这里使用的@rollup/plugin-node-resolve
import resolve from '@rollup/plugin-node-resolve';
// 解决rollup.js无法识别CommonJS模块，这里使用的是@rollup/plugin-commonjs并不是之前提到的rollup-plugin-commonjs
import commonjs from '@rollup/plugin-commonjs';
// 引入package.json
import pkg from './package.json';

// 拿到package.json的name属性来动态设置打包名称
const libName = pkg.name;
export default defineConfig({
  input: 'src/index.ts',
  output: [
    {
      file: `dist/${libName}.cjs.js`,
      // commonjs格式
      format: 'cjs',
    },
    {
      file: `dist/${libName}.es.js`,
      // es module
      format: 'es',
    },
    {
      file: `dist/${libName}.umd.js`,
      // 通用格式可以用于node和browser等多个场景
      format: 'umd',
      // 外部引入的模块需要显式告知使用的三方模块的命名，结合下面的external使用
      globals: {
        '@antv/g6': 'G6',
      },
      // 注意如果是umd格式的bundle的话name属性是必须的，这时可以在script标签引入后window下会挂载该属性的变量来使用你的类库方法
      name: libName,
    },
  ],
  // 解释同globals配置，这个配置的意思是我简单处理把外部依赖不打包进bundle中，而是前置引入或者作为依赖安装使用
  external: ['@antv/g6'],
  plugins: [
    babel(),
    typescript({
      sourceMap: false,
    }),
    resolve(),
  ],
});

babel配置

上面提到rollup一般配合babel一起来对代码进行转换和打包，使用到了rollup的babel插件，同时需要一个.babelrc文件，配置如下:

// .babelrc
// 这里就不过多解释了，主要是modules:false这个配置项
// 配置成false
// 否则 Babel 会在 Rollup 有机会做处理之前，将我们的模块转成 CommonJS ，导致 Rollup 的一些处理失败。
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": "3.6.4",
        "modules": false
      },
      "@babel/preset-typescript"
    ]
  ],
  "exclude": "node_modules/**"
}

package.json打包

这样在package.json中需要增加build命令和main，module两个字段，main是直接引入类库时使用的文件，module是es模块的入口文件

// rimraf需要单独安装用来打包前删除dist文件夹
// yarn add -D rimraf
{
  "main": "dist/sparrow.umd.js",
  "module": "dist/sparrow.es5.js",
  "scripts": {
    "build": "rimraf -rf ./dist && rollup --config"
  }
}

这样通过配置build命令就可以在dist目录下生成三种不同类型的模块

注意事项

• 上面的配置文件rollup.config.js, .babelrc, package.json均在项目根目录下

• 首先rollup的plugin版本优先选择rollup官方维护的版本即@rollup/*开头的，目前一些教程上甚至官方文档上都还是老的版本使用和配置，当然安装到旧版本插件时通常会用提示

• 当然这个配置是只适应我当前的配置，随着类库项目复杂后会有一些问题，遇到问题后先看控制台报错信息，其次去官方文档和仓库和一些技术网站寻求答案，也可以在评论区一起交流。

• 实际rollup会通过入口文件打包成一个js文件，这很适合在浏览器端引入使用，当然也可以配置切割成不同的模块（这些能暂时没有涉及到并没有过多研究）

参考