Umi4整合阿里低程式碼框架lowcode-engine實現

2022-08-12 14:03:55

前言

最近準備研究下阿里低程式碼框架lowcode-engine, 官方Demo是提供好的腳手架，由於我們的框架使用的是umi，官方檔案提供了一些教學，在此記錄下在umi4整合lowcode-engine.

實現

搭建umi4專案

1.通過官方檔案的快速開始，我們可以快速建立出專案

先找個地方建個空目錄

mkdir myapp && cd myapp

通過官方工具建立專案, 這裡我們採用pnpm包管理工具

$ pnpm dlx create-umi@latest
✔ Install the following package: create-umi? (Y/n) · true
✔ Pick Npm Client › pnpm
✔ Pick Npm Registry › taobao
Write: .gitignore
Write: .npmrc
Write: .umirc.ts
Copy:  layouts/index.tsx
Write: package.json
Copy:  pages/index.tsx
Copy:  pages/users.tsx
Copy:  pages/users/foo.tsx
> @ postinstall /private/tmp/sorrycc-vylwuW
> umi setup
info  - generate files

建立完成後，安裝依賴, 執行 pnpm dev就可以看到我們的專案啟動起來了。

整合lowcode-engine

引入UMD包, 我們在 .umirc.ts中設定externals,styles和scripts

 externals: {
    'react': 'var window.React',
    'react-dom': 'var window.ReactDOM',
    'prop-types': 'var window.PropTypes',
    '@alifd/next': 'var window.Next',
    '@alilc/lowcode-engine': 'var window.AliLowCodeEngine',
    '@alilc/lowcode-editor-core': 'var window.AliLowCodeEngine.common.editorCabin',
    '@alilc/lowcode-editor-skeleton': 'var window.AliLowCodeEngine.common.skeletonCabin',
    '@alilc/lowcode-designer': 'var window.AliLowCodeEngine.common.designerCabin',
    '@alilc/lowcode-engine-ext': 'var window.AliLowCodeEngineExt',
    '@ali/lowcode-engine': 'var window.AliLowCodeEngine',
    'moment': 'var window.moment',
    'lodash': 'var window._',
  },
  styles: [
    'https://alifd.alicdn.com/npm/@alilc/lowcode-engine@latest/dist/css/engine-core.css',
    'https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.css',
    'https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light/0.2.0/next.min.css',
    'https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@latest/dist/css/engine-ext.css'
  ],
  scripts: [
    {
      src: 'https://g.alicdn.com/code/lib/react/18.0.0/umd/react.development.js',
      defer: false,
    },
    {
      src: 'https://g.alicdn.com/code/lib/react-dom/18.0.0/umd/react-dom.development.js',
      defer: false,
    },
    {
      src: 'https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js',
      defer: false,
    },
    {
      src: 'https://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js',
      defer: false,
    },
    {
      src: 'https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js',
      defer: false,
    },
    {
      src: 'https://g.alicdn.com/code/lib/moment.js/2.29.1/moment-with-locales.min.js',
      defer: false,
    },
    {
      src: 'https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js',
      defer: false,
    },
    {
      src: 'https://alifd.alicdn.com/npm/@alilc/lowcode-engine@latest/dist/js/engine-core.js',
      defer: false,
    },
    {
      src: 'https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@latest/dist/js/engine-ext.js',
      defer: false,
    }

我們使用lowcode-enginey引擎提供的init進行初始化，init() 內部會呼叫 ReactDOM.render() 函數，這樣初始化有些弊端。一些內容沒有辦法與外部的 React 元件進行通訊，也就沒有辦法在一些自定義的 plugin 中獲取 redux 上的全域性資料等內容，但也有好處，就是低程式碼引擎比較獨立，後期可以拆出供多個專案使用。

我們參考官方提供的Demo的入口檔案。在我們這裡封裝成一個LowcodeEditor元件。

import { init, plugins } from '@alilc/lowcode-engine';
import { useEffect } from 'react';
import registerPlugins from './plugin';
import './global.less';
export default function LowcodeEditor() {
  useEffect(() => {
    const preference = new Map();
    preference.set('DataSourcePane', {
      importPlugins: [],
      dataSourceTypes: [
        {
          type: 'fetch',
        },
        {
          type: 'jsonp',
        },
      ],
    });
    (async function main() {
      await registerPlugins();
      console.log('first-2')
      init(
        document.getElementById('engine-container')!, {
          // designMode: 'live',
          // locale: 'zh-CN',
          enableCondition: true,
          enableCanvasLock: true,
          // 預設繫結變數
          supportVariableGlobally: true,
          // simulatorUrl 在當 engine-core.js 同一個父路徑下時是不需要設定的！！！
          // 這裡因為用的是 alifd cdn，在不同 npm 包，engine-core.js 和 react-simulator-renderer.js 是不同路徑
          simulatorUrl: [
            'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/css/react-simulator-renderer.css',
            'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/js/react-simulator-renderer.js',
          ],
          requestHandlersMap: {
            fetch: async () => {}
          }
        },
        preference,
      );
    })();
  }, []);
  return <div id='engine-container' style={{backgroundColor: 'red'}}></div>;
}

這裡只是入口元件的初始化，元件內部還有很多內容，我們重Deom中copy出來。比如plugin，assets.josn,schem.json等，這裡不做過多的介紹，裡面的內容好多，後續我們一邊學習，一邊慢慢拆解，分享。

使用LowcodeEditor元件，在我們需要的地方直接匯入，使用就行

import yayJpg from '../assets/yay.jpg';
import LowcodeEditor from '@/components/lowcode-editor2';
export default function HomePage() {
  return (
    <div style={{height: '100%'}}>
      <LowcodeEditor />
    </div>
  );
}

4.存取頁面

結束語

程式碼已上傳到github,請檢視mi4-lowcode-app。

以上就是Umi4整合阿里低程式碼框架lowcode-engine實現的詳細內容，更多關於Umi4整合lowcode-engine的資料請關注it145.com其它相關文章！

Umi4整合阿里低程式碼框架lowcode-engine實現

目錄

前言

實現

搭建umi4專案

整合lowcode-engine

結束語

熱門文章