Closed reaink closed 3 years ago
umm...我先去看看插件都做了啥
@zkwolf 按需引入,减少包大小
这个包好像不能把css加进来吧
这个包好像不能把css加进来吧
可以自己写引入时响应,带上./style就可以实现了
you can check this example here https://github.com/antfu/vite-plugin-components/blob/master/src/resolvers/element-plus.ts where the package imports style too
you can check this example here https://github.com/antfu/vite-plugin-components/blob/master/src/resolvers/element-plus.ts where the package imports style too
Key is MenuItem, MenuItemGroup, LayoutSider, LayoutHeader and other components are exported as subcomponents
if u config the sideEffects to load style on demand, u will still got the error message
// Import kebabCase for formatting
import ViteComponents, { kebabCase } from 'vite-plugin-components'
ViteComponents({
customComponentResolvers: [
(name) => {
if (name.match(/^A[A-Z]/)) { // Ant Design Vue
const importName = name.slice(1)
const dirName = kebabCase(importName) // e.g. date-picker
return {
importName,
path: 'ant-design-vue/es',
sideEffects: `ant-design-vue/es/${dirName}/style`,
}
}
}
]
})
@zkwolf any idea to share, appreciate
今天试了一下 naive完美支持, element我的自定义方法和官方的差不多,我没有引入sass,用css定义的,方法如下:
ViteComponents({
customComponentResolvers: [
// AntDesignVueResolver(),
// ElementPlusResolver(),
NaiveUiResolver(),
name => {
if (name.startsWith("El")) {
// Element UI
const partialName = kebabCase(name); //ElButton->el-button
return {
path: `element-plus/lib/${partialName}`,
sideEffects: `element-plus/lib/theme-chalk/${partialName}.css`,
};
} else if (name.match(/^A[A-Z]/)) {
//ant-design-vue
const importName = name.slice(1);
const dirName = kebabCase(importName);
const compName = pascalCase(importName); //AListItem->ListItem
const compPath = getCompPath(compName);
const sideEffects = [
{
path: `ant-design-vue/es/${compPath.styleDir}/style`,
},
];
if (compPath.sideEffects) {
sideEffects.push(compPath.sideEffects);
}
return {
path: `ant-design-vue/es/${compPath.dirName}/${compPath.compName}`,
sideEffects,
};
}
return null;
},
],
globalComponentsDeclaration: true,
}),
至于antd,写了一个getCompPath方法,用来生成子组件的导入的路径,发现有很多组件的书写方式不一致,有的是直接用vc-xxx,比如ListItem组件就直接是在list下的Item文件,比如
function getCompPath(
compName: string
): {
dirName: string;
compName: string;
styleDir: string;
importName?: string;
sideEffects?: ImportInfo;
} {
const hasSubComp = [
"Menu",
"Layout",
"Form",
"Table",
"Modal",
"Radio",
"Button",
"Checkbox",
"List",
"Collapse",
"Descriptions",
"Tabs",
"Mentions",
"Select",
"Anchor",
"Typography",
// "TreeSelect",
]; //包含子组件的组件
const keepSelf = [
"MenuItem",
"SubMenu",
"FormItem",
"RadioButton",
"CollapsePanel",
"TabPane",
"AnchorLink",
]; //保留原子组件名称
const keepFather = [
"LayoutHeader",
"LayoutContent",
"LayoutFooter",
"DescriptionsItem",
]; //需要使用父组件名称的子组件 LayoutFooter->'' 之所以转成空是因为最后拼接的结果是dirName+compName,避免重复
const rootName = hasSubComp.find((name: string) => compName.startsWith(name));
const usePrevLevelName = ["ListItemMeta"]; //使用当前组件的上一级名称 ListItemMeta->Item
const getPrevLevelName = () => {
const split = kebabCase(compName).split("-");
return pascalCase(split[split.length - 2]);
};
const fatherAlias = {
TabPane: "vc-tabs/src",
MentionsOption: "vc-mentions/src",
SelectOption: "vc-select",
TreeSelectNode: "vc-tree-select/src",
};
const compAlias = {
TreeSelectNode: "SelectNode",
};
const styleMap = {
TabPane: "tabs",
MentionsOption: "mentions",
SelectOption: "select",
TreeSelectNode: "tree-select",
};
// const importNameMap = {
// LayoutContent: "Content",
// LayoutHeader: "Header",
// LayoutFooter: "Footer",
// };
let dirName = rootName?.toLowerCase() ?? kebabCase(compName);
if (fatherAlias[compName]) {
dirName = fatherAlias[compName];
}
let compNameStr = "";
if (keepSelf.includes(compName)) {
compNameStr = compName;
} else if (keepFather.includes(compName)) {
compNameStr = "";
} else if (usePrevLevelName.includes(compName)) {
compNameStr = getPrevLevelName();
} else if (rootName) {
compNameStr = compName.replace(rootName, "");
}
const compRequired = {
TypographyTitle: "ant-design-vue/es/" + dirName + "/Base",
TypographyText: "ant-design-vue/es/" + dirName + "/Base",
};
return {
// importName: importNameMap[compName],
dirName: fatherAlias[compName] ?? dirName,
styleDir: `${styleMap[compName] ?? dirName}`,
compName: compAlias[compName] ?? compNameStr,
sideEffects: compRequired[compName]
? {
path: compRequired[compName],
}
: undefined,
};
}
未解决的组件:layout的Content,Header,Footer ,typography下的组件(有报错,baseProps 不是一个方法,不知为什么没有导入进来),List的ListItemMeta
感觉写的挺麻烦的,希望大佬们指点一下,提供一个更简洁优雅的解决方案
最后附上我的demo地址demo地址 分支是feat-on-demand
看了一下layout中的content,footer header没有export出去,希望可以export出来,这样应该就更容易导入了,react版是在layout.tsx 中export出来的
我们来支持下吧
This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days
This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
What problem does this feature solve?
issues: https://github.com/antfu/vite-plugin-components/issues/35
At present, MenuItem, MenuItemGroup and other components are exported as subcomponents, which does not support on-demand introduction
Need to be exported separately to support
What does the proposed API look like?
default