Skip to content
This repository has been archived by the owner on Aug 7, 2024. It is now read-only.

rollup-build-components/icon-select-vue2.x

Repository files navigation

用 Rollup 打包 Vue2.x UI 组件

IconSelect 组件是基于 Vue2.x Ant-Design-Vue 的 Icon 和 Select 组件组合封装
作为 Rollup 打包 Vue2.x UI 组件的范例,后续仅维护 Rollup Build Configure,不建议在生产环境中使用



Rollup 打包所涉及的处理

  1. Rollup 打包 Vue2.x 组件 - 所需依赖
  2. Rollup 打包 Vue2.x 组件 - 插件选项
  3. Rollup 打包 Vue2.x 组件 - 脚本配置
  4. 如何下载使用 IconSelect 组件?


1. Rollup 打包 Vue2.x 组件 - 所需依赖 (详见 package.json)

  • @rollup/plugin-alias

    • 用途: rollup 路径别名配置

  • @rollup/plugin-babel

    • 用途: rollup babel plugin

    • 配置: babel.config.js

        module.exports = {
          presets: [
            '@vue/babel-preset-jsx'
          ]
        }
    • 依赖:

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

  • @rollup/plugin-node-resolve

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

  • rollup-plugin-vue

    • 用途: 解析 Vue SFC (Single File Component)
    • 版本: Vue2.x时, version = ^5.1.9
    • 依赖:
      • vue version = ^2.7.14
      • less version = ^3.0.4
      • less-loader version = ^5.0.0
      • vue-template-compiler version = ^2.7.14

  • rollup-plugin-postcss

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


2. Rollup 打包 Vue2.x 组件 - 插件选项

  const { defineConfig } = require('rollup')
  const { nodeResolve } = require('@rollup/plugin-node-resolve')
  const postcss = require('rollup-plugin-postcss')
  const babel = require('@rollup/plugin-babel')
  const alias = require('@rollup/plugin-alias')
  const vue = require('rollup-plugin-vue')
  const path = require('path')

  /**
   * Rollup Configuration, 建议使用 defineConfig 以支持TS识别
   */
  module.exports = defineConfig([
    {
      input: 'src/index.vue',
      output: [
        {
          // import 'xxx'
          dir: 'dist',
          format: 'es',
          entryFileNames: chunk => `[name].mjs`
        },
        {
          // require('xxx')
          dir: 'dist',
          format: 'cjs',
          exports: 'named',
          entryFileNames: chunk => `[name].cjs`
        }
      ],
      plugins: [
        nodeResolve(),
        alias({
          entries: [{
            find: '@',
            replacement: path.resolve(__dirname, './src')
          }]
        }),
        vue(),
        postcss(),
        babel({                       // 指定 babel 处理文件类型
          babelHelpers: 'bundled',    // 如果 vue 存在 jsx 语法,
          extensions: ['.js', '.vue'] // 则会从 babel.config.js, 调用 @vue/babel-preset-jsx 处理
        })
      ],

      // 排除不需要混入代码中的第三方依赖
      external: [
        /^vue(\/.+|$)/, // 也可以字符串 'vue'
        /^ant-design-vue(\/.+|$)/ // 也可以字符串 'ant-design-vue'
      ]
    }
  ])


3. Rollup 打包 Vue2.x 组件 - 脚本配置

  {
    "scripts": {
      "build": "shx rm -rf dist && rollup -c"
    }
  }


4. 如何下载使用 IconSelect 组件?

  • 安装
  yarn add @rollup-build-components/icon-select-vue2.x

  pnpm add @rollup-build-components/icon-select-vue2.x
  • 使用
  <template>
    <section class="section-container">
      <icon-select v-model="value"/>
    </section>
  </template>
  import IconSelect from '@rollup-build-components/icon-select-vue2.x'

  export default {
    name: 'Index',
    components: {
      IconSelect
    },
    data () {
      return {
        value: 'down'
      }
    }
  }


许可证

MIT

Releases

No releases published

Packages

No packages published