如何用 Rollup 打包 Vue3.x UI 组件

系列

1. 如何用 Rollup 打包 JavaScript / TypeScript (已完成)
2. 如何用 Rollup 打包 Vue2.x UI 组件 (上一章)
3. 如何用 Rollup 打包 Vue3.x UI 组件 (本章节)
4. 如何用 Rollup 打包 React UI 组件 (下一章)

前言

与上章节一样以 IconSelect 组件作为实战范例，分享 Rollup 打包 Vue3.x Component 所需的依赖、配置及脚本。

简介

本章节使用 @ant-design/icons-vue@^6.1.0 - Icon 和 ant-design-vue@^3.2.15 - Select 组件封装成 IconSelect 新组件作为实战范例进行讲解。另本章节尾附有相关链接～

• 源码 icons.ts
• 源码 index.vue

Rollup 打包 Vue3.x 所需依赖 (详见 package.json)

• @rollup/plugin-alias

  • 用途: rollup 路径别名配置

• @rollup/plugin-node-resolve

  • 用途: 用于解析 node_modules 中第三方模块

• @rollup/plugin-commonjs

  • 用途: 用于将CommonJS模块转换为ES6，以便 Rollup 解析处理

• @rollup/plugin-babel

  • 用途: rollup babel plugin

  • 配置: babel.config.js

      module.exports = {
        plugins: [
          '@vue/babel-plugin-jsx'
        ]
      }
    

  • 依赖:

    • @babel/core babel 核心
    • @vue/babel-plugin-jsx babel 处理 Vue3.x jsx 语法
    • @vue/babel-helper-vue-jsx-merge-props babel 处理 Vue jsx props

• rollup-plugin-vue

  • 用途: 解析 Vue SFC (Single File Component)
  • 版本: Vue3.x时, version = 6.0.0
  • 依赖:
    • vue version >= 3.2.0
    • less version >= 4.1.3
    • vue-template-compiler version >= 3.2.0

• rollup-plugin-postcss

  • 用途: 用于处理 css 样式, 包括 Vue 单文件中 <style> 样式

• rollup-plugin-typescript2

  • 用途: 用于处理 .vue 及 .ts文件中 ts 语法的解析
  • 问题:
    • 在 rollup 处理中为什么不使用 @rollup/plugin-typescript 呢?
    • 因为在解析 .vue 文件中 ts 语法存在问题， 查看 Issue

• @rollup/plugin-typescript

  • 用途: 用于解析 rollup.config.ts 配置文件
  • 使用: rollup --config rollup.config.ts --configPlugin typescript

Rollup 打包 Vue3.x 组件 插件选项

• 创建 rollup.config.ts 配置文件

  
    import { defineConfig } from 'rollup'
    import { nodeResolve } from '@rollup/plugin-node-resolve'
    import typescript from 'rollup-plugin-typescript2'
    import commonjs from '@rollup/plugin-commonjs'
    import postcss from 'rollup-plugin-postcss'
    import babel from '@rollup/plugin-babel'
    import alias from '@rollup/plugin-alias'
    import vue from 'rollup-plugin-vue'
  
    /**
     * Rollup Configuration
     */
    export default defineConfig([
      {
        input: 'src/index.vue',
        output: [
          {
            dir: 'dist',
            format: 'es',
            entryFileNames: chunk => `[name].mjs`
          },
          {
            dir: 'dist',
            format: 'cjs',
            exports: 'named',
            entryFileNames: chunk => `[name].cjs`
          }
        ],
  
        plugins: [
          alias({
            entries: [{
              find: '@',
              replacement: new URL('./src', import.meta.url).pathname
            }]
          }),
          nodeResolve(),
          commonjs(),
          typescript({
             check: false  // 需使用 rollup-plugin-typescript2
          }),              // 而不是 @rollup/plugin-typescript
          vue(),
          postcss(),
          babel({                       // 指定 babel 处理文件类型
            babelHelpers: 'bundled',    // 如果 vue 存在 jsx 语法，
            extensions: ['.js', '.vue'] // 则会从 babel.config.js, 调用 @vue/babel-plugin-jsx 处理
          })
        ],
  
        // 排除不需要混入代码中的第三方依赖
        external: [
          /^vue(\/.+|$)/,
          /^ant-design-vue(\/.+|$)/,
          /^@ant-design\/icons-vue/
        ]
      }
    ])
  

Rollup 打包 Vue3.x 组件 Typescript 配置

• 创建 tsconfig.json 配置文件，需生成声明文件，则需要增加 declaration: true

  {
    "compilerOptions": {
      "baseUrl": "./",
      "outDir": "dist",
      "target": "ESNext",
      "module": "ESNext",
      "jsx": "preserve",
      "moduleResolution": "Node",
      "useDefineForClassFields": true,
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "sourceMap": true,
      "resolveJsonModule": true,
      "isolatedModules": true,
      "esModuleInterop": true,
      "skipLibCheck": true,
      "declaration": true,
      "lib": [
        "ESNext",
        "DOM"
      ],
      "paths": {
        "@/*": [
          "src/*"
        ]
      }
    },
    "include": [
      "src/**/*.ts",
      "src/**/*.d.ts",
      "src/**/*.tsx",
      "src/**/*.vue"
    ]
  }

Rollup 打包 Vue3.x 组件 Script 脚本配置

• 在 package.json 文件中

    {
      "scripts": {
        "build": "shx rm -rf dist && rollup --config rollup.config.ts --configPlugin typescript"
      }
    }
  

如何下载使用 IconSelect 组件?

• 发布

    {
      "name": "@rollup-build-components/icon-select-vue3.x",
      "publishConfig": {
        "access": "public",
        "registry": "https://registry.npmjs.org/"
      }
    }
  

    pnpm publish
  

• 安装

  
    yarn add @rollup-build-components/icon-select-vue3.x
  
    pnpm add @rollup-build-components/icon-select-vue3.x
  
  

• 使用

    <template>
      <section class="section-container">
        <icon-select v-model="value"/>
      </section>
    </template>
  

    <script setup lang="ts">
      import { ref, watch } from 'vue'
      import IconSelect from '@rollup-build-components/icon-select-vue3.x'
      const value = ref('fast-forward')
      watch(value, v => console.log(v))
    </script>
  

项目 icon-select-vue3.x

• npm package
• github