Lowcode-Engine 导出应用的二次开发记录

近期开始对阿里巴巴的Lowcode-Engine进行一些调研工作，Lowcode-Engine能够导出Icejs研发框架的React项目。

我们对应用的要求有以下几个要求：

1. 能够支持webpack5
2. 能够作为微前端qiankun的子应用

支持webpack5

Lowcode-Engine是能够通过自定义插件定制导出产物的。默认的是导出Icejs 1.x版本的项目。

Icejs 1.x 版本有配置可以支持webpack5

Icejs 2.x 默认webpack5

Icejs 3.x 默认webpack5

尝试了Icejs 3.x，但是导出的项目启动不了，很多报错，所以切换回默认的Icejs 1.x版本，导出项目之后直接修改Icejs的版本。

新建build.config.js

module.exports = {
  define: {
    env: process.env.NODE_ENV,
  },
  entry:'src/app.js',
  outputDir:'dist',
  plugins: [
    [
      'build-plugin-fusion',
      {
        'themePackage': '@alifd/theme-design-pro'
      },
    ],
    [
      'build-plugin-moment-locales',
      {
        'locales': [
          'zh-cn'
        ]
      }
    ],
  ],
  moduleFederation: {
    name: 'react',
    filename: 'remote-entry-react.js',
    remotes: {
      demo: 'demo@//localhost:9989/remote-entry-demo.js',
    },
  },
  devPublicPath: '/',
  publicPath: '/',
};

可以看到，moduleFederation这个属性，在Icejs 2.x上就能够使用webpack5的Module Federation能力了。

作为qiankun子应用

github.com/alibaba/ice…

其实，Icejs 本身能够使用微前端，并且兼容qiankun，按照官方文档来就行。

添加插件 build-plugin-icestark

安装插件依赖：

npm i --save-dev build-plugin-icestark

在 build.json 里引入插件：

module.exports = {
  define: {
    env: process.env.NODE_ENV,
  },
  entry:'src/app.js',
  outputDir:'dist',
  plugins: [
    [
      'build-plugin-fusion',
      {
        'themePackage': '@alifd/theme-design-pro'
      },
    ],
    [      'build-plugin-moment-locales',      {        'locales': [          'zh-cn'        ]
      }
    ],
    // 注意这里
    ['build-plugin-icestark', {      'type': 'child',      'umd': true    }]
  ],
  moduleFederation: {
    name: 'react',
    filename: 'remote-entry-react.js',
    remotes: {
      demo: 'demo@//localhost:9989/remote-entry-demo.js',
    },
  },
  devPublicPath: '/',
  publicPath: '/',
};

应用入口改造

在应用入口 src/app.js 中配置微应用相关的信息：

import './public-path'
import { runApp } from 'ice';
import ReactDOM from 'react-dom';

const appConfig = {
  app: {
    rootId: 'ice-container',
  },
  router: {
    type: 'browser',
  },
};

function render(props) {
  const { container } = props;
  runApp(appConfig);
}

if (!window.__POWERED_BY_QIANKUN__) {
  render({});
}

export async function bootstrap() {
  console.log('[react16] react app bootstraped');
}

export async function mount(props) {
  console.log('[react16] props from main framework', props);
  render(props);
}

export async function unmount(props) {
  const { container } = props;
  ReactDOM.unmountComponentAtNode(container ? container.querySelector('#ice-container') : document.querySelector('#ice-container'));
}

基座正常按照qiankun文档配置即可，就能正常接入了。