fix: 热更新问题

packages/fes-core/package.json

@@ -25,8 +25,8 @@
   },
   "dependencies": {
     "@babel/register": "^7.12.1",
-    "@umijs/babel-preset-umi": "^3.2.24",
+    "@umijs/babel-preset-umi": "3.3.3",
-    "@umijs/utils": "3.2.24",
+    "@umijs/utils": "3.3.3",
     "@webank/fes-runtime": "^2.0.0",
     "dotenv": "8.2.0",
     "joi": "17.3.0",

packages/fes-plugin-locale/package-lock.json

@@ -1,13 +0,0 @@
-{
-	"name": "@webank/fes-plugin-locale",
-	"version": "1.0.0",
-	"lockfileVersion": 1,
-	"requires": true,
-	"dependencies": {
-		"vue-i18n": {
-			"version": "9.0.0-beta.2",
-			"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.0.0-beta.2.tgz",
-			"integrity": "sha512-fvpf+LjXFdcSxKWYDaYetto3hnLwLzkPfKUmkzhG/AqgaIi+ZaVf+fLsQUmOaXzqp0l/4orjXjhHUIjhYsBLhA=="
-		}
-	}
-}

packages/fes-plugin-model/package.json

@@ -17,6 +17,6 @@
     "@webank/fes": "^2.0.0"
   },
   "dependencies": {
-    "@umijs/utils": "^3.2.24"
+    "@umijs/utils": "3.3.3"
   }
 }

packages/fes-plugin-request/package-lock.json

@@ -1,26 +0,0 @@
-{
-	"name": "@webank/fes-plugin-request",
-	"version": "1.0.0",
-	"lockfileVersion": 1,
-	"requires": true,
-	"dependencies": {
-		"axios": {
-			"version": "0.20.0",
-			"resolved": "https://registry.npmjs.org/axios/-/axios-0.20.0.tgz",
-			"integrity": "sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==",
-			"requires": {
-				"follow-redirects": "^1.10.0"
-			}
-		},
-		"follow-redirects": {
-			"version": "1.13.0",
-			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz",
-			"integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA=="
-		},
-		"throttle-debounce": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
-			"integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ=="
-		}
-	}
-}

packages/fes-preset-built-in/package.json

@@ -25,9 +25,9 @@
   },
   "dependencies": {
     "express": "4.17.1",
-    "@umijs/utils": "^3.2.24",
+    "@umijs/utils": "3.3.3",
-    "@umijs/bundler-webpack": "^3.2.23",
+    "@umijs/bundler-webpack": "3.3.3",
-    "@umijs/server": "^3.2.23",
+    "@umijs/server": "3.3.3",
     "@vue/babel-plugin-jsx": "^1.0.0-rc.5",
     "@vue/compiler-sfc": "^3.0.4",
     "@vue/preload-webpack-plugin": "1.1.2",
@@ -35,6 +35,7 @@
     "cliui": "6.0.0",
     "vue-loader": "^16.1.2",
     "html-webpack-plugin": "^3.2.0",
+    "html-webpack-tags-plugin": "2.0.17",
     "webpack-bundle-analyzer": "4.3.0"
   }
 }

packages/fes-preset-built-in/src/index.js

@@ -24,6 +24,7 @@ export default function () {
             require.resolve('./plugins/features/cssnano'),
             require.resolve('./plugins/features/copy'),
             require.resolve('./plugins/features/define'),
+            require.resolve('./plugins/features/devScripts'),
             require.resolve('./plugins/features/devServer'),
             require.resolve('./plugins/features/devtool'),
             require.resolve('./plugins/features/externals'),
@@ -44,7 +45,6 @@ export default function () {
             require.resolve('./plugins/features/styleLoader'),
             require.resolve('./plugins/features/targets'),
             require.resolve('./plugins/features/terserOptions'),
-            require.resolve('./plugins/features/theme'),
             require.resolve('./plugins/features/vueLoader'),
 
             // commands

packages/fes-preset-built-in/src/plugins/commands/dev/index.js

@@ -155,13 +155,13 @@ export default (api) => {
             });
 
             const beforeMiddlewares = await api.applyPlugins({
-                key: 'addBeforeMiddewares',
+                key: 'addBeforeMiddlewares',
                 type: api.ApplyPluginsType.add,
                 initialValue: [],
                 args: {}
             });
             const middlewares = await api.applyPlugins({
-                key: 'addMiddewares',
+                key: 'addMiddlewares',
                 type: api.ApplyPluginsType.add,
                 initialValue: [],
                 args: {}

packages/fes-preset-built-in/src/plugins/features/chainWebpack.js

@@ -1,4 +1,6 @@
-import { winPath } from '@umijs/utils';
+import {
+    winPath
+} from '@umijs/utils';
 
 export default (api) => {
     api.describe({
@@ -21,6 +23,26 @@ export default (api) => {
                 options.cacheDirectory = winPath(`${cwd}/.cache/babel-loader`);
                 return options;
             });
+        if (api.env !== 'development') {
+            webpackConfig
+                .optimization.splitChunks({
+                    cacheGroups: {
+                        vendors: {
+                            name: 'chunk-vendors',
+                            test: /[\\/]node_modules[\\/]/,
+                            priority: -10,
+                            chunks: 'initial'
+                        },
+                        common: {
+                            name: 'chunk-common',
+                            minChunks: 2,
+                            priority: -20,
+                            chunks: 'initial',
+                            reuseExistingChunk: true
+                        }
+                    }
+                });
+        }
 
         return webpackConfig;
     });

packages/fes-preset-built-in/src/plugins/features/devScripts.js

@@ -0,0 +1,113 @@
+import {
+    readFileSync
+} from 'fs';
+
+export default (api) => {
+    api.describe({
+        key: 'devScripts',
+        config: {
+            schema(joi) {
+                return joi.object();
+            }
+        },
+        enableBy() {
+            return api.env === 'development';
+        }
+    });
+
+    api.addBeforeMiddlewares(() => (req, res, next) => {
+        if (req.path.includes('@@/devScripts.js')) {
+            api.applyPlugins({
+                key: 'addDevScripts',
+                type: api.ApplyPluginsType.add,
+                initialValue: process.env.HMR !== 'none'
+                    ? [
+                        readFileSync(
+                            require.resolve(
+                                '@umijs/bundler-webpack/bundled/webpackHotDevClient'
+                            ),
+                            'utf-8'
+                        )
+                    ]
+                    : []
+            }).then((scripts) => {
+                res.end(
+                    scripts
+                        .join('\r\n\r\n')
+                        .replace(
+                            /{}.SOCKET_SERVER/g,
+                            JSON.stringify(process.env.SOCKET_SERVER || '')
+                        )
+                );
+            });
+        } else {
+            next();
+        }
+    });
+
+    api.addHTMLHeadScripts(() => [{
+        src: `${api.config.publicPath}@@/devScripts.js`
+    }]);
+
+    api.onGenerateFiles(() => {
+        api.writeTmpFile({
+            path: './core/devScripts.js',
+            content: process.env.HMR !== 'none'
+                ? `
+if (window.g_initWebpackHotDevClient) {
+  function tryApplyUpdates(onHotUpdateSuccess) {
+    // @ts-ignore
+    if (!module.hot) {
+      window.location.reload();
+      return;
+    }
+
+    function isUpdateAvailable() {
+      // @ts-ignore
+      return window.g_getMostRecentCompilationHash() !== __webpack_hash__;
+    }
+
+    // TODO: is update available?
+    // @ts-ignore
+    if (!isUpdateAvailable() || module.hot.status() !== 'idle') {
+      return;
+    }
+
+    function handleApplyUpdates(err, updatedModules) {
+      if (err || !updatedModules || window.g_getHadRuntimeError()) {
+        window.location.reload();
+        return;
+      }
+
+      onHotUpdateSuccess && onHotUpdateSuccess();
+
+      if (isUpdateAvailable()) {
+        // While we were updating, there was a new update! Do it again.
+        tryApplyUpdates();
+      }
+    }
+
+    // @ts-ignore
+    module.hot.check(true).then(
+      function (updatedModules) {
+        handleApplyUpdates(null, updatedModules);
+      },
+      function (err) {
+        handleApplyUpdates(err, null);
+      },
+    );
+  }
+
+  window.g_initWebpackHotDevClient({
+    tryApplyUpdates,
+  });
+}
+      `
+                : ''
+        });
+    });
+
+    api.addEntryImportsAhead(() => [{
+        source: '@@/core/devScripts'
+    }]);
+};

packages/fes-preset-built-in/src/plugins/features/html.js

@@ -9,7 +9,7 @@ export default (api) => {
                 return joi
                     .object({})
                     .description(
-                        'more html-webpack-plugin options see https://github.com/jantimon/html-webpack-plugin#configuration',
+                        'more html-webpack-plugin options see https://github.com/jantimon/html-webpack-plugin#configuration'
                     );
             },
             default: {
@@ -18,8 +18,12 @@ export default (api) => {
         }
     });
 
-    api.chainWebpack((webpackConfig) => {
+    api.chainWebpack(async (webpackConfig) => {
         const isProd = api.env === 'production';
+        const headScripts = await api.applyPlugins({
+            key: 'addHTMLHeadScripts',
+            initialState: []
+        });
         const htmlOptions = {
             templateParameters: (compilation, assets, pluginOptions) => {
                 // enhance html-webpack-plugin's built in template params
@@ -55,6 +59,7 @@ export default (api) => {
         }
 
         const HTMLPlugin = require('html-webpack-plugin');
+        const HtmlWebpackTagsPlugin = require('html-webpack-tags-plugin');
         const PreloadPlugin = require('@vue/preload-webpack-plugin');
         const multiPageConfig = api.config.html.pages;
         const htmlPath = join(api.paths.cwd, 'public/index.html');
@@ -97,5 +102,16 @@ export default (api) => {
         } else {
             // TODO 支持多页
         }
+
+        if (!isProd) {
+            webpackConfig
+                .plugin('html-tags')
+                .use(HtmlWebpackTagsPlugin, [{
+                    append: true,
+                    scripts: headScripts.map(script => ({
+                        path: script.src
+                    }))
+                }]);
+        }
     });
 };

packages/fes-preset-built-in/src/plugins/registerMethods.js

@@ -10,12 +10,14 @@ export default function (api) {
         'addCoreExports',
         'addRuntimePluginKey',
         'addRuntimePlugin',
+        'addDevScripts',
         'addEntryImportsAhead',
         'addEntryImports',
         'addEntryCodeAhead',
         'addEntryCode',
-        'addBeforeMiddewares',
+        'addBeforeMiddlewares',
-        'addMiddewares',
+        'addHTMLHeadScripts',
+        'addMiddlewares',
         'modifyRoutes',
         'modifyBundler',
         'modifyBundleImplementor',

packages/fes-runtime/package-lock.json

@@ -1,13 +0,0 @@
-{
-	"name": "@webank/fes-runtime",
-	"version": "2.0.0",
-	"lockfileVersion": 1,
-	"requires": true,
-	"dependencies": {
-		"vue-router": {
-			"version": "4.0.0-rc.1",
-			"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.0-rc.1.tgz",
-			"integrity": "sha512-N3SSOIiRFo1/D6EkHGuahUSuyDvFhKizN5zVXkALX7wv0hYYndV49KwzRF5lKsAIt+OlDl7y+sNmwNewb7a4iw=="
-		}
-	}
-}

packages/fes-template/src/pages/index.vue

@@ -39,6 +39,6 @@ export default {
 
 <style scoped>
 .haizekuo {
-    background: url('../images/icon.png');
+    /* background: url('../images/icon.png'); */
 }
 </style>

packages/fes/package.json

@@ -33,7 +33,7 @@
         "@webank/fes-preset-built-in": "^2.0.0",
         "@webank/fes-core": "^2.0.0",
         "@webank/fes-runtime": "^2.0.0",
-        "@umijs/utils": "3.2.24",
+        "@umijs/utils": "3.3.3",
         "resolve-cwd": "^3.0.0"
     }
 }