全部产品

前端构建产物标准

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

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

基于 `@alicloud/xconsole` 开发项目

@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() {}
});