从零开始发布一个Vue3+Vite的npm包
其它延伸：verdaccio搭建私有npm仓库
npm账号配置
注册新账号
注册地址： www.npmjs.com/signup
登录账号
在命令行输入：
npm login，此时会提醒你打开浏览器进行登录，然后邮件接收验证码，输入登录
后续发布会用到的命令行
npm version patch package.json 里的版本号变更，如1.0.0变成1.0.1
npm publish 发布推送
开发vue3+vite的组件
创建一个Vue应用
用脚手架创建一个vue3项目，官方创建有两种方式：
- vue-cli创建(基于webpack)
- create-vue创建(基于vite)
这里选择第二种方式创建，目前最新的Vue官方的项目脚手架工具；跟着官方文档走即可：创建一个 Vue 应用
*注意：方式二需要、已安装 16.0 或更高版本的 Node.js
这里采用 nvm 安装切换成高版本的node：
nvm install v18.16.0
nvm use v18.16.0
开发组件
这里开发的是Facebook登录、Google登录组件，组件功能开发不详述；这里主要是记录NPM配置发布的相关内容
在根目录src下新建组件目录：packages，这是最终需要打包发布到 npm 的目录
packages |- FacebookSignin
|- index.js // FB登录组件入口
|- index.vue // FB登录组件逻辑
|- GoogleSignin
|- index.js // 谷歌登录组件入口
|- index.vue // 谷歌登录组件逻辑
|- index.js // 组件主入口
打包配置
vite.config.js配置
build: {
lib: {
entry: path.resolve(__dirname, 'src/packages/index.js'), // 打包入口文件
name: 'vue3-google-facebook-signin', // 打包的名字
fileName: (format) => `vue3-google-facebook-signin.${format}.js` // 打包生成的文件名
},
rollupOptions: {
// 不需要打包进库的依赖，忽略vue
external: ['vue'],
output: {
// UMD构建模式下为这些外部的依赖提供一个全局变量
globals: {
vue: 'Vue'
}
}
}
}
package.json 修改
根目录的package.json新增以下配置
"files": [
"dist"
],
"main": "./dist/vue3-google-facebook-signin.umd.js",
"module": "./dist/vue3-google-facebook-signin.es.js",
"exports": {
".": {
"import": "./dist/vue3-google-facebook-signin.es.js",
"require": "./dist/vue3-google-facebook-signin.umd.js"
}
},
配置好之后，开发调试无误、开始打包，执行：npm run build，此时打包生成的 dist 目录，就是我们要发布到 npm 的包。
发布 npm
发布前新增配置说明文件
进入 dist 目录，生成并配置 package.json 文件，操作如下：
命令行执行： npm init --yes 生成 package.json 文件，修改里面的项目信息即可
同时，在 dist 目录新建 README.md 文件并编辑内容，到时发布后在npm的说明展示
发布
进入 dist 目录，命令行执行登录：
npm login， 此时会提醒你打开浏览器进行登录，然后邮件收到验证码输入登录
登录成功，可以执行发布命令：npm publish
如果是更新后重新发布，需要先执行
npm version patch， package.json 里的版本号变更，如1.0.0变成1.0.1
npm publish发布推送
发布成功，可以去npm的组件页看看，npm install -S vue3-google-facebook-signin下载回来试试使用吧
