阿里巴巴低代码引擎————自定义物料并发布

砺能2025-03-26 10:17

物料开发

项目初始化

1.lowcode官方给我们提供了脚手架,我们通过脚手架可以快速创建

js 复制代码

npm init @alilc/element lowcode-app-material // lowcode-app-material项目名称

2.我们选择物料【组件/物料】类型,包的模式选择react-组件库,因为这里我们要存放多个组件。

3.安装依赖

js 复制代码

cnpm install

4.启动调试环境

js 复制代码

npm run lowcode:dev

5.开发自己的组件

6.发布组件

package.json 文件中修改配置

js 复制代码

{
    ...
    "name": "@lineng/my-lowcode-app-material", // 举个例子;
    "version": "0.1.2", // 每次发布记得调整;
    "private": false,
    ...
    "publishconfig": {
        "access": "public",
        "registry": "https://registry.npmjs.org/"
    },
    ...
}

js 复制代码

npm run lowcode:build --registry=https://registry.npmmirror.com/   // 构建;

npm config set registry https://registry.npmjs.org/    // 如果源不对，使用该命令切换源;

npm publish --access=public   // 发布;

7.在引擎中使用我们自己的组件

src --> services --> assets.json

发布后可以在自己的自定义物料组件项目里找到 build/lowcode/assets-prod.json ，重点关注 packages 和 components 的部分：

js 复制代码

{
    "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 中，最好放到最后，防止因为资源加载顺序问题导致出现报错。

启动引擎项目，自定义组件即可成功加载进来。

拓展

阿里低代码框架 lowcode-engine 之自定义物料篇
 阿里低代码引擎实战】--- 自定义物料接入demo(内含npm发包详细步骤)\