│
│— 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，来禁用名称转换。
babel-plugin-import路径命名issue
业务系统使用时
全量导出默认导出全部组件
// 全量导出
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配置
module.exports = {
presets: ["@vue/app", ["@babel/preset-env", { "modules": false }]],
plugins: [
[
"import",
{
"libraryName": "jr-ui",
"style": (name) => {
return `${name}/style.css`;
}
}
] ]}
基础导出
import JRUI_base from "jr-ui/lib/base";
import "jr-ui/lib/base/index.css";
Vue.use(JRUI_base);
