【阿里低代码引擎实战】— 自定义物料接入demo(内含npm发包详细步骤)

【阿里低代码引擎实战】--- 自定义物料接入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/

unpkg.com/card-compon...

cdn.jsdelivr.net/npm/card-co...

五. 在demo中使用自定义物料

发布后可以在自己的组件项目里找到 build/lowcode/assets-prod.json ,重点关注 packagescomponents 的部分:

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"
        ]
      }
    }
  ],
}

分别将 packagescomponents 里的代码 merge 到 demo项目里的 assets.json 中,最好放到最后,防止因为资源加载顺序问题导致出现报错。

这时启动demo项目,自定义组件成功加载进来了,完成!

=========================================================== 以上为个人工作学习笔记总结,供学习参考交流,未经允许禁止转载或商用。

个人博客地址:joexu727.github.io/

相关推荐
速易达网络4 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
低代码布道师1 天前
低代码实战训练营教学大纲 (10天)
低代码
NocoBase1 天前
为什么越来越多 Airtable 用户开始尝试 NocoBase?
低代码·开源·资讯
NocoBase12 天前
Airtable 的数据超出上限,3 种常见应对方式
低代码·开源·资讯
踩着两条虫12 天前
AI + 低代码 技术揭秘(十八):集成指南
低代码·ai编程
得帆云低代码13 天前
当得帆低代码遇上Cursor:30分钟实现智能数据分析组件
低代码·ai编程·cursor
踩着两条虫13 天前
AI + 低代码 技术揭秘(十六):开始
低代码·ai编程
gnip15 天前
低代码平台自定义组件实现思路
前端·低代码
葡萄城技术团队16 天前
低代码技术实战:从 0 到 1 构建高效业务流程应用
低代码
踩着两条虫17 天前
AI + 低代码 技术揭秘(十):平台实施
低代码·ai编程