实现组件的全量打包(组件打包至一个文件夹,全局引入组件)
1. 在项目的跟目录下创建command文件夹,并在文件夹内创建build的JS文件
2. 在根目录下新建packages文件夹,做为打包入口文件夹;将components 文件夹下的组件文件都复制到packages文件夹中;将项目中用到的hooks、styles、utils文件夹也复制到packages文件夹;
3. 修改package下的index.ts文件夹引入SCCS文件
4. 修改package目录下的正确文件路径引用(因为文件是从component目录复制过来的)
5. 编辑build文件
6. 在package.json ,scripts中配置脚本
"build:components": "node ./command/build.js",
"lib": "npm run build:components"
7. 执行 npm run lib,会在根目录下新增lib文件夹,包含打包后的文件
8. 修改main.ts 的文件引用成打包后的文件
Typescript专属配置:package文件下新增 vue.d.ts
/// <reference types="vite/client" />
declare module '*.vue' {
import { DefineComponent } from 'vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const component: DefineComponent<{}, {}, any>
export default component
}
可能会报一下错误
解决方案:将build.js后缀改为build.cjs