vite+ts+vue3 开发组件并发布到 npm

创建项目

pnpm create vite

image.png

模版在这里选择的是 vue vue-ts

增加sass支持

为了编写样式方便需要增加一下对 sass 的支持

cd test
pnpm install
pnpm add sass -D

创建组件

在 src/components 下面新建一个 Button 目录
在新建的Button目录创建 一个 index.ts 和 index.vue

其中 index.vue 编写最简单的组件代码

index.ts 代码如下

import { App } from 'vue'
import Button from './index.vue'

Button.name = 'e-button'

Button.install = (app: App) => {
  app.component(Button.name, Button)
}

export default Button

在 src/components 目录创建 index.ts 导出多个组件 代码如下

import { App } from 'vue'
import Button from './Button'


const components = [Button]

const install = (app: App) => {
  components.map(item => {
    app.component(item.name, item)
  })
}

export default {
  install,
  ... components
}

此时 e-button 组件代码全部开发完成。
可以在 mian.ts 里面全局引入进行测试

import { createApp } from 'vue'
import App from './App.vue'
import Ezos from './components'

const app = createApp(App)
app.use(Ezos)
app.mount('#app')

之后就可以在页面上使用 e-button 组件 测试组件没有问题后可以进行编译并发布

修改配置文件 vite.config.ts

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

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: resolve(__dirname, 'src/components/index.ts'),
      name: 'Ezos',
      fileName: (format) => `ezos.${format}.js`
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

执行打包操作

pnpm run build

查看 dist 目录会生成三个文件

ls -al
-rw-r--r--  1 macos  staff  1557  4  6 20:29 ezos.es.js
-rw-r--r--  1 macos  staff   982  4  6 20:29 ezos.umd.js
-rw-r--r--  1 macos  staff   158  4  6 20:29 style.css

修改 package.json

{
  "name": "@ezos/button",
  "private": false,
  "version": "0.0.1",
  "main": "./dist/ezos.umd.js",
  "module": "./dist/ezos.es.js",
  "exports": {
    ".": {
      "import": "./dist/ezos.es.js",
      "require": "./dist/ezos.umd.js"
    },
    "./dist/style.css": {
      "import": "./dist/style.css",
      "require": "./dist/style.css"
    }
  },
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.31"
  },
  "devDependencies": {
    "@types/node": "^17.0.23",
    "@vitejs/plugin-vue": "^2.3.1",
    "sass": "^1.49.11",
    "typescript": "^4.6.3",
    "vite": "^2.9.1",
    "vue-tsc": "^0.33.9"
  },
  "files": [
    "package.json",
    "dist"
  ]
}

执行发布操作

npm login
npm publish --access public

组件发布完成
The end ..................................................