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)

相关推荐
GDAL7 小时前
npm入门教程1:npm简介
前端·npm·node.js
王解14 小时前
Jest项目实战(2): 项目开发与测试
前端·javascript·react.js·arcgis·typescript·单元测试
鸿蒙开天组●17 小时前
鸿蒙进阶篇-网格布局 Grid/GridItem(二)
前端·华为·typescript·harmonyos·grid·mate70
zhizhiqiuya17 小时前
第二章 TypeScript 函数详解
前端·javascript·typescript
乐迁~19 小时前
关于npm源的切换及相关操作
npm
初遇你时动了情1 天前
react 18 react-router-dom V6 路由传参的几种方式
react.js·typescript·react-router
王解1 天前
Jest进阶知识:深入测试 React Hooks-确保自定义逻辑的可靠性
前端·javascript·react.js·typescript·单元测试·前端框架
CherishTaoTao1 天前
Vue3 keep-alive核心源码的解析
前端·vue3
GDAL1 天前
npm入门教程13:npm workspace功能
前端·npm·node.js
wumu_Love1 天前
npm 和 node 总结
前端·npm·node.js