发布一个属于自己的npm工具库（vite）开发工具库的意义是：一、简单发布js文件到npm官方仓库新建utils-d

开发工具库的意义是：

写业务的过程中如果有函数跨项目使用时，为了方便维护可以将这些函数封装成一个工具库发布到npm官方仓库或者私有仓库。

一、简单发布js文件到npm官方仓库

新建utils-demo文件夹，并在根目录下生成package.json文件
```
mkdir utils-demo
cd utils-demo
npm init
```
新建index.js文件，并写一些可导出的函数

文件准备完毕，接下来需要登陆npm账号

npm login
Username: your name
Password: your password
Email: yourmail@gmail.com

登陆成功后就可以直接发包了，没错就是这么简单！
```
//修改版本号
npm version 【版本flag】
//发布到远程仓库
npm publish
```
常用版本flag包括patch,minor,major;这里我们用patch升级小版本。
发布成功后就可以在www.npmjs.com/ 看到自己发的包了，测试包记得在72小时之内删除，避免污染npm仓库。
发布到私有仓库的话只需要修改package.json的publishConfig.registry配置
```
  "publishConfig": {
    "registry": "http://localhost:4873"
  },
```
配置完再发布的话就会将发布到该地址下的私服

二、使用vite工具链开发工具库并发布

创建vite+ts项目（不赘述过程，目录结构如下）

vite.config.js文件增加lib字段，该字段表示使用vite的工具库打包模式，否则入口文件必须是html文件。配置多个formats的值可以生成多个对应的模块化方案的产物见下图

defineConfig({
  outDir: 'lib',//产物打包输出到lib文件夹下
  sourcemap: false,
  lib: {
    entry: path.resolve(__dirname, 'packages/basic/index.ts'),
    name: 'basic',
    fileName: format => `basic.${format === 'iife' ? 'min' : format}.js`,
    formats: ['es', 'umd', 'iife']//使用哪些模块化方案进行打包，多个方案对应多个产物
  },

package.json文件配置files字段，该字段表示发布时哪些文件将被发布到npm仓库，通常除了默认必须上传到npm仓库的文件只需要发布产物就可以了。
```
"files": [
  "./lib"
],
```
package.json文件配置exports字段，该字段表示作为模块导出时，使用的不同的模块方案用使用对应的文件
```
"exports": {
  ".": {
    "import": "./lib/basic.es.js",
    "require": "./lib/basic.umd.js"
  }
},
```

使用vite-plugin-dts自动生成ts类型声明文件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue"
import dts from 'vite-plugin-dts'

export default defineConfig(
    {
        build: {...},
        plugins: [
            vue(),
            dts({
                 cleanVueFileName: false,
                 include: ["packages/**/*.ts"],
                 outputDir: "./lib",
              })

        ]
    }
)

vite工具链大概就配置完了，大家可以自行扩展，至此可以直接进行开发和发布了，发布流程同上。