基于vite + Vue3.2 组件开发 并发布 npm 包
新建vite 项目就不多说了
目录结构
button组件 index.js
Input组件下的 index.js也是一样的 这里就不一 一截图了
有一个注意点: 组件文件需要提供name,否则打包会失败
而在 packages
下也有一个 index.js
作为引入组件的入口文件
配置完成后
npm build 打包
会多出来一个 dist
目录
package.json 配置
{
"name": "名称", //打包的名称
"private": false, //私有属性,默认true 我们需要改为false,否则npm发布不了
"version": "0.0.1", // 版本号
"main": "./dist/y-ecui.umd.js", // 打包后的入口文件
"module": "./dist/y-ecui.es.js",
// 打包后输出
"exports": {
//配置所有类型
".": {
"import": "./dist/y-ecui.es.js",
"require": "./dist/y-ecui.umd.js"
}
},
//检测dist打包目录的所有文件
"files": [
"dist/*"
],
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"sass": "^1.52.3",
"vue": "^3.2.25",
"y-ecui": "^0.0.1"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.3.3",
"vite": "^2.9.9"
}
}
vite.config.js 配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
// 配置打包入口出口
build: {
rollupOptions: {
external: ["vue"], //打包的时候不需要打包的依赖
// 打包抛出一个全局方法
output: {
globals: {
vue: "Vue"
}
}
},
// 入口
lib: {
entry: "./packages/index.js",
// 需要提供一个name 这个名字尽量不和 npm 上发布的包名一致,否则也会推送不到npm
name: "xxxxxui"
}
}
})
发布npm
必须的:
- npm账号
- 把
淘宝镜像
切换为 默认的npm 镜像
npm 发包必须是 淘宝镜像
1、查看镜像 npm config get registry
2、更换npm 镜像 npm config set registry https://registry.npmjs.org/
3、更换淘宝镜像 npm config set registry http://registry.npm.taobao.org/
在当前项目打开控制台
1、npm login
会让输入:账号、密码、邮箱、执行完这三个会收到 npm 发在自己邮箱的验证码
执行 npm publish
发布成功后 邮箱也会收到npm 发送的邮件提醒
使用
npm i 你的包名
全部引入
按需加载
转载自:https://juejin.cn/post/7110796275099893773