解析ElementPlus打包源码（五、copyFiles）

还有最后一个copyFiles，虽然有点水，还是记录下

copyTypesDefinitions 我们之前打包类型已经写过。这里我们只看copyFiles

less 复制代码

export const copyFiles = () =>
  Promise.all([
    copyFile(epPackage, path.join(epOutput, 'package.json')),
    copyFile(
      path.resolve(projRoot, 'README.md'),
      path.resolve(epOutput, 'README.md')
    ),
    copyFile(
      path.resolve(projRoot, 'typings', 'global.d.ts'),
      path.resolve(epOutput, 'global.d.ts')
    ),
  ])

这里复制了三个文件

`packages/element-plus/package.json`

packages/element-plus/package.json这个文件复制到打包后的项目下当作打包后的package.json

package.json里面涉及了一些package.json的基础信息，例如：

json 复制代码

{
  "name": "element-plus",        // 包名，安装时使用 npm install element-plus
  "version": "0.0.0-dev.1",     // 版本号
  "description": "A Component Library for Vue 3", // 包的描述
  "keywords": ["element-plus", "vue", ...], // 关键词，方便 npm 搜索
  "homepage": "https://element-plus.org/", // 官网地址
  "bugs": { "url": "..." },      // 问题反馈地址
  "license": "MIT",              // 开源协议
  "repository": { ... }         // 代码仓库地址
  "publishConfig": { ... }    // 发布配置：`access: public` 表示该包是公开发布的（npm 私有包需付费，此配置确保包公开可访问）
}

还有一些模块导出规则的信息，main/module/types这三个是早期 npm 包的 "基础配置"，只能定义 "根路径" 的单一入口，无法精细化控制子路径，现在的exports优先级更高

json 复制代码

"main": "lib/index.js",
"module": "es/index.mjs",
"types": "es/index.d.ts",

perl 复制代码

"exports": {
  // 1. 根路径引入：import 'element-plus' / require('element-plus')
  ".": {
    "types": "./es/index.d.ts",  // TS 类型文件（优先匹配）
    "import": "./es/index.mjs",  // ESM 引入（import 语法）加载 es 目录的 mjs 文件（ESM 模块）
    "require": "./lib/index.js"  // CommonJS 引入（require 语法）加载 lib 目录的 js 文件（CJS 模块）
  },
  // 2. 全局类型引入：import 'element-plus/global'
  "./global": {
    "types": "./global.d.ts"     // 仅导出全局类型（无 js 代码，用于全局类型声明）
  },
  // 3. 直接引入 es 目录：import 'element-plus/es'
  "./es": {
    "types": "./es/index.d.ts",
    "import": "./es/index.mjs"   // 仅支持 ESM 引入（es 目录只存 ESM 模块）
  },
  // 4. 直接引入 lib 目录：require('element-plus/lib')
  "./lib": {
    "types": "./lib/index.d.ts",
    "require": "./lib/index.js"  // 仅支持 CommonJS 引入（lib 目录只存 CJS 模块）
  },
  // 5. 按需引入 es 目录下的 mjs 文件：import 'element-plus/es/button.mjs'
  "./es/*.mjs": {
    "types": "./es/*.d.ts",      // 匹配对应 ts 类型文件（如 button.d.ts）
    "import": "./es/*.mjs"       // 加载对应 mjs 文件（ESM 按需引入）
  },
  // 6. 按需引入 es 目录下的模块：import 'element-plus/es/button'（无后缀）
  "./es/*": {
    "types": ["./es/*.d.ts", "./es/*/index.d.ts"], // 类型匹配优先级：先找 button.d.ts，再找 button/index.d.ts
    "import": "./es/*.mjs"       // 自动补全 mjs 后缀，适配开发者省略后缀的习惯
  },
  // 7. 按需引入 lib 目录下的 js 文件：require('element-plus/lib/button.js')
  "./lib/*.js": {
    "types": "./lib/*.d.ts",
    "require": "./lib/*.js"      // CJS 按需引入（带后缀）
  },
  // 8. 按需引入 lib 目录下的模块：require('element-plus/lib/button')（无后缀）
  "./lib/*": {
    "types": ["./lib/*.d.ts", "./lib/*/index.d.ts"], // 类型匹配规则同 es 目录
    "require": "./lib/*.js"      // 自动补全 js 后缀
  },
  // 9. 兜底规则：匹配所有未定义的路径（如 import 'element-plus/package.json'）
  "./*": "./*"
}

package.json中还有相关的peerDependencies（要求项目中安装符合版本的依赖，否则会进行提醒）、dependencies、devDependencies

还有其他的相关配置可自行查看文档

`README.md`

根路径下的README文档，复制到打包后的包中

`global.d.ts`

这个文件就是Element Plus 的全局 TypeScript 类型声明文件

主要就是全局引入组件的时候，方便通过引入这个类型文件，在整个项目中都有提示

可见文档说明 ElementPlus快速开始