背景
自从决定全端引入 tdesign 体系后,小程序组件自然也不落下的采用。
在前端领域中,组件分为全局注册和按需引入注册。
全局注册所有组件,对项目来说有点多余,会有很多组件暂时用不着。较为推荐的是在需要的页面按需引入组件。
原生小程序按需引入组件,是在页面的 xxx_page.json 中定义 "{components: true, usingComponents: {组件: “组件代码源文件”}}",示例如下:
{
"navigationBarTitleText": "登录",
"usingComponents": {
"t-button": "/wxcomponents/tdesign-miniprogram/button/button"
}
}
问题
easycom 是否会考虑支持自动扫描 js 后缀的组件?tdesign 小程序组件是 js 后缀的。
如果所有的组件我们都要自己引入,是十分繁琐的一件事。
uniapp 有 easycom 的组件引入方式,故采用其为我们自动配置按需组件。
下方是 tdesign-miniprogram
的 easycom
配置。
解决
注意:
- step-item 无法通过t-(.*) 规则进行注册。所以需要单独引入规则。
- 如果有
tdesign-miniprogram
其他组件需要自行引入规则,请写在通用规则前面。
tdesign-miniprogram
组件资源需要保存在 /wxcomponents/
目录下。见小程序自定义组件支持
"easycom": {
"autoscan": true,
"custom": {
"^m-(.*)": "@/components/$1/$1",
"^mt-(.*)": "@/wxcomponents/tdesign-miniprogram/$1s/$1-item", // step-item
"^t-(.*)": "@/wxcomponents/tdesign-miniprogram/$1/$1"
}
}
npm 包
···
“easycom”: {
“autoscan”: true,
“custom”: {
“m-(.)”: “@/components/$1/$1”,
“mt-(.)”: “tdesign-miniprogram/$1s/$1-item”, // step-item
“t-(.*)”: “tdesign-miniprogram/$1/$1”
}
}
···