feat: 添加h5模版

2025-04-05 19:41:57 +08:00 · 2020-12-22 19:38:50 +08:00 · 2020-12-22 19:38:50 +08:00 · fbdf5cd701
commit fbdf5cd701
parent 97c7739d02
15 changed files with 327 additions and 17 deletions
--- a/packages/fes-preset-built-in/README.md
+++ b/packages/fes-preset-built-in/README.md
@ -0,0 +1,5 @@
+# 内置插件
+
+## TODO
+
+* 查看构建产物，保证 chunk 不使用数字 id (记得高版本 webpack 有解决这个问题)
--- a/packages/fes-preset-built-in/package.json
+++ b/packages/fes-preset-built-in/package.json
@ -24,11 +24,13 @@
    "access": "public"
  },
  "dependencies": {
+    "express": "4.17.1",
    "@umijs/utils": "^3.2.24",
    "@umijs/bundler-webpack": "^3.2.23",
    "@umijs/server": "^3.2.23",
-    "@vue/babel-plugin-jsx": "^1.0.0-rc.3",
+    "@vue/babel-plugin-jsx": "^1.0.0-rc.5",
    "@vue/compiler-sfc": "^3.0.4",
+    "@vue/preload-webpack-plugin": "1.1.2",
    "@webank/fes-core": "^2.0.0",
    "cliui": "6.0.0",
    "vue-loader": "^16.1.2",
--- a/packages/fes-preset-built-in/src/plugins/features/html.js
+++ b/packages/fes-preset-built-in/src/plugins/features/html.js
@ -3,7 +3,7 @@ import { existsSync } from 'fs';

 export default (api) => {
    api.describe({
-        key: 'vueLoader',
+        key: 'html',
        config: {
            schema(joi) {
                return joi
@ -11,6 +11,9 @@ export default (api) => {
                    .description(
                        'more vue-loader options see https://vue-loader.vuejs.org/',
                    );
+            },
+            default: {
+                options: {}
            }
        }
    });
@ -18,7 +21,6 @@ export default (api) => {
    api.chainWebpack((webpackConfig) => {
        const isProd = api.env === 'production';
        const htmlOptions = {
-            title: api.service.pkg.name,
            templateParameters: (compilation, assets, pluginOptions) => {
                // enhance html-webpack-plugin's built in template params
                let stats;
@ -34,7 +36,7 @@ export default (api) => {
                        files: assets,
                        options: pluginOptions
                    }
-                }, api.config.html);
+                }, api.config.html.options);
            }
        };

@ -52,15 +54,48 @@ export default (api) => {
            });
        }

-        // resolve HTML file(s)
+        const HTMLPlugin = require('html-webpack-plugin');
+        const PreloadPlugin = require('@vue/preload-webpack-plugin');
+        const multiPageConfig = api.config.html.pages;
        const htmlPath = join(api.paths.cwd, 'public/index.html');
        const defaultHtmlPath = resolve(__dirname, 'index-default.html');
-        htmlOptions.template = existsSync(htmlPath)
-            ? htmlPath
-            : defaultHtmlPath;
+        const publicCopyIgnore = ['.DS_Store'];

-        webpackConfig
-            .plugin('html')
-            .use(require('html-webpack-plugin'), [htmlOptions]);
+        if (!multiPageConfig) {
+            // default, single page setup.
+            htmlOptions.template = existsSync(htmlPath)
+                ? htmlPath
+                : defaultHtmlPath;
+
+            publicCopyIgnore.push({
+                glob: htmlOptions.template,
+                matchBase: false
+            });
+
+            webpackConfig
+                .plugin('html')
+                .use(HTMLPlugin, [htmlOptions]);
+
+            // TODO onlyHtml 将资源注入 html 中的逻辑
+            if (!htmlOptions.onlyHtml) {
+                // inject preload/prefetch to HTML
+                webpackConfig
+                    .plugin('preload')
+                    .use(PreloadPlugin, [{
+                        rel: 'preload',
+                        include: 'initial',
+                        fileBlacklist: [/\.map$/, /hot-update\.js$/]
+                    }]);
+
+                webpackConfig
+                    .plugin('prefetch')
+                    .use(PreloadPlugin, [{
+                        rel: 'prefetch',
+                        include: 'asyncChunks'
+                    }]);
+            }
+        } else {
+            // TODO 支持多页
+        }
    });
 };
--- a/packages/fes-template-h5/.fes.js
+++ b/packages/fes-template-h5/.fes.js
@ -0,0 +1,18 @@
+// fes.config.js 只负责管理 cli 相关的配置
+
+
+export default {
+    access: {
+        roles: {
+            admin: ["/"]
+        }
+    },
+    layout: {
+        menus: [{
+            path: '/'
+        }]
+    },
+    devServer: {
+        port: 8080
+    }
+};
--- a/packages/fes-template-h5/.gitignore
+++ b/packages/fes-template-h5/.gitignore
@ -0,0 +1,11 @@
+.DS_Store
+
+# dependencies
+/node_modules
+
+
+# fes
+/src/.fes
+/src/.fes-production
+/src/.fes-test
+/.env.local
--- a/packages/fes-template-h5/LICENSE
+++ b/packages/fes-template-h5/LICENSE
@ -0,0 +1,21 @@
+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.
--- a/packages/fes-template-h5/README.md
+++ b/packages/fes-template-h5/README.md
@ -0,0 +1,5 @@
+# fes vue3 模版
+
+## TODO
+
+* 屏幕适配
--- a/packages/fes-template-h5/package.json
+++ b/packages/fes-template-h5/package.json
@ -0,0 +1,40 @@
+{
+  "name": "@webank/fes-template-h5",
+  "version": "2.0.0",
+  "description": "fes项目模版",
+  "scripts": {
+    "build": "fes build",
+    "dev": "fes dev"
+  },
+  "keywords": [
+    "管理端",
+    "fes",
+    "fast",
+    "easy",
+    "strong"
+  ],
+  "files": [
+    ".eslintrc.js",
+    ".gitignore",
+    "fes.config.js",
+    "mock.js",
+    "package.json",
+    "README.md",
+    "/src"
+  ],
+  "repository": {
+    "type": "git"
+  },
+  "author": "harrywan qlin",
+  "license": "MIT",
+  "devDependencies": {
+    "@vue/compiler-sfc": "^3.0.0",
+    "@webank/eslint-config-webank": "^0.1.4"
+  },
+  "dependencies": {
+    "vue": "^3.0.2",
+    "@webank/fes": "^2.0.0",
+    "@webank/fes-plugin-access": "^1.0.0",
+    "@webank/fes-plugin-model": "^1.0.0"
+  }
+}
--- a/packages/fes-template-h5/public/index.html
+++ b/packages/fes-template-h5/public/index.html
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <meta name="format-detection" content="telephone=no"/>
+    <meta name="format-detection" content="email=no"/>
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/packages/fes-template-h5/src/app.js
+++ b/packages/fes-template-h5/src/app.js
@ -0,0 +1,19 @@
+import { access } from '@webank/fes';
+import PageLoading from '@/components/PageLoading.vue';
+
+
+export const beforeRender = {
+    loading: <PageLoading />,
+    action() {
+        const { setRole } = access;
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                setRole('admin');
+                resolve({
+                    a: 1,
+                    b: 2
+                });
+            }, 3000);
+        });
+    }
+};
--- a/packages/fes-template-h5/src/common/service.js
+++ b/packages/fes-template-h5/src/common/service.js
@ -0,0 +1,19 @@
+import { requestWrap } from '@webank/fes';
+
+// TODO
+// 响应体控制
+// formData 控制
+// 错误控制
+// 跳错误页面 || 或者重新登录
+// 段时间内不能重复发送的请求
+
+// or
+export default requestWrap({
+    login: {
+        url: '',
+        throttle: 300,
+        options: {
+            method: 'get'
+        }
+    }
+});
--- a/packages/fes-template-h5/src/models/user.js
+++ b/packages/fes-template-h5/src/models/user.js
--- a/packages/fes-template-h5/src/pages/index.vue
+++ b/packages/fes-template-h5/src/pages/index.vue
@ -0,0 +1,38 @@
+<template>
+    <div>
+        fes & 拉夫德鲁 <br />
+        accessOnepicess: {{accessOnepicess}}
+    </div>
+</template>
+<config>
+{
+    "title": "首页",
+    "layout": "false"
+}
+</config>
+<script>
+import { ref, onMounted } from 'vue';
+import { useAccess, useModel, useRouter } from '@webank/fes';
+
+export default {
+    setup() {
+        const fes = ref('fes upgrade to vue3');
+        const accessOnepicess = useAccess('/onepiece');
+        const { initialState } = useModel('@@initialState');
+        const router = useRouter();
+        onMounted(() => {
+            console.log(router);
+            console.log(initialState);
+            console.log('mounted1!!');
+            // router.push('/onepiece');
+        });
+        onMounted(() => {
+            console.log('mounted2!!');
+        });
+        return {
+            fes,
+            accessOnepicess
+        };
+    }
+};
+</script>
--- a/packages/fes-template-h5/src/pages/onepiece.vue
+++ b/packages/fes-template-h5/src/pages/onepiece.vue
@ -0,0 +1,21 @@
+<template>
+    <div>{{fes}}</div>
+</template>
+<config>
+{
+    "title": "onepiece",
+    "layout": "true"
+}
+</config>
+<script>
+import { ref } from 'vue';
+
+export default {
+    setup() {
+        const fes = ref('fes upgrade to vue3');
+        return {
+            fes
+        };
+    }
+};
+</script>
--- a/yarn.lock
+++ b/yarn.lock
@ -98,6 +98,15 @@
    jsesc "^2.5.1"
    source-map "^0.5.0"

+"@babel/generator@^7.12.10":
+  version "7.12.11"
+  resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.12.11.tgz#98a7df7b8c358c9a37ab07a24056853016aba3af"
+  integrity sha512-Ggg6WPOJtSi8yYQvLVjG8F/TlpWDlKx0OpS4Kt+xMQPs5OaGYWy+v1A+1TvxI6sAMGZpKWWoAQ1DaeQbImlItA==
+  dependencies:
+    "@babel/types" "^7.12.11"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
 "@babel/generator@^7.12.5":
  version "7.12.5"
  resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.12.5.tgz#a2c50de5c8b6d708ab95be5e6053936c1884a4de"
@ -301,6 +310,11 @@
  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
  integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==

+"@babel/helper-validator-identifier@^7.12.11":
+  version "7.12.11"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
+  integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==
+
 "@babel/helper-validator-option@^7.12.1":
  version "7.12.1"
  resolved "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.12.1.tgz#175567380c3e77d60ff98a54bb015fe78f2178d9"
@ -349,6 +363,11 @@
  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.12.3.tgz#a305415ebe7a6c7023b40b5122a0662d928334cd"
  integrity sha512-kFsOS0IbsuhO5ojF8Hc8z/8vEIOkylVBrjiZUbLTE3XFe0Qi+uu6HjzQixkFaqr0ZPAMZcBVxEwmsnsLPZ2Xsw==

+"@babel/parser@^7.12.10", "@babel/parser@^7.12.7":
+  version "7.12.11"
+  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz#9ce3595bcd74bc5c466905e86c535b8b25011e79"
+  integrity sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg==
+
 "@babel/plugin-proposal-async-generator-functions@^7.10.4", "@babel/plugin-proposal-async-generator-functions@^7.12.1", "@babel/plugin-proposal-async-generator-functions@^7.2.0":
  version "7.12.1"
  resolved "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.12.1.tgz#dc6c1170e27d8aca99ff65f4925bd06b1c90550e"
@ -1458,6 +1477,15 @@
  dependencies:
    regenerator-runtime "^0.13.4"

+"@babel/template@^7.0.0":
+  version "7.12.7"
+  resolved "https://registry.npmjs.org/@babel/template/-/template-7.12.7.tgz#c817233696018e39fbb6c491d2fb684e05ed43bc"
+  integrity sha512-GkDzmHS6GV7ZeXfJZ0tLRBhZcMcY0/Lnb+eEbXDBfCAcZCjrZKe6p3J4we/D24O9Y8enxWAg1cWwof59yLh2ow==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/parser" "^7.12.7"
+    "@babel/types" "^7.12.7"
+
 "@babel/template@^7.10.4", "@babel/template@^7.4.0", "@babel/template@^7.4.4":
  version "7.10.4"
  resolved "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
@ -1512,7 +1540,22 @@
    globals "^11.1.0"
    lodash "^4.17.19"

-"@babel/traverse@^7.0.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.4.3", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.0":
+"@babel/traverse@^7.0.0":
+  version "7.12.10"
+  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.10.tgz#2d1f4041e8bf42ea099e5b2dc48d6a594c00017a"
+  integrity sha512-6aEtf0IeRgbYWzta29lePeYSk+YAFIC3kyqESeft8o5CkFlYIMX+EQDDWEiAQ9LHOA3d0oHdgrSsID/CKqXJlg==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.12.10"
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.11.0"
+    "@babel/parser" "^7.12.10"
+    "@babel/types" "^7.12.10"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.19"
+
+"@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.4.3", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.0":
  version "7.12.1"
  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.1.tgz#941395e0c5cc86d5d3e75caa095d3924526f0c1e"
  integrity sha512-MA3WPoRt1ZHo2ZmoGKNqi20YnPt0B1S0GTZEPhhd+hw2KGUzBlHuVunj6K4sNuK+reEvyiPwtp0cpaqLzJDmAw==
@ -1545,7 +1588,16 @@
    lodash "^4.17.19"
    to-fast-properties "^2.0.0"

-"@babel/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.11.0", "@babel/types@^7.11.5", "@babel/types@^7.12.0", "@babel/types@^7.12.1", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
+"@babel/types@^7.0.0", "@babel/types@^7.12.10", "@babel/types@^7.12.11", "@babel/types@^7.12.7":
+  version "7.12.11"
+  resolved "https://registry.npmjs.org/@babel/types/-/types-7.12.11.tgz#a86e4d71e30a9b6ee102590446c98662589283ce"
+  integrity sha512-ukA9SQtKThINm++CX1CwmliMrE54J6nIYB5XTwL5f/CLFW9owfls+YSU8tVW15RQ2w+a3fSbPjC6HdQNtWZkiA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.12.11"
+    lodash "^4.17.19"
+    to-fast-properties "^2.0.0"
+
+"@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.11.0", "@babel/types@^7.11.5", "@babel/types@^7.12.0", "@babel/types@^7.12.1", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
  version "7.12.1"
  resolved "https://registry.npmjs.org/@babel/types/-/types-7.12.1.tgz#e109d9ab99a8de735be287ee3d6a9947a190c4ae"
  integrity sha512-BzSY3NJBKM4kyatSOWh3D/JJ2O3CVzBybHWxtgxnggaxEuaSTTDqeiSb/xk9lrkw2Tbqyivw5ZU4rT+EfznQsA==
@ -3552,13 +3604,14 @@
  resolved "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.0-rc.2.tgz#7246341f666e7c6e65b13da420e2ce85714fbbca"
  integrity sha512-1+7CwjQ0Kasml6rHoNQUmbISwqLNNfFVBUcZl6QBremUl296ZmLrVQPqJP5pyAAWjZke5bpI1hlj+LVVuT7Jcg==

-"@vue/babel-plugin-jsx@^1.0.0-rc.3":
-  version "1.0.0-rc.3"
-  resolved "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.0.0-rc.3.tgz#ab477ee95c764fbe68842a2eddd474f122e70ac6"
-  integrity sha512-/Ibq0hoKsidnHWPhgRpjcjYhYcHpqEm2fiKVAPO88OXZNHGwaGgS4yXkC6TDEvlZep4mBDo+2S5T81wpbVh90Q==
+"@vue/babel-plugin-jsx@^1.0.0-rc.5":
+  version "1.0.0-rc.5"
+  resolved "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.0.0-rc.5.tgz#e440be2d0775ee3828cba2c38a03b19a92174865"
+  integrity sha512-IUxERGiEeX9i1Vt9UtBYqOtfPYjOwEP0sFyPRI8xjkXAhJpaAIwa8JdcYakOqzIlXwhk3XD+7VFdyr/v+rLLFw==
  dependencies:
    "@babel/helper-module-imports" "^7.0.0"
    "@babel/plugin-syntax-jsx" "^7.0.0"
+    "@babel/template" "^7.0.0"
    "@babel/traverse" "^7.0.0"
    "@babel/types" "^7.0.0"
    "@vue/babel-helper-vue-transform-on" "^1.0.0-rc.2"
@ -3664,6 +3717,11 @@
    "@vue/compiler-dom" "3.0.4"
    "@vue/shared" "3.0.4"

+"@vue/preload-webpack-plugin@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz#ceb924b4ecb3b9c43871c7a429a02f8423e621ab"
+  integrity sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==
+
 "@vue/reactivity@3.0.2":
  version "3.0.2"
  resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.2.tgz#42ed5af6025b494a5e69b05169fcddf04eebfe77"