前端构建产物标准

在完成项目的开发后，需要对前端项目进行构建打包， 以生成能提供给线上运行的静态资源文件。

构建打包会通过应用开发平台的构建服务进行，因此，在构建前，请确保前端应用已按照构建要求完成准备。

@alicloud/xconsole 默认提供的打包构建能力已支持产出标准构建产物，无需用户做调整。

对于非 @alicloud/xconsole 开发的项目, 需要对入口文件初始化代码逻辑稍加改造, 具体如下：

Angular

// 引入一个 portal 包
import { boostrap } from '@alicloud/console-os-ng-portal';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { AppModule } from './app/app.module';

// 修改一下入口写法并 export
export default boostrap({
  bootstrapFunction: props => {
    return platformBrowserDynamic().bootstrapModule(AppModule);
  },
  template: '<app-root />',
  Router,
  NgZone: NgZone,
});

React

// 引入一个 portal 包
import React from 'react';
import { mount }  from '@alicloud/console-os-react-portal';
import App from './app';

// 修改一下入口写法并 export
export default mount(
  (props) => <App {...props} />,
  document.getElementById('app')
);

VUE

// 引入一个 portal 包
import { mount } from '@alicloud/console-os-vue-portal';
import App from './App.vue';

// 修改一下入口写法并 export
export default mount({
  el: '#app',
  i18n,
  router,
  store,
  render: h => h(App),
  created() {}
});