开发与适配
CloudBase CMS 基于 qiankun 实现了微应用加载能力,已有的项目经过简单的配置修改,即可适配为微应用。
同时,我们也提供了 Vue 和 React 的微应用开发模版,提供快速开发使用,你可以通过 CloudBase CLI 直接下载模版。
# 新建 React 微应用项目tcb new react-app cms-microapp-react
# 新建 Vue 微应用项目tcb new vue-app cms-microapp-vue
#
React 项目适配#
1. 路由适配设置 hash
模式路由的 basename
为 /project/microapp/${microAppID}/
,其中 ${microApp}
为你创建的微应用的 AppID
目前,CloudBase CMS 仅支持 hash
模式的路由
<HashRouter basename={`/project/microapp/${microAppID}/`}>
#
2. 入口修改修改 index.js
入口文件,为了避免根 id #root 与其他的 DOM 冲突,需要限制查找范围
import React from "react";import ReactDOM from "react-dom";import App from "./App";
function render(props) { const { container } = props; ReactDOM.render( <App />, container ? container.querySelector("#root") : document.querySelector("#root") );}
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("#root") : document.querySelector("#root") );}
#
3. 构建配置修改修改 Webpack 配置,需要修改 output
配置以及 publicPath
为 /cloudbase-cms/apps/${microAppID}/
,其中 ${microApp}
为你创建的微应用的 AppID
// 微应用 APPIDconst microAppID = "reactApp";
module.exports = { webpack: (config) => { // 微应用的包名,这里与主应用中注册的微应用名称一致 config.output.library = `${microAppID}`; // 将你的 library 暴露为所有的模块定义下都可运行的方式 config.output.libraryTarget = "umd"; // 按需加载相关,设置为 webpackJsonp_react-project 即可 config.output.jsonpFunction = `webpackJsonp_${microAppID}`;
// 修改 publicPath if (process.env.NODE_ENV === "production") { config.output.publicPath = `/cloudbase-cms/apps/${microAppID}/`; } return config; }};
#
Vue 项目适配以 Vue CLI 生成的 Vue 2.x 项目为例
#
1. 入口文件修改入口文件 main.js
修改,为了避免根 id #app 与其他的 DOM 冲突,需要限制查找范围
import Vue from "vue";import App from "./App.vue";
Vue.config.productionTip = false;
let instance = null;const isDev = process.env.NODE_ENV === "development";
function render(props = {}) { const { container } = props;
instance = new Vue({ render: (h) => h(App) }).$mount(container ? container.querySelector("#app") : "#app");}
// 独立运行时if (isDev || !window.__POWERED_BY_QIANKUN__) { render();}
export async function bootstrap() { console.log("[vue] vue app bootstraped");}
export async function mount(props) { console.log("[vue] props from main framework", props); render(props);}
export async function unmount() { instance.$destroy(); instance.$el.innerHTML = ""; instance = null;}
#
2. 构建配置修改打包配置修改(vue.config.js
),修改 output
配置,以及设置publicPath
为 /cloudbase-cms/apps/${microAppID}/
,其中 ${microApp}
为你创建的微应用的 AppID
// CMS 微应用 APPIDconst microAppID = "vueApp";const isDev = process.env.NODE_ENV === "development";
module.exports = { publicPath: isDev ? "/" : `/cloudbase-cms/apps/${microAppID}/`, devServer: { headers: { "Access-Control-Allow-Origin": "*" } }, configureWebpack: { output: { library: `${microAppID}`, libraryTarget: "umd", // 把微应用打包成 umd 库格式 jsonpFunction: `webpackJsonp_${microAppID}` } }};
注意,由于 Vue Hash 模式的问题,目前 CloudBase CMS 微应用还无法支持 Vue 路由的使用
#
非 Webpack 构建的微应用一些非 webpack 构建的项目,例如 jQuery 项目、jsp 项目,都可以按照这个处理。
接入之前请确保你的项目里的图片、音视频等资源能正常加载,如果这些资源的地址都是完整路径(例如 https://docs.cloudbase.net/logo.png
),则没问题。如果都是相对路径,需要先将这些资源上传到服务器,使用完整路径。
接入非常简单,只需要额外声明一个 script,用于 export 相对应的 lifecycles。例如:
#
1. 声明 entry 入口<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Purehtml Example</title> </head> <body> <div>Purehtml Example</div> </body> <script src="//yourhost/entry.js" entry></script></html>
entry.js
里声明 lifecycles
#
2. 在 const render = ($) => { $("#purehtml-container").html("Hello, render with jQuery"); return Promise.resolve();};
((global) => { global["purehtml"] = { bootstrap: () => { console.log("purehtml bootstrap"); return Promise.resolve(); }, mount: () => { console.log("purehtml mount"); return render($); }, unmount: () => { console.log("purehtml unmount"); return Promise.resolve(); } };})(window);