【阿里低代码引擎实战】--- 自定义物料接入demo(内含npm发包详细步骤)
本文正在参加阿里低代码引擎征文活动
上一篇笔记记录了demo项目初始化以及在win10下安装WSL2.0，上篇指路：juejin.cn/post/733984...
这篇继续跟着官方文档，将自定义组件接入demo项目，但是官方文档比较简略，本文详细记录了过程中遇到问题与解决方法，以及使用npm发包的详细步骤。
一. 初始化物料
官方文档：lowcode-engine.cn/site/docs/g...
首先按照官方文档在WSL下进行init，我这里用的 cnpm：
kotlin
cnpm init @alilc/element your-material-demo初始化完成后，安装项目依赖，同样使用 cnpm：
css
cnpm i我这里在WSL下报错了，原因未知： 
于是我又在 powershell 下 cnpm i 安装依赖，安装完成；
二. 启动项目
cnpm run lowcode:dev 项目启动！...... 又报错了（如下图） ...... 
该报错找到了官方的 issue github.com/alibaba/low...，但人家是 pnpm 的安装报错，官方自己也说了主要支持 npm 和 cnpm，我这里用的就是 cnpm，不知道为什么也报同样的错误；
手动删除 node_modules ，使用 npm 重装依赖后，项目成功启动：
css
npm i --registry=https://registry.npmmirror.com/
三. 开发一个自己的物料
简单模仿低代码引擎官网，搞一个类似的卡片组件 CardComponent：
在 src/index.tsx 下开发自己的卡片组件代码：
src/index.scss 加一点点样式：
css
.CardComponent {
width: 440px;
height: 172px;
margin: 10px;
border-radius: 8px;
background-color: #F6F7F9;
padding: 18px 24px;
&:hover {
box-shadow: 0 8px 24px 0 rgba(0, 121, 242, 0.40);
border-radius: 8px;
cursor: pointer;
background-color: #0079F2;
.title {
color: #fff;
}
.content {
color: #fff;
}
}
.title {
font-size: 18px;
color: #1F1F1F;
line-height: 27px;
margin-bottom: 12px;
font-weight: bolder;
}
.content {
font-size: 14px;
color: #79889B;
line-height: 22px;
margin-bottom: 40px;
}
}在页面上把组件拖进来，在右边设置器里配置属性：
看一下效果：
查看页面 Schema 已经变了：
这里的 componentName 对应的是在 lowcode/card-component-demo/meta.ts 中的组件名称：
arduino
const MyMaterialDemoMeta: IPublicTypeComponentMetadata = {
"componentName": "CardComponentDemo",
"title": "CardComponentDemo",
...
}
const snippets: IPublicTypeSnippet[] = [
{
"title": "CardComponentDemo",
"screenshot": "",
"schema": {
"componentName": "CardComponentDemo",
"props": {}
}
}
];四. 构建发布物料
构建
修改 package.json ：
json
{
"name": "card-component-demo",
"version": "0.1.1",
"description": "card-component-demo",
...
}构建：
arduino
npm run lowcode:build --registry=https://registry.npmmirror.com/发布
这里的官方文档太简单了，npm发布需要一些前置条件，不满足就会导致发布失败；
首先检查自己的npm源，一定要是官方源 ：https://registry.npmjs.org/，因为是要发布到npm上，而不是什么淘宝源或其他源；
如果源不对，使用下面命令切换源：
arduino
npm config set registry https://registry.npmjs.org/其次使用 npm login 登录，如果不登录会发布失败，没有npm账号的先去官网注册：www.npmjs.com/signup
之后会跳转到网页要求你登录：
给注册邮箱发送验证码，注意查收
鉴权成功
用 npm whoami 命令验证下当前登录用户：
这时就可以愉快的用 npm publish 发布组件了：
发布成功后，注册邮箱也会收到成功邮件：
验证一下是否发布成功，https://unpkg.com/ 由于网络原因不稳定，也可以使用 https://www.jsdelivr.com/ ：
cdn.jsdelivr.net/npm/card-co...
五. 在demo中使用自定义物料
发布后可以在自己的组件项目里找到 build/lowcode/assets-prod.json ，重点关注 packages 和 components 的部分：
perl
{
"packages": [
{
"package": "card-component-demo",
"version": "0.1.1",
"library": "BizComp",
"urls": [
"https://unpkg.com/card-component-demo@0.1.1/build/lowcode/render/default/view.js",
"https://unpkg.com/card-component-demo@0.1.1/build/lowcode/render/default/view.css"
],
"editUrls": [
"https://unpkg.com/card-component-demo@0.1.1/build/lowcode/view.js",
"https://unpkg.com/card-component-demo@0.1.1/build/lowcode/view.css"
],
"advancedUrls": {
"default": [
"https://unpkg.com/card-component-demo@0.1.1/build/lowcode/render/default/view.js",
"https://unpkg.com/card-component-demo@0.1.1/build/lowcode/render/default/view.css"
]
},
"advancedEditUrls": {}
}
],
"components": [
{
"exportName": "CardComponentDemoMeta",
"npm": {
"package": "card-component-demo",
"version": "0.1.1"
},
"url": "https://unpkg.com/card-component-demo@0.1.1/build/lowcode/meta.js",
"urls": {
"default": "https://unpkg.com/card-component-demo@0.1.1/build/lowcode/meta.js"
},
"advancedUrls": {
"default": [
"https://unpkg.com/card-component-demo@0.1.1/build/lowcode/meta.js"
]
}
}
],
}分别将 packages 和 components 里的代码 merge 到 demo项目里的 assets.json 中，最好放到最后，防止因为资源加载顺序问题导致出现报错。
这时启动demo项目，自定义组件成功加载进来了，完成！
=========================================================== 以上为个人工作学习笔记总结，供学习参考交流，未经允许禁止转载或商用。
个人博客地址：joexu727.github.io/