vite 创建自己的组件库

转载请注明来源,侵权必究

npm发布参考 https://www.cnblogs.com/kuangke/p/14702478.html

参考:https://juejin.cn/post/7073646687968821256

1. 创建package.json文件 加入以下内容

   {
     "name": "vue3-kuangke", //库名
     "version": "1.0.2", //版本
     "description": "kuangke components for PC", //简介
     "main": "./lib/vue3-kuangke.mjs", //入口文件 exports->. 含义一样
     //这个属性会导致 在测试中直接引用  @/../lib/vue3.kuangke.mjs 会报错。
     //"type" : "module", 
     "exports": {
       ".": {
         "import": "./lib/vue3-kuangke.mjs", //import "vue3-kuangke" 导入时默认文件
         "require": "./lib/vue3-kuangke.umd.js" //require("vue3-kuangke") 导入是默认文件
       },
       "./model":{
         "import": "./lib/model/vue3-kuangke.mjs", //import "vue3-kuangke/model/" 导入时默认文件
         "require": "./lib/model/vue3-kuangke.umd.js" //require("vue3-kuangke/model/") 导入是默认文件
       }
     },
     "scripts": {
       "dev": "vite", //开发
       "build:prod": "vite build", //构建
     },
     "repository": {
       "type": "gitee", //git类型
       "url": "git@gitee.com:kuankges/vue3-kuangke.git" //git地址
     },
     "author": "kuangke", //作者
     "license": "ISC", //协议
     "dependencies": {
       //库依赖
     },
     "devDependencies": {
       //开发依赖
     }
   }
   
   

2. vite配置

   //配置意义详见 https://cn.vitejs.dev/guide/build.html#library-mode
   import { defineConfig, loadEnv } from "vite";
   import path from "path";
   import createVitePlugins from "./vite/plugins";
   
   // https://vitejs.dev/config/
   export default defineConfig(({ mode, command }) => {
     const env = loadEnv(mode, process.cwd());
     const { VITE_APP_ENV } = env;
     return {
       // 部署生产环境和开发环境下的URL。
       // 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
       // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
       base: VITE_APP_ENV === "production" ? "/" : "/",
       plugins: createVitePlugins(env, command === "build"),
       resolve: {
         // https://cn.vitejs.dev/config/#resolve-alias
         alias: {
           // 设置路径
           "~": path.resolve(__dirname, "./"),
           // 设置别名
           "@": path.resolve(__dirname, "./src"),
         },
         // https://cn.vitejs.dev/config/#resolve-extensions
         extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
       },
       build: {
         outDir: "lib", //库输出目录
         lib: {
           entry: "src/components/index.ts",  //库打包入口
           name: "kuangke",
         }, //库编译模式配置
         sourcemap: true, // 输出.map文件
         rollupOptions: {
           // 确保外部化处理那些你不想打包进库的依赖
           external: ["vue", "element-plus", "vue3-quill"],
           output: {
             // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
             globals: {
               vue: "Vue",
               "element-plus": "ElementPlus",
               "vue3-quill": "vue3-quill"
             },
           },
         }, // rollup打包配置
       },
       // vite 相关配置
       server: {
         port: 8000,
         host: true,
         open: true,
         proxy: {
           // https://cn.vitejs.dev/config/#server-proxy
           // "/api": {
           //   target: "http://localhost:8080",
           //   changeOrigin: true,
           //   rewrite: (p) => p.replace(/^\/api/, ""),
           // },
         },
         hmr: {
           overlay: false,
         },
       },
       //fix:error:stdin>:7356:1: warning: "@charset" must be the first rule in the file
       css: {
         postcss: {
           plugins: [
             {
               postcssPlugin: "internal:charset-removal",
               AtRule: {
                 charset: (atRule) => {
                   if (atRule.name === "charset") {
                     atRule.remove();
                   }
                 },
               },
             },
           ],
         },
       },
     };
   });
   

3. npm 发布 包含或排除文件

   参考:https://cloud.tencent.com/developer/article/1890474

​ .gitignore文件

​ .npmignore文件

​ package.json -> files字段 文件白名单 .git忽略 但 发布又要。如库文件 lib