npm就像是一个大型的在线仓库，你上传什么它就照实存什么，下载安装的时候也是一样。所以我用一个实际的项目分一下操作步骤，逐条讲述。本文偏重于组织代码的过程，发布到npm官网的过程比较粗略，仅供参考。
目录
-
任务目标
-
建立一个以vite+vue3为展示框架的代码仓
-
发布到npm
-
分别打包（lib和网页）
一、任务目标
- 建立一个通用函数库并发布到npm，做到开箱即用。
- 用一个单独的库来维护代码仓，仓内包含源代码、要发布的经过打包的代码。
- 仓内代码可运行，可以见到运行效果。包含一个可供发布为静态网页的文档网站程序。
- 一条命令实现打包工作，打包后的代码可在 js/ts 环境下运行。并且仅发布必要文件，调试时文件等一概忽略不上传。
二、建立一个以vue3为展示框架的代码仓
1.执行npm init --yes组织好自己将要发布包的相关信息。
2.执行npm init vue@3创建一个vue3的TS项目，默认会生成一个vite+vue的项目。
3.将包内代码迁移至外层，合并package.json，并注意将dependencies内的包转移至devDependencies内。
4.建立源代码目录lib，该文件夹放置在根目录即可，然后配置vite.config.ts使之可以访问到src外的内容。之所以要这样做是为了将源代码与测试代码分离，增强可读性和组织性。
之后就可以用import * from '$/xxx'的形式来引用源代码内容。
5.编写文档网页，页内包含调用源代码模块的部分，既有使用说明，又能见到实际的运行效果。此部分不再赘述，请自行发挥。
6.配置打包前的编译设定：
- 先安装插件
npm i vite-plugin-dts -D，使用此插件可以在编译时自动生成.d.ts文件。 -
配置viite.config.ts
vitconfig.ts2.png -
配置tsconfig.json
tsconfig.json2.png -
配置package.json
package.json.png
指定要上传的文件/文件夹，指定入口文件，指定类型声明文件，加入打包时的命令脚本
如上所述：我们在开发时就可以直接运行npm run dev加以调试，运行npm run build-lib就是打包lib操作。输出的文件都在配置的es目录里。
三、发布到npm
由于我们在package.json已经配置好了要上传的文件和目录，所以直接执行
npm publish
即可。
注意：发布操作需要你检查此时引用的库得是npm官方的地址，并处于登录状态。如果你正在使用淘宝镜像请事先调整目标后再发布。
发布后在其他项目中执行npm i <你的包名> -s可以见到，下载下来的文件只有我们想要的es目录和Readme.md
经测试，模块代码在js/ts环境下皆可运行。
四、分别打包（lib和网页）
之前提到过需要包含一个文档介绍网页，其内容编写也全靠各位自由发挥，然而打包lib和打包website不能使用同一套打包配置，这里暂时没有想到更好的办法，所以做法是有针对性地分别打包：也就是说当打包lib时使用第二节的配置和命令；打包网页时将配置文件恢复成vue项目的默认配置就好。
vite.config.ts
tsconfig.ts
这样就做到了一个库既能满足开发调试需要（可直接读取源码），又能打包出两种产物，还可以直接提交到npm。
注意：网页开发时额外的依赖要安装在devDependencies里，否则将会在安装此包时顺带安装dependencies内的包，产生不必要的等待时间。
参考文章：
如何使用vite框架封装一个js库，并发布npm包
配置vite（官网）
配置Tsconfig（官网）
配置package.json（官网）
