使用vite编写npm的库

创建vite项目

在对应目录下，打开node命令行，使用创建命令

npm create vite

这里不要选择开发框架而是选择Others。如图选择库转存失败，建议直接上传图片文件

下一步选择
模板选择library
选择开发语言
现在已经生成一个基本项目

目录介绍

介绍转存失败，建议直接上传图片文件

修改默认代码，简单封装一个vue组件

首先将项目开发环境弄好

删除src目录下mian.ts中的内容，修改成一下代码注释：记得自行安装vue需要的依赖

 npm install @vitejs/plugin-vue -D
 npm install vue -S

import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app");

在src目录下新增App.vue

<script setup lang="ts">
  import HelloWord from '../lib/hello-word/index.vue'
  </script>

  <template>
    <div>
      <HelloWord />
    </div>
  </template>

在lib/hello-word中新增要封装的组件

  <template>
    <div>
      hello word!
      <p>随机数:{{ random }}</p>
      <div>
          <button @click="randomSort">重新排序</button>
      </div>
    </div>
  </template>
  <script setup lang="ts">
  import {ref} from "vue-demi"
  const random = ref(0)
  function randomSort(){
      random.value = Math.floor(Math.random()*100)
  }
  </script>

import HelloWord from './hello-word/index.vue';
export { HelloWord };

修改配置文件下面是修改后的配置 vite.congfig.ts配置介绍

import { defineConfig } from 'vite'
import vue from "@vitejs/plugin-vue";
import dts from "vite-plugin-dts"; // 用来自动生成d.ts声明文件的

export default defineConfig({
  plugins: [vue()，dts()],// 这里是因为我使用到了vue，需要vue编译
  build: {
    lib: {
      entry: "./lib/index.ts", // 入口文件
      name: "npm-component", 
    },
    rollupOptions: {
      // 因为这是vue插件,用户本地已经有Vue环境了,此处Vue没必要打到包里面
      external: ["vue"],// 排除需要打包的库，如果只是开发库，则将此处放开。如果是使用script标签挂在到对应dom的方式，则需要将所有用到的库都打包。自行判断处理。
      output: {
        globals: {
          vue: "Vue",
        },
        // name: "abc", // 普通esjs不会暴露，需要自己手动编写 umd.cjs 这里是暴露出去的全局变量，不写则暴露package.json中的name
      },
    },
  },
  // 为生产环境的代码指定环境变量
  define: { "process.env.NODE_ENV": '"production"' }, //参考查看vite文档： https://cn.vitejs.dev/guide/build.html#library-mode
});

打包好自己写的库后，需要手动更改package.json中的入口文件等重要信息 package.json部分字段介绍

{
  "name": "npm-component", // 包名
  "private": true,
  "description": "", 
  "version": "1.0.0",
  "type": "module",
  "author": "walker",
  "license": "ISC",
  "files": [
    "dist",
    "index.d.ts"
  ],// files字段用于指定哪些文件应该被包含在你的 npm 包中
  "main": "./dist/npm-component.umd.cjs", // 用于指定一个模块的主入口点
  "module": "./dist/npm-component.js", // 用于指定一个模块的 ES6 模块版本的入口点
  "types": "./index.d.ts", // 指定声明文件位置
  "exports": {
    "types": "./index.d.ts",
    "import": "./dist/npm-component.js",
    "require": "./dist/npm-component.umd.cjs"
  },
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build"
  },
  "devDependencies": {
    "@types/node": "^20.11.20",
    "@vitejs/plugin-vue": "^5.0.4",
    "typescript": "^5.3.3",
    "vite": "^5.0.10",
    "vue-demi": "^0.14.7"
  },
  "dependencies": {
    "vue": "^3.4.19"
  }
}

可以运行npm run dev 来查看自己开发情况。

将库打包并发布

执行命令

    npm run build

登录记得切换到官方的源：registry.npmjs.org/

    npm login

发布

    npm publish

使用vite编写npm库

使用vite编写npm的库

创建vite项目

目录介绍

将库打包并发布