vue3+ts+vite自定义组件上传npm流程

1. 创建项目

npm create vite

这里踩坑点：

运行vite生成的vue项目时报错"SyntaxError: Unexpected token '??=' at " 是因为node版本过低

电脑为windows11系统，我当时使用的版本node版本是14.21.3，如下图，后边安装了nvm版本管理，现在使用的node版本为16.20.1，运行项目正常

2.写组件

这里为个人组件内容

breadcrumb/index.ts

TypeScript 复制代码

import type {App} from 'vue'
import Breadcrumb from './Breadcrumb.vue';
Breadcrumb.install=(app:App)=>{
    app.component(Breadcrumb.__name as string,Breadcrumb);
}
export default Breadcrumb;

index.ts

TypeScript 复制代码

import type {App} from 'vue'
import Breadcrumb from './breadcrumb'

const components=[
    Breadcrumb
];

const install=(app:App):void=>{
    components.forEach(component=> app.component(component.__name as string,component))
}
export {
    Breadcrumb
}

const viteVueNode={install};
export default viteVueNode

3.vite.config.ts配置

TypeScript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path';
export default defineConfig({
  plugins: [vue()],
  css:{
    preprocessorOptions:{
      less:{

      }
    }
  },
  build:{
    lib:{
      entry:resolve(__dirname,'packages/index.ts'),
      name:'ViteVueNode',
      fileName:'vite-vue-node',
    },
    rollupOptions:{
      external:['vue'],
      output:{
        format:'umd',
        exports:'named',
        globals:{
          vue:'Vue'
        },
      },
    },
    minify:'terser',
    terserOptions: {
      compress: {
        drop_console: true, // 生产环境下去除console
        drop_debugger: true, // 生产环境下去除debugger
      }
    }
  },
})

4.package.json配置

TypeScript 复制代码

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "files": [
    "dist"
  ],
  "scripts": {
    "dev": "vite",
    "build": "npm run build-only  && vue-tsc --emitDeclarationOnly && npm run config && npm run publish ",
    "config": "node ./config/index.ts",
    "build-only": "vite build",
    "types": "vue-tsc ",
    "preview": "vite preview",
    "publish":"cd dist && npm publish"
  },
  "dependencies": {
    "vue": "^3.3.11"
  },
  "devDependencies": {
    "@types/node": "^20.10.5",
    "@vitejs/plugin-vue": "^4.5.2",
    "less": "^4.2.0",
    "npm-run-all": "^4.1.5",
    "terser": "^5.26.0",
    "typescript": "^5.2.2",
    "vite": "^5.0.8",
    "vue-tsc": "^1.8.25"
  }
}

5.tsconfig.json中配置

TypeScript 复制代码

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": false,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "jsx": "preserve",
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "declaration": true,
    "outDir": "dist",
    // "outFile":"dist/vite-vue-node.d.ts"  整合到一个声明文件中
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue","packages/*.ts"],
  "references": [{ "path": "./tsconfig.node.json" }],
  "exclude": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue","packages/**/*.vue"],
}

6.config文件内容

config文件是为了在dist中添加readme.md和package.json

config/index.ts文件

TypeScript 复制代码

const fs=require("fs");
const path=require("path")
function mkPackageJson(){
    var templatePath = path.resolve(__dirname, './package.json');
    var needPath=path.resolve(__dirname, '../dist/package.json');
    var isExistCopyFile=fs.existsSync(needPath);
    if(!isExistCopyFile){
        fs.copyFileSync(templatePath,needPath);
    }
}
function mkReadMe(){
    var templatePath = path.resolve(__dirname, './README.md');
    var needPath=path.resolve(__dirname, '../dist/README.md');
    var isExistCopyFile=fs.existsSync(needPath);
    if(!isExistCopyFile){
        fs.copyFileSync(templatePath,needPath);
    }
}
mkPackageJson();
mkReadMe();

最后运行 npm run build 执行构建

npm run build 中做的主要是vite构建、tsc自动生成声明文件、npm publish上传包（前提你有npm账号并且npm login）