使用Vue3+Ts开发，rollup打包UI库全流程-五八三

一、前言

在日常开发中，会用到element、ant design等提供的ui组件，接下来跟随我的脚步，了解如何开发自己的ui库，并发布到npm供大家下载使用。

本文采用的是Vue3+Ts开发，rollup打包。

二、项目搭建

1. 项目初始化

使用vue-cli 脚手架搭建基础项目

vue create 项目名

根据提示配置vue版本、css pre-processor、eslint

2. 项目基础配置

在项目根目录下创建packages文件夹，用来存放组件，定义一个Button组件

//  packages/ljp-button/src/index.vue
<template>

  <button class="ljp-button">
    <slot></slot>
  </button>
</template>



<script lang="ts" setup></script>
<style lang="scss" scoped>
.ljp-button {
  background-color: red;
  display: flex;
}
</style>

提供统一注册组件入口

// packages/index.ts
import ljpButton from "./ljp-button";
import { App } from "vue";
const components = [
  ljpButton,
]



 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册
 const install = function (app: App) {
  // 遍历注册全局组件
  components.map((component:any) => app.use(component))
}


export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  ljpButton
}

全局注册

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import LjpUi from "../packages/index"
const app = createApp(App)

app.use(LjpUi).mount("#app");

项目中使用

// App.vue
<template>

  <ljp-button>1</ljp-button>
</template>

<script lang="ts" setup>
</script>

<style lang="scss">
</style>

三、使用Rollup打包

首先使用命令行，全局安装rollup

npm install --global rollup

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

/* eslint-disable */
const { name } = require('./package.json')
const typescript = require('rollup-plugin-typescript2')
const vuePlugin = require('rollup-plugin-vue')
const autoprefixer = require('autoprefixer');
const postcss = require('rollup-plugin-postcss'); 
// 如果依赖模块中存在 es 模块，需要使用 @rollup/plugin-node-resolve 插件进行转换
const nodeResolve = require('@rollup/plugin-node-resolve')
const images = require('@rollup/plugin-image'); // 打包图片
const copy = require("rollup-plugin-copy")


const file = (type) => `dist/${name}.${type}.js`


module.exports = { // 这里将 file 方法 和 name 导出
  file,
  name
}

const overrides = {
  compilerOptions: { declaration: true }, // 是否创建 typescript 声明文件
  exclude: [ // 排除项
    'node_modules',
    'src/App.vue',
    'src/main.ts'
  ]
}

module.exports = {
  input: './packages/index.ts',
  output: {
    name: 'ljp-ui-h5',
    file: file('common'),
    format: 'cjs' // 编译模式
  },
  plugins: [
    nodeResolve(), 
    typescript({ tsconfigOverride: overrides }), 
    vuePlugin(), 
    postcss({
      plugins: [autoprefixer()],
      extract: 'bundle.css' 
    }),
    images({ include: ['**/*.png', '**/*.jpg', '**/*.svg'] }),
    copy({
      targets: [
        {
          src: 'packages/assets/*',
          dest: 'dist/assets'
        }
      ]
    })
  ],
  external: ['vue'] // 依赖模块
}

命令行中运行 rollup -c，打包组件

四、发布到npm

1. 注册npm账号

npm 注册网址:www.npmjs.com/signup
记录用户名，密码，邮箱，后续发布的时候会用到

2. 发布到npm

准备工作：

将 package.json 中的 private 属性值改为 false
每次发版，需要更改version属性
修改main属性，用于指定下载的文件

// package.json
{
  "name": "ljp-ui-h5",
  "version": "0.1.7",
  "private": false,
  "files": [
    "dist/*",
    "src/*"
  ],
  "main": "./dist/ljp-ui-h5.common.js",
}

发布：

使用命令npm login登录，输入用户名、密码、邮箱、验证码
使用命令npm publish发布
成功后，展示如下信息

五、下载并使用

命令行运行npm install ljp-ui-h5
在入口文件中引入并全局注册，同时引入css文件

// index.ts
import LjpUi from "ljp-ui-h5"
import "ljp-ui-h5/dist/bundle.css"

import App from "./index.vue";
const app = createApp(App);



app.use(LjpUi)