基于ElmentUI-Plus组件库项目打包过程(一):全量打包

63 阅读1分钟

实现组件的全量打包(组件打包至一个文件夹,全局引入组件)

1. 在项目的跟目录下创建command文件夹,并在文件夹内创建build的JS文件

20230305112935.png

2. 在根目录下新建packages文件夹,做为打包入口文件夹;将components 文件夹下的组件文件都复制到packages文件夹中;将项目中用到的hooks、styles、utils文件夹也复制到packages文件夹;

20230305120537.png

3. 修改package下的index.ts文件夹引入SCCS文件

20230305121131.png

4. 修改package目录下的正确文件路径引用(因为文件是从component目录复制过来的)

20230305122328.png

5. 编辑build文件

20230305113659.png

6. 在package.json ,scripts中配置脚本

    "build:components": "node ./command/build.js",
    "lib": "npm run build:components"

7. 执行 npm run lib,会在根目录下新增lib文件夹,包含打包后的文件

20230305160150.png

8. 修改main.ts 的文件引用成打包后的文件

20230305161018.png

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
}

可能会报一下错误

20230305154013.png

解决方案:将build.js后缀改为build.cjs