在线示例 / DEMO

使用 / Usage

NPM

const { material } from '@alilc/lowcode-engine';
const assets = require('@alilc/lowcode-materials/dist/assets.json');

// in GeneralWorkbench init
material.setAssets(assets);

CDN

// in GeneralWorkbench init
const assets = await (await fetch(`https://alifd.alicdn.com/npm/@alilc/[email protected]/dist/assets.json`)).json();
material.setAssets(assets);

windows平台./tmp/view.js路径报错的问题解决

在npm install之后可以看到

\node_modules@alifd\build-plugin-lowcode\src\index.js是生成view.js的逻辑

如下代码:（注释那两行是需要修改的地方）

  { 
    ....
    // default 不一定存在，export { default } 不安全可能会报错
    componentViewsExportStr += `\nconst entryDefault = componentInstances.default;\nexport { entryDefault as default }`;
    componentViewsImportStr = _componentViews
      .map((component) => {
        const componentNameFolder = camel2KebabComponentName(component);
        let viewJsPath = path.resolve(rootDir, `${lowcodeDir}/${componentNameFolder}/view`); // const改为let
        viewJsPath = viewJsPath.replace(/\\/g, '\\\\'); // 修改成这样！！！！
        return `import * as ${component}Data from '${viewJsPath}'`;
      })
      .join('\n');
  }
  const scssEntry = getScssEntry(rootDir);
  const viewPath = generateEntry({
    template: 'view.js',
    filename: 'view.js',
    rootDir,
    params: {
      entryPath: getEntry(rootDir, entryPath),
      scssImport: scssEntry ? `import '${scssEntry}'` : '',
      componentViews,
      componentViewsExportStr,
      componentViewsImportStr,
      library,
      execCompile,
    },
  });

代码提交检查不过的问题

如果是阿里官方组件代码，建议在.eslintignore文件里添加相关组件代码所在目录的路径，这样处理风险最小

物料在平台本地环境的调试

第一步：启动物料的本地开发环境和平台的本地开发环境

第二步：复制或者替换如下package和component信息到平台的/services/assets.json文件中

// package, package,version信息与物料的packages.json保持一致,library与asset-dev.json保持一致
{
  "package": "sohu-lowcode-materials",
  "version": "1.2.3",
  "library": "SohuLowcodeMaterials",
  "urls": [
    "http://localhost:3333/build/lowcode/render/default/view.js",
    "http://localhost:3333/build/lowcode/render/default/view.css"
  ],
  "editUrls": [
    "http://localhost:3333/build/lowcode/render/default/view.js",
    "http://localhost:3333/build/lowcode/render/default/view.css"
  ],
  "advancedUrls": {
    "default": [
      "http://localhost:3333/build/lowcode/render/default/view.js",
      "http://localhost:3333/build/lowcode/render/default/view.css"
    ]
  },
  "advancedEditUrls": {}
},
// component, package,version信息与物料的packages.json保持一致,exportName与asset-dev.json保持一致
{
  "exportName": "SohuLowcodeMaterialsMeta",
  "npm": {
    "package": "sohu-lowcode-materials",
    "version": "1.2.3"
  },
  "url": "http://localhost:3333/build/lowcode/meta.js",
  "urls": {
    "default": "http://localhost:3333/build/lowcode/meta.js",
    "design": "http://localhost:3333/build/lowcode/meta.design.js"
  },
  "advancedUrls": {
    "default": [
      "http://localhost:3333/build/lowcode/meta.js"
    ],
    "design": [
      "http://localhost:3333/build/lowcode/meta.design.js"
    ]
  }
},