likes
comments
collection
share

vite+vue3发布npm包

作者站长头像
站长
· 阅读数 48

一。新建项目

  1. pnpm create vite
  2. 输入包名称
  3. 选择vue
  4. 选择ts
  5. cd 到项目目录中
  6. pnpm install
  7. 在根目录下建立一个ts声明文件，例如：env.d.ts; 里面加上vue模块的声明，然后在tsconfig.json中的include加入声明文件。要不然在ts文件中导入vue模块会报错
// env.d.ts
declare module "*.vue" {
  import { DefineComponent } from "vue"
  const component: DefineComponent<{}, {}, any>
  export default component
}
declare interface Window {
  Vue: any,
}

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["packages/**/*.ts", "packages/**/*.d.ts", "packages/**/*.tsx", "packages/**/*.vue", "./*.d.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

二。改造目录

  1. 首先需要创建一个 packages 目录，用来存放组件
  2. 将 src 目录改为 examples 用作示例
  3. 启动项目的时候，默认入口文件是 src/main.ts，将 src 目录改为 examples 之后，就需要重新配置入口文件，在index.html中把/src/main.ts改为/examples/main.ts
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/examples/main.ts"></script>
  </body>
</html>

三。组件开发

  1. 之前我们创建的 packages 目录，用来存放组件

  2. 该目录下存放每个组件单独的开发目录，和一个 index.js 整合所有组件，并对外导出

  3. 每个组件都应该归类于单独的目录下，包含其组件源码目录 src，和 index.js 便于外部引用

  4. 这里以组件 el-button 为例，完整的 packages 目录结构如下：

vite+vue3发布npm包

  1. el-button/src/index.vue 就是组件的入口文件
<!--
 * @FilePath: \gaode-echarts\packages\el-button\src\index.vue
-->
<template>
  <button class="tButton">测试 发布 按钮组件1</button>
</template>
<script lang="ts" setup>
</script>
<style lang="scss" scoped>
.tButton {
    background-color: #1188ff;
    color: white;
    border: none;
    padding: 6px 12px;
  }
</style>

5.el-button/index.ts 实现组件的导出

/*
 * @FilePath: \gaode-echarts\packages\el-button\index.ts
 */
import elButton from './src/index.vue' // 如果这里报红， 加一个env.d.ts，再去 tsconfig.json 里面这样配置："include": ["packages/**/*.ts", "packages/**/*.d.ts", "packages/**/*.tsx", "packages/**/*.vue", "./*.d.ts"],

// 一定要先给name赋值，这样后面的局部install和全局install方法才能读到同一个name
elButton.name = 'el-button'

// 为组件添加 install 方法，用于按需引入
// 如果想通过CDN方式引入，需要编写install函数
elButton.install = function(Vue: any) {
  // 注册组件
  Vue.component('el-button1', elButton)
}
export default elButton

6.编辑 packages/index.ts 文件，实现组件的全局注册

/*
 * @FilePath: \gaode-echarts\packages\index.ts
 */
// 导入单个组件
import elButton from './el-button/index'
import elButtonPlus from './el-button-plus/index'
// 以数组的结构保存组件，便于遍历
const components = [
  elButton,
  elButtonPlus
]
// 用于按需导入
export {
  elButton,
  elButtonPlus
}
// 定义 install 方法
const install = function (Vue: any) {
  if ((install as any).installed) return;
  (install as any).installed = true
  // 遍历并注册全局组件
  components.map(component => {
      Vue.component(component.name, component)
  })
}
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}
export default {
  // 导出的对象必须具备一个 install 方法
  install,
}

四。本地导入组件测试

<!--
 * @FilePath: \gaode-echarts\examples\App.vue
-->
<template>
  <tButton />
</template>
<script setup lang="ts">
import tButton from "../packages/el-button/index";
</script>
<style scoped>
</style>

五。编写 package.json 文件

  1. package.json 文件里面有很多字段要填写，否则不能正确发布。最重要的是以下几个
    • name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。
    • version: 版本号，不能和历史版本号相同。
    • files: 配置需要发布的文件。
    • main: 入口文件，默认为 index.js，这里改为 dist/vue3-xmw-table.umd.js。
    • module: 模块入口，这里改为 dist/vue3-xmw-table.es.js。
  2. 完整的 package.json 如下：
{
  "name": "gaode-echarts",
  "private": false,
  "version": "0.0.1",
  "type": "module",
  "main": "dist/gaode-echarts.umd.js",
  "module": "dist/gaode-echarts.es.js",
  "files": [
    "dist/*",
    "gaode-echarts.d.ts"
  ],
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@types/node": "^20.2.5",
    "@vitejs/plugin-vue": "^4.1.0",
    "@vitejs/plugin-vue-jsx": "^3.0.1",
    "sass": "^1.62.1",
    "typescript": "^5.0.2",
    "vite": "^4.3.9",
    "vue-tsc": "^1.4.2"
  }
}

六。vite打包配置

  1. 因为组件库一般都是 jsx 语法编写，所以要加上 @vitejs/plugin-vue-jsx，打包成 lib，编辑 vite.config.ts：
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx' // pnpm add -D @vitejs/plugin-vue-jsx
import path from "path";
const resolve = (dir) => path.join(__dirname, dir);
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx({})],
  resolve: {
    alias: {
      "@": resolve("examples"),
      packages: resolve("packages"),
    },
  },
  build: {
    rollupOptions: {
      // 请确保外部化那些你的库中不需要的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue',
        },
      },
    },
    lib: {
      entry: 'packages/index.ts',
      name: 'gaode-echarts',
      fileName: (format) => `gaode-echarts.${format}.js`,
    },
  },
})
  1. 执行 pnpm run build 会生成 dist 文件夹，里面有以下几个文件：

vite+vue3发布npm包

如果后缀是 .mjs 而不是 .es.js 那就在 lib里面加上 fileName: (format) => gaode-echarts.${format}.js,

七.本地模拟

  1. main.ts 引入样式文件'../dist/style.css'
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import '../dist/style.css'
createApp(App).mount('#app')
  1. 在app.vue导入dist中的组件
<!--
 * @FilePath: \gaode-echarts\examples\App.vue
-->
<template>
  <elButton />
</template>
<script setup lang="ts">
import { elButton } from "../dist/gaode-echarts.js";
</script>
<style scoped>
</style>
  1. 全局声明组件
  • 先在main.ts中用use全局注册组件；// vue的use方法会自动调用包里面的install方法。然后我们又在install方法里面注册全局组件
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import '../dist/style.css'
import gaodeEcharts from "../dist/gaode-echarts.es.js";
const app = createApp(App);
app.use(gaodeEcharts)
app.mount('#app');
  • 在app.vue中就不需要再引入了，直接使用
<!--
 * @FilePath: \gaode-echarts\examples\App.vue
-->
<template>
  <el-button />
</template>
<script setup lang="ts">
// import { elButton } from "../dist/gaode-echarts.es.js";
</script>
<style scoped>
</style>

如果发现引入的组件没有样式，可能是忘了在 main.ts中引入 '../dist/style.css'

八。发布npm

  1. 先查看 npm 的 registry; npm config get registry ; 如果显示的不是官方源，就要改回来

    设置 npm 的 registry 为官方源 npm config set registry https://registry.npmjs.org

  2. 登录npm npm login

  3. 发布到npm npm publish

    注：上传的npm包，在72小时后不可删除，如果是测试用的包，记得72小时内删除

  4. 在npm官网中登录自己的账号查看是否发布成功

vite+vue3发布npm包

  1. 去弄一个demo项目来安装我们刚刚发布的依赖验证一下

    npm install gaode-echarts 在 main.ts 引入并注册

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import gaodeEcharts from 'gaode-echarts'
import 'gaode-echarts/dist/style.css'
const app = createApp(App)
app.use(gaodeEcharts)
app.mount('#app')

> 在app.vue中使用

<script setup lang="ts">
</script>
<template>
  <el-button></el-button>
</template>
<style scoped>
</style>

九。手动ts类型提示（可以跳过直接使用下一节的类型自动生成功能）

需要一个xx.d.ts文件，把这包暴露出去的所有东西的类型都声明一下。然后在packege.json的types字段指向该文件

  1. 新建types/index.d.ts类型声明文件

vite+vue3发布npm包

2.把packages导出的所有东西的类型都声明一下

vite+vue3发布npm包

/*
 * @FilePath: \gaode-echarts\types\index.d.ts
 */
/// <reference types="@amap/amap-jsapi-types" />
/// <reference types="echarts-extension-amap" />
import * as echartsObj from 'echarts';
declare const echarts: typeof echartsObj;
// 组件 
import gaodeMapVue from '../packages/components/gaode-map/index'
declare const gaodeMap: typeof gaodeMapVue;
// 工具
import {
  mercatorToLngLat as mercatorToLngLatType,
  ArrayToObj as ArrayToObjType,
  LineIsShowOnSquare as LineIsShowOnSquareType
} from '../packages/utils/tool'
declare const mercatorToLngLat: typeof mercatorToLngLatType;
declare const ArrayToObj: typeof ArrayToObjType;
declare const LineIsShowOnSquare: typeof LineIsShowOnSquareType;
import { RenderData as  RenderDataType} from '../packages/utils/topologyEcharts';
declare const RenderData: typeof RenderDataType;
export {
  echarts,
  gaodeMap,
  mercatorToLngLat,
  ArrayToObj,
  LineIsShowOnSquare,
  RenderData
}
export * from '@amap/amap-jsapi-types'
declare const _default: {
  install: (Vue: any) => void
};
export default _default

注意这里是用的相对地址引入 packages 包下面的东西。所以npm发布时一定要保护packages文件夹，要不然发布之后这里的引入是失败的

  1. 在package.json中注明ts类型声明文件的入口

vite+vue3发布npm包

十.类型自动生成

使用 vite-plugin-dts会自动把包导出的方法和对象对应的ts类型生成 .d.ts类型声明文件

1. 安装

pnpm i vite-plugin-dts -D

2.使用

  • 在 vite.config.ts:

import { resolve } from 'path'import { defineConfig } from 'vite'import dts from 'vite-plugin-dts'

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'MyLib',
      formats: ['es'],
      fileName: 'my-lib'
    }
  },
  plugins: [dts()]}) // 重点是这一行写了就行
  • 在package.json中,把types字段指向自动生成的dist目录下得index.d.ts

vite+vue3发布npm包

  • 跑 npm run build 的时候dist中就会自动生成 index.d.ts文件

vite+vue3发布npm包

  • 发布之后别人下载使用时就会有类型提示了

vite+vue3发布npm包

转载自:https://juejin.cn/post/7257144279050403896
评论
请登录