Vite + Vue + TS

下一篇：[vite发布纯函数工具库](https://juejin.cn/post/7258100887218323516) # 一。新建项目 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模块会报错 ```ts // env.d.ts declare module "*.vue" { import { DefineComponent } from "vue" const component: DefineComponent<{}, {}, any> export default component } declare interface Window { Vue: any, } ``` ```json { "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 ```html Vite + Vue + TS

``` # 三。组件开发 1. 之前我们创建的 packages 目录，用来存放组件 2. 该目录下存放每个组件单独的开发目录，和一个 index.js 整合所有组件，并对外导出 3. 每个组件都应该归类于单独的目录下，包含其组件源码目录 src，和 index.js 便于外部引用 4. 这里以组件 el-button 为例，完整的 packages 目录结构如下： ![1689732394949.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/36cec2da91064ec1b7945ae69abea6a9~tplv-k3u1fbpfcp-watermark.image?) 5. el-button/src/index.vue 就是组件的入口文件 ```html ``` 5.el-button/index.ts 实现组件的导出 ```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 文件，实现组件的全局注册 ```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, } ``` # 四。本地导入组件测试 ```html ``` # 五。编写 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 如下： ```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： ```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`, }, }, }) ``` 2. 执行 pnpm run build 会生成 dist 文件夹，里面有以下几个文件： ![1689732501849.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/96a491c9bfcb41a994c0036bf06376d9~tplv-k3u1fbpfcp-watermark.image?) > 如果后缀是 .mjs 而不是 .es.js 那就在 lib里面加上 fileName: (format) => `gaode-echarts.${format}.js`, # 七.本地模拟 1. main.ts 引入样式文件'../dist/style.css' ```ts import { createApp } from 'vue' import './style.css' import App from './App.vue' import '../dist/style.css' createApp(App).mount('#app') ``` 2. 在app.vue导入dist中的组件 ```html ``` 3. 全局声明组件 * 先在main.ts中用use全局注册组件；// vue的use方法会自动调用包里面的install方法。然后我们又在install方法里面注册全局组件 ```ts 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中就不需要再引入了，直接使用 ```html ``` > 如果发现引入的组件没有样式，可能是忘了在 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官网中登录自己的账号查看是否发布成功 ![1689732568557.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4130eb240cd546fb801d067656ff6e8d~tplv-k3u1fbpfcp-watermark.image?) 5. 去弄一个demo项目来安装我们刚刚发布的依赖验证一下 > `npm install gaode-echarts` > 在 main.ts 引入并注册 ```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中使用 ```html ``` # 九。手动ts类型提示（可以跳过直接使用下一节的类型自动生成功能） > 需要一个xx.d.ts文件，把这包暴露出去的所有东西的类型都声明一下。然后在packege.json的types字段指向该文件 1. 新建types/index.d.ts类型声明文件 ![1689732631902.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ed66744142dd44e5afeeff4ab71da873~tplv-k3u1fbpfcp-watermark.image?) 2.把packages导出的所有东西的类型都声明一下 ![1689732652627.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b54092e942a545518518ae5ae5f6e343~tplv-k3u1fbpfcp-watermark.image?) ```ts /* * @FilePath: \gaode-echarts\types\index.d.ts */ /// /// 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文件夹，要不然发布之后这里的引入是失败的** 3. 在package.json中注明ts类型声明文件的入口 ![1689732698812.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f4b1c7d3c8a14291ae31e26cc3440101~tplv-k3u1fbpfcp-watermark.image?) # 十.类型自动生成 > 使用 vite-plugin-dts会自动把包导出的方法和对象对应的ts类型生成 .d.ts类型声明文件 ## 1. 安装 `pnpm i vite-plugin-dts -D` ## 2.使用 * 在` vite.config.ts`: ```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 ![1689732748601.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d237aa515a4d4419b056c54771d5750c~tplv-k3u1fbpfcp-watermark.image?) * 跑 npm run build 的时候dist中就会自动生成 index.d.ts文件 ![1689732788924.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d07e0bcfbee64f228ae01e1585272527~tplv-k3u1fbpfcp-watermark.image?) * 发布之后别人下载使用时就会有类型提示了 ![1689732821869.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d7fc2ce04a254573bc8aa90228c52879~tplv-k3u1fbpfcp-watermark.image?)