创建组件库

npm create vant-cli-app

mkdir component && cd component
yarn create @umijs/dumi-lib --site

1、创建项目

npm init vite@latest // 创建项目

2、安装依赖

scss对应依赖

npm install sass sass-loader --save-dev

修改配置 vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'

import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx(), vueDevTools()],
  resolve: {
    alias: {
      // '@': fileURLToPath(new URL('./src', import.meta.url))
      // '@': fileURLToPath(new URL('./packages', import.meta.url))
      // '@': fileURLToPath(new URL('./packages', import.meta.url))

      '@': resolve(__dirname, 'packages')
    },
    // 类型： string[] 导入时想要省略的扩展名列表。
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.mjs']
  },
  build: {
    outDir: 'lib',
    lib: {
      entry: fileURLToPath(new URL('./packages/index.ts', import.meta.url)),
      name: 'i-ui-plus',
      // fileName: (format) => `index.${format}.js`
      fileName: 'i-ui-plus'
    },
    rollupOptions: {
      // 确保外部化依赖模块
      // 请确保外部化那些你的库中不需要的依赖
      external: ['vue', 'ElementPlus'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue',
          ElementPlus: 'ElementPlus'
        }
      }
    }
  }
})

修改package.json默认地址，修改对应字段

{
  "private": false,
  "type": "module",
  "main": "lib/i-ui-plus.js",
  "module": "lib/i-ui-plus.js",
  "types": "lib/index.d.ts",
  "files": [
    "lib",
    "package.json"
  ],
}

3、打包 发布

npm run build // 打包到lib文件

4、本地建立连接

cd component // 组件项目
npm link // 添加软连接

// 删除软连接
npm uninstall -g <packageName> // package.json name属性

// 查看本地包
npm ls --global

5、项目中使用软连接

npm link <packgeName> // 组件项目 package.json name属性
npm unlink <packageName> //取消软连接，package.json 中依赖也将去掉，应重新安装当前依赖才可正常使用依赖对应的组件模块等

项目中使用 main.ts

// 引入组件库
// import IUi from 'i-ui/lib/i-ui-plus' ; 不修改package.json文件对应main module字段使用
import IUi from 'i-ui' 

import 'i-ui/lib/style.css' // 引入样式

app.use(IUi)

6、项目从git 仓库安装依赖

npm install it+http://user@hostname/project/blah.git#commit-ish
// commit-ish 是可以被git checkout的任何tag、sha或者branch。默认为master