configureWebpack: { // 入口文件 entry: getComponentEntries('src/components'), // 输出配置 output: { // 文件名称 filename: '[name]/index.js', // 输出依赖类型 libraryTarget: 'umd', // 库中被导出的项 libraryExport: 'default', // 引用时的依赖名 library: 'jr-ui', } }, css: { sourceMap: true, extract: { filename: '[name]/style.css' } }
function getComponentEntries(path) { let files = fs.readdirSync(resolve(path)); const componentEntries = files.reduce((fileObj, item) => { // 文件路径 const itemPath = join(path, item); // 在文件夹中 const isDir = fs.statSync(itemPath).isDirectory(); const [name, suffix] = item.split('.'); // 文件中的入口文件 if (isDir) { fileObj[upperCasetoLine(item)] = resolve(join(itemPath, 'index.js')) } // 文件夹外的入口文件 else if (suffix === "js") { fileObj[name] = resolve(`${itemPath}`); } return fileObj; }, {}); return componentEntries; }
项目中的组件目录为如下，配置将会将每个组件打包编译导出到 lib 中
components 组件文件目录 │ │— button │ │— button.vue button组件 │ └─ index.js button组件导出文件 │ │— input │ │— input.vue input组件 │ └─ index.js input组件导出文件 │ │— musicPlayer │ │— musicPlayer.vue musicPlayer组件 │ └─ index.js musicPlayer组件导出文件 │ │ base.js 基础组件的导出文件 └─ index.js 所有组件的导出文件 lib 编译后的文件目录 │ │— button │ │— style.css button组件依赖样式 │ └─ index.js button组件依赖文件 │ │— input │ │— style.css input组件依赖样式 │ └─ index.js input组件依赖文件 │ │— music-player │ │— style.css musicPlayer组件依赖样式 │ └─ index.js musicPlayer组件依赖文件 │ │— base │ │— style.css 基础组件依赖样式 │ └─ index.js 基础组件依赖文件 │ └─ index │— style.css 所有组件依赖样式 └─ index.js 所有组件依赖文件
获取组件全部入口时，对入口名称做驼峰转横杠处理 upperCasetoLine，是因为 babel-plugin-import 在按需引入时，如组件名称为驼峰命名，路径会转换为横杠分隔。
例如业务系统引入
import { MusicPlayer } from "jr-ui" // 转化为 var MusicPlayer = require('jr-ui/lib/music-player'); require('jr-ui/lib/music-player/style.css');
因为组件库命名约定，组件文件夹命名大小写并不以横杠隔开。但为了让 babel-plugin-import 正确运行，所以此处对每个文件的入口文件名称做了转换处理。
如不经过方法转换名称，也可以配置 babel.config.js 中的plugin-import配置 camel2DashComponentName 为 false，来禁用名称转换。
业务系统使用时
全量导出默认导出全部组件
// 全量导出 import JRUI from "jr-ui"; import "jr-ui/lib/index/index.css"; Vue.use(JRUI);
基础导出仅导出基础组件，如需要使用额外组件，需要安装 babel-plugin-import 插件且配置 babel.config.js 来完成导入语句的转换
npm i babel-plugin-import -D
业务系统——babel.config.js配置