微搭自定义组件开发流程填坑

创建组件库常规步骤:
参考 https://docs.cloudbase.net/lowcode/custom-components/quick-start/comps
https://cloud.tencent.com/document/product/1301/72177

常规执行命令:
npm install -g @cloudbase/cli
tcb login
tcb lowcode create (mydemo)
cd mydemo
npm install
tcb lowcode debug
tcb lowcode publish

问题及避坑:
1、文档建议@cloudbase/cli 安装失败时,将npm安装在非系统管理员目录或修改默认npm目录
初始时,node及npm是默认安装在系统管理员目录(C盘),过程中遇到了模块引用错误等问题,随即将node及npm重新安装到了非系统管理员目录,修改了npm的依赖包和缓存路径配置(nodejs\node_modules\npm\npmrc):
prefix=D:\Program Files\npm\node_modules
cache=D:\Program Files\npm\node_cache

并且相应修改了系统环境变量相应值:(此电脑\右键属性\高级系统设置\环境变量 - 用户变量|系统变量)
用户变量:Path里npm项改为D:\Program Files\npm,若无则新增;
系统变量:Path里npm项改为D:\Program Files\npm,若无则新增;新增NODE_PATH,值为D:\Program Files\npm\node_modules

修改后重启系统,清空cloudbase&tcb命令文件并重新安装@cloudbase/cli,否则上述设置无效,tcb命令不识别

注:最后发现,以上修改均无必要,只要以管理员身份执行命令行即可

2、nodejs版本问题
过程中遇到问题,以为是网传node版本问题,原本安装的v12,后来升到当时最新稳定版v18,问题都还在,又降到v16,可问题还是存在。
另一台电脑v12可以正常运行,到后来问题都解决后本机还是v16,猜测v18也没问题,和node版本没关系,待验证。

3、依赖项版本及配置
经过各种折腾后,拿到了微搭官方的自定义组件示例模板(https://github.com/TencentCloudBase/weda-custom-components),在本地可以正常运行示例模板。经对比,示例中的依赖项package.json和自己组件库里差别很大,其他配置文件也有大的出入,当把组件库改用示例的配置后,重新安装再运行,已基本正常。

4、不要使用*宝镜像
使用npm时可能会提示有多个依赖项严重缺失,但即使不修复也可以运行起来,但使用某宝镜像后,看似安装更齐全,但可能部分依赖版本滞后或阉割,导致运行错误。
yarn等还没验证过。

5、组件中的代码
小程序组件放在mp文件夹中,语法与微信小程序组件开发一致。
web端组件放在web文件夹中,es6模块语法。其中小程序组件在调试预览(web端预览)时,调用的web文件夹中文件,当代码中标签不识别或未引用相应插件时,在调试预览中将非正常显示。

tips:组件开发时,要做到代码健壮和充分解耦,尽量全场景预判,毕竟更新发布存在风险。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值