使用Rollup打包Vue組件庫

在之前的一篇文章中提到了封裝Vue組件庫的方法，包括webpackage和vue-cli的方法。

但是這兩個方法都有缺點：

• 無法打包ES模塊
• 無法生成Typescript類型聲明文件
• 生成包體積大

所以我決定重新研究下用rollup開發和打包vue組件庫（Vue@3，Typescript，SCSS）的方法。

Rollup相比webpack更擅長打包庫，它的配置也相對簡單。我們先直接奉上配置文件：

import Path from 'path'
import { getBabelOutputPlugin } from '@rollup/plugin-babel'
import RollupPluginNodeResolve from '@rollup/plugin-node-resolve'
import RollupPluginCommonjs from '@rollup/plugin-commonjs'
import RollupPluginTypescript2 from 'rollup-plugin-typescript2'
import RollupPluginVue from 'rollup-plugin-vue'
import RollupPluginPostcss from 'rollup-plugin-postcss'
import RollupPluginDelete from 'rollup-plugin-delete'
import Autoprefixer from 'autoprefixer'
import PackageJson from './package.json'

export default [
  {
    input: 'src/index.ts',
    external: Object.keys(PackageJson.dependencies || {}),
    plugins: [
      RollupPluginDelete({
        targets: Path.resolve(__dirname, 'dist/*'),
        watch: true
      }),
      RollupPluginVue({
        css: false
      }),
      RollupPluginPostcss({ extract: true, plugins: [Autoprefixer] }),
      RollupPluginTypescript2(),
      RollupPluginNodeResolve(),
      RollupPluginCommonjs(),
      getBabelOutputPlugin({ configFile: Path.resolve(__dirname, 'babel.config.js') })
    ],
    output: {
      file: PackageJson.module,
      format: 'esm',
      sourcemap: true
    }
  }
]

處理文件

不同格式的文件需要不同的rollup插件處理：

• RollupPluginPostcss：處理scss和css文件
• RollupPluginTypescript2：處理ts文件和vue文件中的<script lang="ts">

抽取CSS

一個組件庫通常會把CSS代碼抽取到一個文件中，配置rollup-plugin-vue和rollup-plugin-postcss即可實現：

RollupPluginVue({ css: false })
RollupPluginPostcss({ extract: true, plugins: [Autoprefixer] })

babel

由於ts文件會被rollup-plugin-typescript2處理，我們需要把處理後的代碼再由babel處理，這裏使用@rollup/plugin-babel提供的getBabelOutputPlugin方法，而不是直接使用這個插件：

RollupPluginCommonjs()
getBabelOutputPlugin({ configFile: Path.resolve(__dirname, 'babel.config.js') })

需要注意的是，getBabelOutputPlugin依賴@rollup/plugin-commonjs插件且需要放在其後。

babel的配置按照常規即可，比如：

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        modules: false,
        useBuiltIns: 'usage',
        corejs: 3,
        targets: {
          browsers: ['> 1%', 'last 2 versions', 'not dead']
        }
      }
    ]
  ],
  plugins: [
    [
      '@babel/plugin-transform-runtime',
      {
        corejs: 3
      }
    ]
  ]
}

Typescript類型聲明（.d.ts）文件

Rollup官方的@rollup/plugin-typescript插件存在問題，即使在tsconfig.json中設置了"declaration": true也不會生成聲明文件，因此我們使用第三方開發的rollup-plugin-typescript2插件。

依賴

組件庫通常不包含常用的依賴（比如vue），設置external排除即可。

{
  external: Object.keys(PackageJson.dependencies || {})
}