构建npm组件包并打包上传到npm官网

vite+js+v3简略搭建（笔记用）
原作者：https://juejin.cn/post/7119827361092108301?searchId=20240724094258A72138D981DC0419C33E
js 复制代码
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 />