📝 tutorial for subApp without bundler (#350)

umijs · Mar 29, 2020 · 4119f01 · 4119f01 · github-actions · Mar 29, 2020
1 parent 08043b9
commit 4119f01
Show file tree

Hide file tree

Showing 10 changed files with 164 additions and 0 deletions.
diff --git a/docs/faq/README.md b/docs/faq/README.md
@@ -136,3 +136,56 @@ In the future qiankun will provide a smarter way to make it automatically.
 Not compatible now, will be supported if enough user appeal for.
 
 If you have to support ie now actually, you could try to disable the `jsSandbox` to make your app work(but not guarantee correctly).
+
+## Does qiankun support the subApp without bundler?
+
+> Yes
+
+The only change is that we need to declare a script tag, to export the `lifecycles`
+
+example:
+
+1. declare entry script
+
+```diff
+<!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 style="display: flex; justify-content: center; align-items: center; height: 200px;">
+    Purehtml Example
+  </div>
+</body>
+
++ <script src="./entry.js" entry></script>
+</html>
+```
+
+2. export lifecycles in the entry
+
+```javascript
+(global => {
+  global['purehtml'] = {
+    bootstrap: () => {
+      console.log('purehtml bootstrap');
+      return Promise.resolve();
+    },
+    mount: () => {
+      console.log('purehtml mount');
+      return Promise.resolve();
+    },
+    unmount: () => {
+      console.log('purehtml unmount');
+      return Promise.resolve();
+    },
+  };
+})(window);
+```
+
+refer to the [purehtml examples](https://github.com/umijs/qiankun/tree/master/examples/purehtml)
+
+At the same time, [the subApp must support the CORS](/docs/faq/README.html#must-a-sub-app-asset-support-cors)
diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
@@ -91,6 +91,8 @@ export async function unmount() {
 
 As qiankun based on single-spa, you can find more documentation about the sub-application lifecycle [here](https://single-spa.js.org/docs/building-applications.html#registered-application-lifecycle).
 
+Refer to [example without bundler](/docs/faq/README.html#does-qiankun-support-the-subapp-without-bundler)
+
 ### 2. Config Sub App Bundler
 
 In addition to exposing the corresponding life-cycle hooks in the code, in order for the main application to correctly identify some of the information exposed by the sub-application, the sub-application bundler needs to add the following configuration:

diff --git a/docs/zh/faq/README.md b/docs/zh/faq/README.md
@@ -218,3 +218,56 @@ qiankun 2.0 版本将提供一种更智能的方式使其自动化。
 目前不兼容，如果有足够多的用户有[诉求](https://github.com/umijs/qiankun/issues/182)，我们会考虑加入这个特性。
 
 如果你现在就需要 ie 支持，你可以尝试关掉 `jsSandbox` 配置来让你的应用可以跑在 ie 下（但要承担关掉沙箱后子应用之间可能造成冲突的风险）。
+
+## 非 webpack 构建的子应用支持接入 qiankun 么？
+
+> 支持
+
+需要额外声明一个 `script`，用于 `export` 相对应的 `lifecycles`
+
+例如:
+
+1. 声明 entry 入口
+
+```diff
+<!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 style="display: flex; justify-content: center; align-items: center; height: 200px;">
+    Purehtml Example
+  </div>
+</body>
+
++ <script src="./entry.js" entry></script>
+</html>
+```
+
+2. 在 entry js 里声明 lifecycles
+
+```javascript
+(global => {
+  global['purehtml'] = {
+    bootstrap: () => {
+      console.log('purehtml bootstrap');
+      return Promise.resolve();
+    },
+    mount: () => {
+      console.log('purehtml mount');
+      return Promise.resolve();
+    },
+    unmount: () => {
+      console.log('purehtml unmount');
+      return Promise.resolve();
+    },
+  };
+})(window);
+```
+
+你也可以直接参照 examples 中 purehtml 部分的[代码](https://github.com/umijs/qiankun/tree/master/examples/purehtml)
+
+同时，你也需要开启相关资源的 CORS，具体请参照[此处](/docs/zh/faq/README.html#子应用静态资源一定要支持跨域吗)
diff --git a/docs/zh/guide/getting-started.md b/docs/zh/guide/getting-started.md
@@ -88,6 +88,8 @@ export async function unmount() {
 
 qiankun 基于 single-spa，所以你可以在[这里](https://single-spa.js.org/docs/building-applications.html#registered-application-lifecycle)找到更多关于子应用生命周期相关的文档说明。
 
+无 webpack 等构建工具的应用接入方式请见[这里](/docs/zh/faq/README.html#非-webpack-构建的应用支持接入-qiankun-么)
+
 ### 2. 配置子应用的打包工具
 
 除了代码中暴露出相应的生命周期钩子之外，为了让主应用能正确识别子应用暴露出来的一些信息，子应用的打包工具需要增加如下配置：

diff --git a/examples/main/index.html b/examples/main/index.html
@@ -19,6 +19,7 @@ <h1>QianKun</h1>
         <li onclick="push('/react15')">React15</li>
         <li onclick="push('/vue')">Vue</li>
         <li onclick="push('/angular9')">Angular9</li>
+        <li onclick="push('/purehtml')">Purehtml</li>
       </ul>
       <!-- 子应用  -->
       <main id="subapp-container"></main>

diff --git a/examples/main/index.js b/examples/main/index.js
@@ -49,6 +49,12 @@ registerMicroApps(
       render,
       activeRule: genActiveRule('/angular9'),
     },
+    {
+      name: 'purehtml',
+      entry: '//localhost:7104',
+      render,
+      activeRule: genActiveRule('/purehtml'),
+    },
   ],
   {
     beforeLoad: [

diff --git a/examples/purehtml/entry.js b/examples/purehtml/entry.js
@@ -0,0 +1,16 @@
+(global => {
+  global['purehtml'] = {
+    bootstrap: () => {
+      console.log('purehtml bootstrap');
+      return Promise.resolve();
+    },
+    mount: () => {
+      console.log('purehtml mount');
+      return Promise.resolve();
+    },
+    unmount: () => {
+      console.log('purehtml unmount');
+      return Promise.resolve();
+    },
+  };
+})(window);
diff --git a/examples/purehtml/index.html b/examples/purehtml/index.html
@@ -0,0 +1,14 @@
+<!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 style="display: flex; justify-content: center; align-items: center; height: 200px;">
+    Purehtml Example
+  </div>
+</body>
+<script src="./entry.js" entry></script>
+</html>
diff --git a/examples/purehtml/package.json b/examples/purehtml/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "purehtml",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.html",
+  "scripts": {
+    "start": "PORT=7104 http-server . --cors",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "http-server": "^0.12.1"
+  }
+}
diff --git a/package.json b/package.json
@@ -27,6 +27,8 @@
     "start:vue": "cd examples/vue && yarn start",
     "install:angular9": "cd examples/angular9 && yarn",
     "start:angular9": "cd examples/angular9 && yarn serve:qiankun",
+    "install:purehtml": "cd examples/purehtml && yarn",
+    "start:purehtml": "cd examples/purehtml && yarn start",
     "build": "father-build",
     "release": "np --no-cleanup --yolo --no-publish",
     "prepublishOnly": "yarn lint && yarn build",