chore: plugin-qiankun的demo

packages/fes-plugin-qiankun/examples/app1/.eslintrc.js

@@ -1,14 +0,0 @@
-module.exports = {
-    extends: ['@webank/eslint-config-webank/vue.js'],
-    overrides: [
-        {
-            files: [
-                '**/__tests__/*.{j,t}s?(x)',
-                '**/tests/unit/**/*.spec.{j,t}s?(x)'
-            ]
-        }
-    ],
-    env: {
-        jest: true
-    }
-};

packages/fes-plugin-qiankun/examples/app1/.gitignore

@@ -1,11 +0,0 @@
-.DS_Store
-
-# dependencies
-/node_modules
-/coverage
-
-# fes
-/src/.fes
-/src/.fes-production
-/src/.fes-test
-/.env.local

packages/fes-plugin-qiankun/examples/app1/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2020-present webank
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

packages/fes-plugin-qiankun/examples/main/.eslintrc.js

@@ -1,14 +0,0 @@
-module.exports = {
-    extends: ['@webank/eslint-config-webank/vue.js'],
-    overrides: [
-        {
-            files: [
-                '**/__tests__/*.{j,t}s?(x)',
-                '**/tests/unit/**/*.spec.{j,t}s?(x)'
-            ]
-        }
-    ],
-    env: {
-        jest: true
-    }
-};

packages/fes-plugin-qiankun/examples/main/.gitignore

@@ -1,11 +0,0 @@
-.DS_Store
-
-# dependencies
-/node_modules
-/coverage
-
-# fes
-/src/.fes
-/src/.fes-production
-/src/.fes-test
-/.env.local

packages/fes-plugin-qiankun/examples/main/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2020-present webank
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

packages/fes-plugin-qiankun/examples/micro/.fes.js

@@ -1,6 +1,4 @@
 // .fes.js 只负责管理编译时配置，只能使用plain Object
-
-
 export default {
     qiankun: {
         micro: {}

packages/fes-plugin-qiankun/examples/micro/package.json

@@ -1,5 +1,5 @@
 {
-    "name": "app1",
+    "name": "micro",
     "version": "2.0.0",
     "description": "fes项目模版",
     "scripts": {

packages/fes-plugin-qiankun/examples/micro/src/app.js

@@ -1,4 +1,4 @@
-import PageLoading from '@/components/PageLoading';
+import PageLoading from '@/components/PageLoading.vue';
 
 export const beforeRender = {
     loading: <PageLoading />,
@@ -8,24 +8,24 @@ export const beforeRender = {
                 resolve();
             }, 200);
         });
-    }
+    },
 };
 
 export const qiankun = {
     // 应用加载之前
     async bootstrap(props) {
-        console.log('app1 bootstrap', props);
+        console.log('micro bootstrap', props);
     },
     // 应用 render 之前触发
     async mount(props) {
-        console.log('app1 mount', props);
+        console.log('micro mount', props);
     },
     // 当 props 更新时触发
     async update(props) {
-        console.log('app1 update', props);
+        console.log('micro update', props);
     },
     // 应用卸载之后触发
     async unmount(props) {
-        console.log('app1 unmount', props);
-    }
+        console.log('micro unmount', props);
+    },
 };

packages/fes-plugin-qiankun/examples/micro/src/components/PageLoading.vue

@@ -8,12 +8,11 @@ import { FSpin } from '@fesjs/fes-design';
 
 export default {
     components: {
-        FSpin
+        FSpin,
     },
     setup() {
-        return {
-        };
-    }
+        return {};
+    },
 };
 </script>
 <style>

packages/fes-plugin-qiankun/examples/micro/src/pages/micro/index.vue

@@ -1,7 +1,5 @@
 <template>
-    <div class="haizekuo">
-        app1 - index
-    </div>
+    <div class="haizekuo">micro - index</div>
 </template>
 <config>
 {
@@ -12,11 +10,9 @@
 <script>
 export default {
     setup() {
-        return {
-        };
-    }
+        return {};
+    },
 };
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>

packages/fes-plugin-qiankun/examples/micro/src/pages/micro/test.vue

@@ -1,7 +1,5 @@
 <template>
-    <div class="haizekuo">
-        app1 - test
-    </div>
+    <div class="haizekuo">micro - test</div>
 </template>
 <config>
 {
@@ -12,11 +10,9 @@
 <script>
 export default {
     setup() {
-        return {
-        };
-    }
+        return {};
+    },
 };
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>

packages/fes-plugin-qiankun/examples/vite-main/.fes.js

@@ -0,0 +1,44 @@
+// .fes.js 只负责管理编译时配置，只能使用plain Object
+
+
+export default {
+    access: {
+        roles: {
+            admin: ["*"]
+        }
+    },
+    layout: {
+        title: "Fes.js",
+        footer: 'Created by MumbleFE',
+        multiTabs: false,
+        navigation: 'mixin',
+        menus: [{
+            name: 'index',
+        }, {
+            title: "子应用",
+            children: [{
+                name: 'micro-index'
+            },{
+                name: 'micro-test'
+            }]
+        }]
+    },
+    qiankun: {
+        main: {
+            apps: [
+                {
+                    name: 'micro', // 唯一 id
+                    entry: '//localhost:8001', // html entry
+                    props: {}  // 传递给子应用的数据
+                }
+            ]
+        }
+    },
+    plugins: [
+        require.resolve('../../../fes-build-vite/lib'),
+        require.resolve('../../../fes-plugin-model/lib'),
+        require.resolve('../../../fes-plugin-layout/lib'),
+        require.resolve('../../../fes-plugin-access/lib'),
+        require.resolve('../../../fes-plugin-qiankun/lib'),
+    ]
+};

packages/fes-plugin-qiankun/examples/vite-main/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>
+        <%= title %>
+    </title>
+    <link rel="shortcut icon" type="image/x-icon" href="./logo.png">
+</head>
+
+<body>
+    <div id="<%= mountElementId %>"></div>
+</body>
+
+</html>

packages/fes-plugin-qiankun/examples/vite-main/package.json

@@ -44,7 +44,6 @@
     },
     "dependencies": {
         "@fesjs/fes": "^2.0.0",
-        "@fesjs/build-webpack": "^1.0.0",
         "vue": "^3.0.5",
         "@fesjs/fes-design": "^0.1.10"
     },

packages/fes-plugin-qiankun/examples/vite-main/src/app.jsx

@@ -1,5 +1,5 @@
 import { access as accessApi } from '@fesjs/fes';
-import PageLoading from '@/components/PageLoading';
+import PageLoading from '@/components/PageLoading.vue';
 
 export const beforeRender = {
     loading: <PageLoading />,
@@ -11,5 +11,5 @@ export const beforeRender = {
                 resolve();
             }, 1000);
         });
-    }
+    },
 };

packages/fes-plugin-qiankun/examples/vite-main/src/components/PageLoading.vue

@@ -8,12 +8,11 @@ import { FSpin } from '@fesjs/fes-design';
 
 export default {
     components: {
-        FSpin
+        FSpin,
     },
     setup() {
-        return {
-        };
-    }
+        return {};
+    },
 };
 </script>
 <style>

packages/fes-plugin-qiankun/examples/vite-main/src/pages/app1/index.vue

@@ -1,7 +1,7 @@
 <config>
 {
-    "name": "app1-index",
+    "name": "micro-index",
     "title": "子应用1-首页",
-    "microApp": "app1"
+    "microApp": "micro"
 }
 </config>

packages/fes-plugin-qiankun/examples/vite-main/src/pages/app1/test.vue

@@ -1,7 +1,7 @@
 <config>
 {
-    "name": "app1-test",
+    "name": "micro-test",
     "title": "子应用1-测试",
-    "microApp": "app1"
+    "microApp": "micro"
 }
 </config>

packages/fes-plugin-qiankun/examples/vite-main/src/pages/index.vue

@@ -3,14 +3,12 @@
         main
         <FTabs v-model="activeKey">
             <FTabPane name="Tab 1" value="1">
-                <MicroAppWithMemoHistory key="1" name="app1" url="/app1" />
+                <MicroAppWithMemoHistory key="1" name="micro" url="/micro" />
             </FTabPane>
             <FTabPane name="Tab 2" value="2">
-                <MicroAppWithMemoHistory key="2" name="app1" url="/app1/test" />
-            </FTabPane>
-            <FTabPane name="Tab 3" value="3">
-                Content of Tab Pane 3
+                <MicroAppWithMemoHistory key="2" name="micro" url="/micro/test" />
             </FTabPane>
+            <FTabPane name="Tab 3" value="3"> Content of Tab Pane 3 </FTabPane>
         </FTabs>
     </div>
 </template>
@@ -28,16 +26,16 @@ import { FTabPane, FTabs } from '@fesjs/fes-design';
 export default {
     components: { FTabs, FTabPane, MicroAppWithMemoHistory },
     setup() {
-        const url = ref('/app1/test');
+        const url = ref('/micro/test');
         onMounted(() => {
             setTimeout(() => {
-                url.value = '/app1';
+                url.value = '/micro';
             }, 3000);
         });
         return {
             activeKey: ref('1'),
-            url
+            url,
         };
-    }
+    },
 };
 </script>

packages/fes-plugin-qiankun/examples/webpack-main/.env

@@ -0,0 +1 @@
+PORT=8000

packages/fes-plugin-qiankun/examples/webpack-main/.fes.js

@@ -1,6 +1,4 @@
 // .fes.js 只负责管理编译时配置，只能使用plain Object
-
-
 export default {
     access: {
         roles: {
@@ -17,9 +15,9 @@ export default {
         }, {
             title: "子应用1",
             children: [{
-                name: 'app1-index'
+                name: 'micro-index'
             },{
-                name: 'app1-test'
+                name: 'micro-test'
             }]
         }]
     },
@@ -27,7 +25,7 @@ export default {
         main: {
             apps: [
                 {
-                    name: 'app1', // 唯一 id
+                    name: 'micro', // 唯一 id
                     entry: '//localhost:8001', // html entry
                     props: {}  // 传递给子应用的数据
                 }
@@ -35,6 +33,7 @@ export default {
         }
     },
     plugins: [
+        require.resolve('../../../fes-build-webpack/lib'),
         require.resolve('../../../fes-plugin-model/lib'),
         require.resolve('../../../fes-plugin-layout/lib'),
         require.resolve('../../../fes-plugin-access/lib'),

packages/fes-plugin-qiankun/examples/webpack-main/package.json

@@ -0,0 +1,51 @@
+{
+    "name": "main",
+    "version": "2.0.0",
+    "description": "fes项目模版",
+    "scripts": {
+        "build": "fes build",
+        "prod": "FES_ENV=prod fes build",
+        "analyze": "ANALYZE=1 fes build",
+        "dev": "fes dev",
+        "test": "fes test"
+    },
+    "keywords": [
+        "管理端",
+        "fes",
+        "fast",
+        "easy",
+        "strong"
+    ],
+    "files": [
+        ".eslintrc.js",
+        ".gitignore",
+        ".fes.js",
+        ".fes.prod.js",
+        "mock.js",
+        "package.json",
+        "README.md",
+        "tsconfig.json",
+        "/src",
+        "/config"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+        "directory": "packages/fes-template"
+    },
+    "author": "harrywan",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/WeBankFinTech/fes.js/issues"
+    },
+    "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@fesjs/fes": "^2.0.0",
+        "vue": "^3.0.5",
+        "@fesjs/fes-design": "^0.1.10"
+    },
+    "private": true
+}

packages/fes-plugin-qiankun/examples/webpack-main/src/app.jsx

@@ -0,0 +1,15 @@
+import { access as accessApi } from '@fesjs/fes';
+import PageLoading from '@/components/PageLoading.vue';
+
+export const beforeRender = {
+    loading: <PageLoading />,
+    action() {
+        const { setRole } = accessApi;
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                setRole('admin');
+                resolve();
+            }, 1000);
+        });
+    },
+};

packages/fes-plugin-qiankun/examples/webpack-main/src/components/PageLoading.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="page-loading">
+        <f-spin size="large" stroke="#5384ff" />
+    </div>
+</template>
+<script>
+import { FSpin } from '@fesjs/fes-design';
+
+export default {
+    components: {
+        FSpin,
+    },
+    setup() {
+        return {};
+    },
+};
+</script>
+<style>
+.page-loading {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+</style>

packages/fes-plugin-qiankun/examples/webpack-main/src/global.css

@@ -0,0 +1,3 @@
+html, body {
+    margin: 0;
+}

packages/fes-plugin-qiankun/examples/webpack-main/src/pages/index.vue

@@ -0,0 +1,41 @@
+<template>
+    <div>
+        main
+        <FTabs v-model="activeKey">
+            <FTabPane name="Tab 1" value="1">
+                <MicroAppWithMemoHistory key="1" name="micro" url="/micro" />
+            </FTabPane>
+            <FTabPane name="Tab 2" value="2">
+                <MicroAppWithMemoHistory key="2" name="micro" url="/micro/test" />
+            </FTabPane>
+            <FTabPane name="Tab 3" value="3"> Content of Tab Pane 3 </FTabPane>
+        </FTabs>
+    </div>
+</template>
+<config>
+{
+    "name": "index",
+    "title": "首页"
+}
+</config>
+<script>
+import { ref, onMounted } from 'vue';
+import { MicroAppWithMemoHistory } from '@fesjs/fes';
+import { FTabPane, FTabs } from '@fesjs/fes-design';
+
+export default {
+    components: { FTabs, FTabPane, MicroAppWithMemoHistory },
+    setup() {
+        const url = ref('/micro/test');
+        onMounted(() => {
+            setTimeout(() => {
+                url.value = '/micro';
+            }, 3000);
+        });
+        return {
+            activeKey: ref('1'),
+            url,
+        };
+    },
+};
+</script>

packages/fes-plugin-qiankun/examples/webpack-main/src/pages/micro/index.vue

@@ -0,0 +1,7 @@
+<config>
+{
+    "name": "micro-index",
+    "title": "子应用1-首页",
+    "microApp": "micro"
+}
+</config>

packages/fes-plugin-qiankun/examples/webpack-main/src/pages/micro/test.vue

@@ -0,0 +1,7 @@
+<config>
+{
+    "name": "micro-test",
+    "title": "子应用1-测试",
+    "microApp": "micro"
+}
+</config>

packages/fes-plugin-qiankun/examples/webpack-main/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "esnext",
+    "lib": ["esnext", "dom"],
+    "sourceMap": true,
+    "baseUrl": ".",
+    "jsx": "preserve",
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "experimentalDecorators": true,
+    "strict": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "@@/*": ["./src/.fes/*"]
+    }
+  },
+  "include": [
+    "src/**/*",
+    "tests/**/*",
+    "test/**/*",
+    "__test__/**/*",
+    "typings/**/*",
+    "config/**/*",
+    ".eslintrc.js",
+    ".stylelintrc.js",
+    ".prettierrc.js"
+  ],
+  "exclude": ["node_modules", "build", "dist", "scripts", "src/.fes/*", "webpack", "jest"]
+}

packages/fes-plugin-qiankun/package.json

@@ -8,8 +8,9 @@
   ],
   "scripts": {
     "start": "npm-run-all --parallel start:*",
-    "start:master": "cd ./examples/main && fes dev",
-    "start:app1": "cd ./examples/app1 && fes dev"
+    "start:vite-main": "cd ./examples/vite-main && fes dev",
+    "start:webpack-main": "cd ./examples/webpack-main && fes dev",
+    "start:micro": "cd ./examples/micro && fes dev"
   },
   "repository": {
     "type": "git",

packages/fes-plugin-qiankun/src/micro/index.js

@@ -19,6 +19,9 @@ export default function (api) {
         enableBy: () => isSlaveEnable(api),
     });
 
+    if (api.builder.isVite) {
+        // 处理
+    } else {
         api.modifyDefaultConfig((memo) => {
             const initialMicroOptions = {
                 devSourceMap: true,
@@ -117,7 +120,8 @@ export default function (api) {
 
         api.addEntryImports(() => ({
             source: `@@/${absLifecyclesPath}`,
-        specifier: '{ genMount as qiankun_genMount, genBootstrap as qiankun_genBootstrap, genUnmount as qiankun_genUnmount, genUpdate as qiankun_genUpdate  }',
+            specifier:
+                '{ genMount as qiankun_genMount, genBootstrap as qiankun_genBootstrap, genUnmount as qiankun_genUnmount, genUpdate as qiankun_genUpdate  }',
         }));
 
         api.addEntryCode(
@@ -133,3 +137,4 @@ if (!window.__POWERED_BY_QIANKUN__) {
     `,
         );
     }
+}