npm【一】---vue3+vite+ts 发布、更新自定义组件到npm仓库

1.初始化项目

本示例使用npm7+ 版本 （项目为 sos-ol-map）

# npm 6.x
npm init vite@latest sos-ol-map --template vue-ts

# npm 7+, 需要额外的双横线：
npm init vite@latest sos-ol-map -- --template vue-ts

# yarn
yarn create vite sos-ol-map --template vue-ts

# pnpm
pnpm create vite sos-ol-map -- --template vue-ts

2.编写组件

1. src/components 目录作为组件的开发包，目录下的index.ts文件作为整个组件库的出口文件，导出组件。

// index.ts
//index.ts
import type { App } from 'vue'
import MyButton from './Button'

// 所有组件列表
const components = [
    MyButton,
]

// 定义 install 方法
const install = (app: App): void => {
    // 遍历注册所有组件
    /*
      component.__name ts报错
      Argument of type 'string | undefined' is not assignable to parameter of type 'string'.

      Type 'undefined' is not assignable to type 'string'.ts(2345)
      解决方式一：使用// @ts-ignore
      解决方式二：使用类型断言 尖括号语法(component.__name) 或 as语法(component.__name as string)
    */
    components.forEach(component => app.component(component.__name as string, component))
}

export {
    MyButton,
}

const VueTestUI = {
    install
}

export default VueTestUI

2. 编写组件，创建src/components /Button目录，在该目录下创建Button.vue和index.ts文件。

// Button.vue
<template>
    <button class="MyButton" type="button">
      我是一个按钮组件
    </button>
  </template>
  
<script lang="ts">
  export default {
    name: 'MyButton', //组件名称，必须设置
    data () {
      return {}
    },
    methods: {},
    filters: {},
    created () {}
  }
</script>
  
<style>
  .MyButton {
    color: red;
  }
</style>

// index.ts
import type { App } from 'vue'
import MyButton from "./Button.vue"

// 使用install方法，在app.use挂载
MyButton.install = (app: App) => {
    app.component(MyButton.__name as string, MyButton) //注册组件
}
  
export default MyButton

3.配置打包

1. 修改vite.config.ts配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';

const pathResolve = (dir: string) => {
  return resolve(__dirname, '.', dir);
};
const alias: Record<string, string> = {
  '@': pathResolve('./src'),
};

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base:'./',
  build:{
    outDir: 'sos-map-ui/dist', //输出文件名称
    lib:{
      entry: resolve(__dirname, './src/components/index.ts'), //指定组件编译入口文件
      name: 'sosVue3TsMapUi',
      fileName: 'sos-map-ui'
    },//库编译模式配置
    rollupOptions: {
      external: ['vue', 'swiper', '@vuepic/vue-datepicker', 'qrcode'],
      output: {
        // format: 'es', // 默认es，可选 'amd' 'cjs' 'es' 'iife' 'umd' 'system'
        exports: 'named',
        globals: { //在UMD构建模式下为这些外部化的依赖提供一个全局变量
          vue:'Vue',
          // 'vue-router': 'VueRouter', // 引入vue-router全局变量，否则router.push将无法使用
          swiper: 'Swiper',
          '@vuepic/vue-datepicker': 'VueDatePicker',
          qrcode: 'qrcode'
        }
      }
    },
    /** 设置为 false 可以禁用最小化混淆，或是用来指定使用哪种混淆器。
     默认为 Esbuild，它比 terser 快 20-40 倍，压缩率只差 1%-2%。
     注意，在 lib 模式下使用 'es' 时，build.minify 选项不会缩减空格，因为会移除掉 pure 标注，导致破坏 tree-shaking。
     当设置为 'terser' 时必须先安装 Terser。（yarn add terser -D）
     */
    minify: 'terser', // Vite 2.6.x 以上需要配置 minify: "terser", terserOptions 才能生效
    terserOptions: { // 在打包代码时移除 console、debugger 和 注释
      compress: {
        /* (default: false) -- Pass true to discard calls to console.* functions.
          If you wish to drop a specific function call such as console.info and/or
          retain side effects from function arguments after dropping the function
          call then use pure_funcs instead
        */
        drop_console: true, // 生产环境时移除console
        drop_debugger: true // 生产环境时移除debugger
      },
      format: {
        comments: false // 删除注释comments
      }
    }
  },
  resolve: {
    alias,
  }
})

• 执行打包npm run build，会在dist文件夹下生成如下文件
  

4.组件发布

• 在打包后的sos-map-ui初始化仓库

npm init

修改package.json如下格式

{
  "name": "sos-map-ui",
  "version": "1.0.0",
  "private": false,
  "main": "./sos-map-ui/sos-map-ui.umd.cjs",
}

• 发布道npm仓库

npm publish

5.项目中使用

npm install sos-map-ui

5.项目中效果如下