paowx-ui

自定义UI组件库

创建Vue 3 + TypeScript + Vite项目

vue create paowx-ui

目录调整

packages -- 用于存放所有的组件
src -- 用于进行测试

vite.config.js文件配置

新增vite.config.js配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
  plugins: [
    vue(),
  ],
  build: {
    outDir: 'lib',
    lib: {
      entry: path.resolve(__dirname, 'packages/index.ts'),
      name: 'paowx-ui',
      fileName: 'paowx-ui',
    },
    rollupOptions: {
      // 外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 在UMD 构建模式下为遮羞外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

统一导出packages中所有的组件

在packages中新建index.ts，用于导出所有组件

import Button from './button.vue'
// 存储组件列表
const components = [
    Button
]
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function(Vue){
    // 遍历注册全局组件
    components.forEach((item) =>{
        Vue.component(item.name, item)
    })
}
// 判断是否是直接引入文件,如果是，就不用调用 Vue.use()
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
  }
  
// 导出的对象必须具有 install，才能被 Vue.use() 方法安装
export default {
    install
}

发布到npm

1、在package.json的script中新增一条打包命令
    "lib": "vue-cli-service build --target lib packages/index.js"

2、发布到npm
修改package.json文件
    "private": false,
    "main": "lib/paowx-ui.umd.cjs",
    "module": "lib/paowx-ui.js",
    "style": "lib/style.css",
    "author":{
        "name": "paowx"
    },
    "files": [
        "lib/*",
        "packages/*",
        "Readme.md",
        "package.json"
    ],

3、增加.npmignore文件
    # 忽略目录
    examples/
    packages/
    public/
        
    # 忽略指定文件
    vue.config.js
    babel.config.js
    *.map

4、npm发布
    npm login
    npm publish

    https://www.npmjs.com/package/paowx-ui

rollup

https://juejin.cn/post/7119783410670764063

rollup打包 cjs、esm、umd 输出格式

如果需要script标签引入的方式，建议打包为umd 如果应用场景兼容ES6，可打包为esm 用 Rollup 编译为 UMD 或 CommonJS 格式，需要在 package.json 文件的 main 属性中指向当前编译的版本 编译为ESM格式，需要在package.json 文件的 module 属性中指向当前编译版本

1、CJS规范： 规范代表库为CommonJS，主要用于后端，在nodejs中，node应用是由模块组成，采用的commonjs模块规范

2、ESM规范： esm规范是es6原生支持的，很多浏览器开始支持，类似commonjs的写法和同、异步加载机制能通过设置type=module，用于html中，而且在node中也支持； export 向外暴露或导出模块 export default xxx； import 引入暴露或导出的模块 import {xx, xx} from './xxx.js'; esm为静态导入，正因如此所以可在编译期间进行Tree Shaking，减少js体积；

3、UMD规范： 一种兼容 cjs 与 amd 的模块，既可以在 node/webpack 环境中被 require 引用，也可以在浏览器中直接用 CDN 被 script.src 引入。

参考文档

https://juejin.cn/post/7037382933786673160 https://juejin.cn/post/7138811174497288205

vite打包和实现css按需引入 https://juejin.cn/post/7200760552729329723 https://juejin.cn/post/7201132695623335991