Rollup 打包 Vue组件库

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

Rollup 打包

本章的目标是将基于storybook框架的组件项目进行发布。

在把项目发布出去之前，我们还需要将项目进行打包处理，这里我们选择使用 Rollup 打包。

为什么选择使用 Rollup 打包

• Rollup 是一个模块打包器和webpack类似，很多开源的库、框架都使用Rollup打包
• Rollup 支持 Tree-shaking，开源静态分析代码中的 import，排除不被使用的代码
  • webpack虽然也支持，但是需要我们手动进行配置
• 打包的结果比 webpack要小
• 开发框架/ 组件库的时候使用 Rollup 更合适

参考文章：Rollup打包工具的使用（超详细，超基础，附代码截图超简单）

安装依赖

因为我们需要使用Rollup进行打包，所以我们需要将他的依赖全部进行安装

• Rollup

• rollup-plugin-terser: 对代码进行压缩

• [email protected]：把单文件组件编译成js代码。

  • 为什么要指定版本呢？因为他最新的组件是 针对Vue3的，而我目前的代码是Vue2的..

• vue-template-compiler：配合rollup-plugin-vue工作的创建

yarn add rollup rollup-plugin-terser rollup-plugin-vue@5.1.9 vue-template-compiler -D -W
复制代码

Rollup配置文件

安装完毕依赖之后，我们需要配置Rollup的配置文件，这里我们先展示对 button 的打包，之后在进行全部的组件的打包演示

button 的打包

首先我们在 button文件夹下创建rollup.config.js文件

文件结构

配置内容

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


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

module.exports = [
  {
    input: 'index.js',
    output: [
      {
        file: 'dist/index.js',
        format: 'es'
      }
    ],
    plugins: [
      vue({
        // Dynamically inject css as a <style> tag
        css: true, 
        // Explicitly convert template to render function
        compileTemplate: true
      }),
      terser()
    ]
  }
]
复制代码

这个配置文件和webpack也十分的类似，我们分别配置了：

• 入口（input）
• 出口（output）
• 插件（plugins）

打包

然后我们对 button文件夹下的 package.json文件进行修改

"scripts": {
    // 添加
    "build": "rollup -c",
  },
复制代码

运行该脚本 到这，我们的脚本就运行完毕了，但是！ 问题来了，我们有很多的文件夹很多的组件，不能像button一样一个一个的进行打包，那我们该如何进行呢？？？

打包所有的组件

这里我们需要新增几个依赖文件：

• plugin-json：可以让rollup加载 json文件，配置文件中我们会用到
• rollup-plugin-postcss：(rollup-plugin-postcss 不支持less imports的两个解决方案)[juejin.cn/post/692083…]
• plugin-node-resolve： 把依赖的第三方包打包进来

yarn add @rollup/plugin-json rollup-plugin-postcss @rollup/plugin-node-resolve -D -W
复制代码

配置文件

项目根目录创建 rollup.config.js

import fs from 'fs'
import path from 'path'
import json from '@rollup/plugin-json'
import vue from 'rollup-plugin-vue'
import postcss from 'rollup-plugin-postcss'
import { terser } from 'rollup-plugin-terser'
import { nodeResolve } from '@rollup/plugin-node-resolve'

const isDev = process.env.NODE_ENV !== 'production'

// 公共插件配置
const plugins = [
  vue({
    // Dynamically inject css as a <style> tag
    css: true,
    // Explicitly convert template to render function
    compileTemplate: true
  }),
  json(),
  nodeResolve(),
  postcss({
    // 把 css 插入到 style 中
    // inject: true,
    // 把 css 放到和js同一目录
    extract: true
  })
]

// 如果不是开发环境，开启压缩
isDev || plugins.push(terser())

// packages 文件夹路径
const root = path.resolve(__dirname, 'packages')

module.exports = fs.readdirSync(root)
  // 过滤，只保留文件夹
  .filter(item => fs.statSync(path.resolve(root, item)).isDirectory())
  // 为每一个文件夹创建对应的配置
  .map(item => {
    const pkg = require(path.resolve(root, item, 'package.json'))
    return {
      input: path.resolve(root, item, 'index.js'),
      output: [
        {
          exports: 'auto',
          file: path.resolve(root, item, pkg.main),
          format: 'cjs'
        },
        {
          exports: 'auto',
          file: path.join(root, item, pkg.module),
          format: 'es'
        },
      ],
      plugins: plugins
    }
  })
复制代码

根目录的 package.json 中配置 scripts

"build": "rollup -c"
复制代码

在每一个包中设置 package.json 中的 main 和 module 字段

"main": "dist/cjs/index.js",
"module": "dist/es/index.js"
复制代码

到这里，我们我们的配置就结束了