Rollup - 开发UI库入门

本文示例如何基于Rollup和Vue编写一个HelloWorld的UI库

一、初始化项目

生成package.json

mkdir base-ui
cd base-ui
npm init

安装npm包

npm install --save-dev rollup rollup-plugin-vue vue vue-template-compiler 
npm install --save-dev rollup-plugin-babel @babel/core
npm install --save-dev rollup-plugin-node-resolve rollup-plugin-commonjs 
npm install --save-dev rollup-plugin-terser rollup-plugin-css-only clean-css

二、配置文件

增加rollup配置文件 rollup.config.js，支持umd es iiffe格式（分别用于node、es6、browser）

import commonjs from 'rollup-plugin-commonjs'
import resolve from 'rollup-plugin-node-resolve'
import babel from 'rollup-plugin-babel'
import vue from 'rollup-plugin-vue'
import { terser } from 'rollup-plugin-terser'
import css from 'rollup-plugin-css-only' // 提取css
import CleanCSS from 'clean-css'   // 压缩css
import { writeFileSync } from 'fs' // 写文件

module.exports = {
  input: 'src/index.js', // 入口
  output: [
{
    file: 'dist/base-ui.umd.js', // 打包文件名
    name: 'base-ui',
    format: 'umd', // 打包模块支持方案，可选 amd, cjs, es, iife, umd
  }, {
    file: 'dist/base-ui.es.js',
    format: 'es'
  }, {
    name: 'base-ui',
    file: 'dist/base-ui.min.js',
    format: 'iife'
  }],
  plugins: [
    // css({output: 'dist/base-ui.css'}),
    css({ output(style) {
      // 压缩 css 写入 dist/base-ui.css
      writeFileSync('dist/base-ui.css', new CleanCSS().minify(style).styles)
    } }),
    vue({
      // css: false 将