创建并基于vue3+vite的npm工具包

刘新洲
430 阅读3分钟

1. 创建vue3项目

> npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

> cd <your-project-name>
> npm install
> npm run dev

2. 创建组件

2.1首先，我们要在src目录下，创建一个package文件夹，

image.png

2.2在package文件夹下创建自己要写的组件.vue文件，

xxxx.vue

<template>
    <div>
        我是组件,你就放心用吧
        
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

3.导出组件

3.1在src目录下面创建index.js作为组件到处的入口

image.png

3.2使用vite构建文件编译

主要是build配置

import { fileURLToPath, URL } from 'node:url'

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

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.js'),
      name: 'UploadFile',
      fileName: (format) => `upload-file.${format}.js`
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

3.3修改package.json文件

主要是files ,main,module,exports

"files": [ "dist" ],

"main": "./dist/upload-file.umd.js",

"module": "./dist/upload-file.es.js",

"exports": { ".": { "import": "./dist/upload-file.es.js", "require": "./dist/upload-file.umd.js" } }

{
  "name": "npm-respion",
  "version": "0.0.0",
  "private": true,
  "files": [
    "dist"
  ],
  "main": "./dist/upload-file.umd.js",
  "module": "./dist/upload-file.es.js",
  "exports": {
    ".": {
      "import": "./dist/upload-file.es.js",
      "require": "./dist/upload-file.umd.js"
    }
  },
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "test:unit": "vitest",
    "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "pinia": "^2.1.3",
    "vue": "^3.3.4",
    "vue-router": "^4.2.2"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.2.0",
    "@tsconfig/node18": "^2.0.1",
    "@types/jsdom": "^21.1.1",
    "@types/node": "^18.16.17",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vitejs/plugin-vue-jsx": "^3.0.1",
    "@vue/eslint-config-prettier": "^7.1.0",
    "@vue/eslint-config-typescript": "^11.0.3",
    "@vue/test-utils": "^2.3.2",
    "@vue/tsconfig": "^0.4.0",
    "cypress": "^12.14.0",
    "eslint": "^8.39.0",
    "eslint-plugin-cypress": "^2.13.3",
    "eslint-plugin-vue": "^9.11.0",
    "jsdom": "^22.1.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.8.8",
    "start-server-and-test": "^2.0.0",
    "typescript": "~5.0.4",
    "vite": "^4.3.9",
    "vitest": "^0.32.0",
    "vue-tsc": "^1.6.5"
  }
}

3.4 打包文件

执行命令:npm run build 生成dist文件

image.png

4发布组件

4.1进入生成的dist文件夹

初始化dist文件 执行命令npm init -y

在dist文件下面生成package.json

{
  "name": "upload-file",
  "version": "1.0.0",
  "description": "",
  "main": "upload-file.es.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

4.2登陆npm仓库

执行命令 npm login

admin@XZA000421404 dist % npm login
npm notice Log in on https://registry.npmjs.org/
Username: liuxinzhou
Password: 
Email: (this IS public) liuxinzhoujob@126.com
Enter one-time password from your authenticator app: 11906321
Logged in as liuxinzhou on https://registry.npmjs.org/.
admin@XZA000421404 dist % npm publish

npm notice 
npm notice 📦  upload-file@1.0.0

执行发布命令 npm publish

admin@XZA000421404 dist % npm publish

npm notice 
npm notice 📦  upload-file-oss@1.0.0
npm notice === Tarball Contents === 
npm notice 4.3kB favicon.ico       
npm notice 238B  package.json      
npm notice 469B  upload-file.es.js 
npm notice 659B  upload-file.umd.js
npm notice === Tarball Details === 
npm notice name:          upload-file-oss                         
npm notice version:       1.0.0                                   
npm notice filename:      upload-file-oss-1.0.0.tgz               
npm notice package size:  1.9 kB                                  
npm notice unpacked size: 5.7 kB                                  
npm notice shasum:        e7dcd2a617fcf1a0631935f6663e1c6454c12d07
npm notice integrity:     sha512-kfHGjliPFFx3s[...]qZAMEYYKQti/w==
npm notice total files:   4                                       
npm notice 
+ upload-file-oss@1.0.0
admin@XZA000421404 dist %

5使用组件

在所要使用的项目安装本包

npm install upload-file-oss

avatar
文章
阅读
粉丝