构建npm组件包并打包上传到npm官网_业界新闻

1.npm create vite@latest # 使用npm安装vite脚手架 2.先install项目，然后改造：修改：./src -> ./examples 新增：./packages（该文件夹用于存放开发的组件）找到项目根目录下的index.html文件，将里面的script标签的src属性内容由/src/main.js替换为/examples/main.js，即可重新访问本地 3.编写组件，这里我啥也不写，就一个页面塞点简单内容，当作一个小组件组件位置packages\TaskName\src\task.vue 内容： <script setup name="task"> import { ref } from 'vue' const msg = ref('Vite + Vue3') const count = ref(0) </script> <template> <h1>{{ msg }}</h1> </template> <style scoped> .read-the-docs { color: #888; } </style> 添加packages\TaskName\index.js文件用于导出该组件： import TaskName from './src/task.vue'; TaskName.install = (App) => { App.component(TaskName.__name, TaskName); }; export default StarrySky; 添加packages\index.js文件，用于导出所有的组件 import TaskName from './TaskName'; //按需引入 export { TaskName}; const components = [TaskName]; const install = (App) => { components.forEach((item) => { App.component(item.__name, item); }); }; export default { install, }; 4.vite.config.js文件修改输出内容到lib文件夹，打包入口文件设置为./packages/index.js文件 import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import { resolve } from 'path'; export default defineConfig({ plugins: [vue()], build: { outDir: 'lib', lib: { entry: resolve(__dirname, 'packages/index.js'), //指定组件编译入口文件 name: 'Vue3ViteDemo', fileName: 'vue3-vite-demo', },//库编译模式配置 rollupOptions: { // 确保外部化处理那些你不想打包进库的依赖 external: ['vue'], output: { // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量 globals: { vue: 'Vue', }, }, },// rollup打包配置 }, }); 5.执行npm run build ,会生成lib文件夹，里面包含了UMD、ESM规范打包的几个js库文件，还有css样式文件，整个组件库文件最终都会输出在lib文件夹下 6.修改package.json配置 { "name": "vue3-vite-demo",//名字 "private": false, //这个要改掉的，设为私有不能上传的 "version": "0.0.1", //版本号。每次更新都得修改 "type": "module", "keywords": [ "vite-demo" //npm上搜索的关键字 ], "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "files": [ "lib" ], "main": "lib/vue3-vite-demo.umd.js",//包函数入口文件 "module": "lib/vue3-vite-demo.es.js",//ESM标准入口 "exports": { "./lib/style.css": "./lib/style.css",//css文件需要暴露否则样式引入会报错 ".": { "import": "./lib/vue3-vite-demo.js", "require": "./lib/vue3-vite-demo.umd.js" } }, "dependencies": { "vue": "^3.4.31" }, "devDependencies": { "@vitejs/plugin-vue": "^5.0.5", "vite": "^5.3.4", } } 7.设置忽略文件根目录添加 .npmignore文件 .DS_Store node_modules /dist # local env files .env.local .env.*.local # Log files npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *.sw* # 以下是新增的 # 要忽略目录和指定文件 .vscode examples/ packages/ public/ vite.config.js *.map *.html 8.npm login 登录登录前需要切一下官方的源 npm config set registry https://registry.npmjs.org 有时候可能要科学上网，不行就只能构建私有库了 9.npm publish 推送 10.使用 npm install vue3-vite-demo @latest -D mian.js中添加全局引用 //main.ts or main.js import { createApp } from 'vue' import Vue3ViteDemo from 'vue3-vite-demo'; import 'vue3-vite-demo/lib/style.css'; import './style.css' import App from './App.vue' const app = createApp(App); app.use(Vue3ViteDemo); app.mount('#app'); 组件中使用就是 <task />