用vite打包并上传到npm

IceMelon123
122 阅读3分钟

创建项目

  • pnpm create vite
  • 输入项目名字 -> 选择vue -> 选择TS
  • 按照提示操作
  cd jxq-ui
  pnpm install
  pnpm run dev

创建packages文件夹以及相应文件

7576ff57486cc80566a7c3fee48b98a.png

编写组件和导出

这是button.vue

<template>
  <div class="jxq-button" :class="`jxq-button-${size}`">这是一个button</div>

</template>

<script setup lang="ts">

defineProps({
  size: {
    type: String,
    default: "big"
  }
})

defineOptions({
  name: "JXQButton"
})

</script>

<style lang="scss" scoped>

.jxq-button {
  background-color: #41b883;
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

.jxq-button-big {
  width: 200px;
  height: 50px;
}

.jxq-button-small {
  width: 150px;
  height: 30px;
}

</style>

这是只导出button.vue的，单组件注册用

// 导入组件，组件必须声明 name
import JXQButton from "./src/button.vue";
import { App} from "vue";

// 为组件添加 install 方法，用于按需引入
JXQButton.install = function (app: App) {
    app.component(JXQButton.name!, JXQButton)
    return app
}

export default JXQButton

全局注册组件

import { App} from "vue";
import JXQButton from "./components/button/src/button.vue";
import JXQTable from "./components/table/src/table.vue";

import {  setupDirective } from "./directives";

const components = [
  JXQButton,JXQTable
];

const install = (app: App) => {
  components.forEach(component => {
    app.component(component.name!, component);
  });
  return app;
};

export default {
  install, setupDirective
};

配置ts

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "Node",
    "strict": true,
    "noLib": false,
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "allowJs": true,
    "noImplicitAny": true,
    "paths": {
      "@/*": ["src/*"]
    },
//    "types": ["vite/client", "element-plus/global"],
    "skipLibCheck": true /* Skip type checking all .d.ts files. */,
    "allowSyntheticDefaultImports": true /* 允许默认导入 */,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,

    "jsx": "preserve",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment"
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.vue",
    "src/typings/**/*.d.ts",
    "mock/**/*.ts",
    "vite.config.ts"
  ],
  "exclude": ["node_modules",
    "docker/dist", "**/*.js"]
}

vite的库模式

import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import dts from 'vite-plugin-dts'

export default defineConfig({
  plugins: [vue(), dts({ include: ["./src/packages"]})],
  build: {
    lib: {
      entry: resolve(__dirname, './src/packages/index.ts'),
      name: 'JXQUI',
      // 将添加适当的扩展名后缀
      fileName: 'jxq_ui',
    },
    rollupOptions: {
      // 确保外部化处理那些
      // 你不想打包进库的依赖
      external: ['vue', 'element-plus'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖
        // 提供一个全局变量
        globals: {
          vue: 'Vue',
        },
      },
    },

  },
  server: {
    port: 8888,
    open: true,
  }
})

配置package.json

"name": "jxq-ui",
"type": "module",

"version": "0.0.2", 每次publish都要更新
"license": "MIT",
"private": false,  如果是true将只有自己能用
"repository": {
  "type": "git",
  "url": "https://registry.npmjs.org"
},
"files": ["dist/*"], 设置发布哪些文件到仓库
"main": "dist/jxq_ui.umd.cjs", 使用requir导入使用的
"module": "dist/jxq_ui.js", 使用import导入使用的
"types": "dist/index.d.ts",  类型说明
"keywords": ["jxq"],  搜索关键字
"description": "这是一个基于Vue3和ElementPlus的UI组件库，旨在帮助开发者快速开发基于Vue3的Web应用。",  描述

执行 npm run build 会生成dist文件夹

c2c04971c7021603561e3edfb82cdeb.png

发布到npm

(yrm ls)
(npm config get registry )
(npm config set registry https://registry.npmjs.org)
npm adduser
npm login 
npm whoami
npm publish （npm publish --registry http://localhost:4873）

使用

  • 组件库引用了vue， elementplus,需要先安装
import elementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import jxqui from 'jxq-ui'
import 'jxq-ui/dist/style.css'

const app =createApp(App)

app.use(elementPlus)
app.use(jxqui)
  • 更新版本后需要重新在项目中修改版本号，执行pnpm i xxx
  • 需要重新 npm run dev
  • 之后在组件中使用即可
    <JXQButton size="big"></JXQButton>
    <JXQButton size="small"></JXQButton>
    <JXQTable></JXQTable>
  • 如果是私仓，需要配置地址
"publishConfig" : {
  "registry" : "https://xxxx"
},

关于npm

  • ISC许可协议，这意味着任何人可以免费地获取、使用、复制、修改和分发该项目的源代码，只要他们在分发时保留原始的许可声明，并且不对用户提供任何担保，也不承担因使用软件产生的责任。
    这种许可方式鼓励代码的共享和再利用，是开源软件生态系统中的常见做法之一。
  • MIT许可协议，这意味着任何人可以免费地获取、使用、复制、修改和分发该项目的源代码，只要他们在分发时保留原始的版权声明和MIT许可声明，并且不对用户提供任何担保，也不承担因使用软件产生的责任。 这种许可方式体现了开源软件的核心理念，即开放、自由、合作与共享。
  • MIT是和BSD一样宽范的许可协议,作者只想保留版权,而无任何其他了限制.也就是说,你必须在你的发行版里包含原许可协议的声明,无论你是以二进制发布的还是以源代码发布的.
avatar
文章
阅读
粉丝