Merge branch 'dev' of gitea.51mars.com:Oak-Team/oak-cli into dev

config/web/webpack.config.js

@@ -21,6 +21,7 @@ const modules = require('./modules');
 const getClientEnvironment = require('./env');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const ForkTsCheckerWebpackPlugin = require('./../../plugins/ForkTsCheckerWarningWebpackPlugin');
+const InjectScriptWebpackPlugin = require('./../../plugins/InjectScriptWebpackPlugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const CompressionWebpackPlugin = require('compression-webpack-plugin');
@@ -235,7 +236,14 @@ module.exports = function (webpackEnv) {
             (shouldUseSourceMap ? 'source-map' : isEnvStaging ? 'eval-cheap-module-source-map' : 'nosources-source-map'),
         // These are the "entry points" to our application.
         // This means they will be the "root" imports that are included in JS bundle.
-        entry: paths.appIndexJs,
+        entry: [
+            // 模块热替换的运行时代码
+            ...(!!isEnvDevelopment? ['webpack/hot/dev-server.js',
+            // 用于 web 套接字传输、热重载逻辑的 web server 客户端
+            'webpack-dev-server/client/index.js?hot=true&live-reload=true'] : []),
+            // oak项目入口
+            paths.appIndexJs,
+        ],
         output: {
             // The build folder.
             path: paths.appBuild,
@@ -767,6 +775,8 @@ module.exports = function (webpackEnv) {
             ].filter(Boolean),
         },
         plugins: [
+            // 非dev环境注入script
+            !isEnvDevelopment && new InjectScriptWebpackPlugin(),
             !isEnvDevelopment &&
                 new CompressionWebpackPlugin({
                     filename: '[path][base].gz', //压缩后的文件名
@@ -802,6 +812,8 @@ module.exports = function (webpackEnv) {
                         : undefined
                 )
             ),
+            // 添加HMR插件支持
+            !!isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
             // Inlines the webpack runtime script. This script is too small to warrant
             // a network request.
             // https://github.com/facebook/create-react-app/issues/5358
@@ -1002,7 +1014,8 @@ module.exports = function (webpackEnv) {
         // Turn off performance processing because we utilize
         // our own hints via the FileSizeReporter
         performance: false,
-        externals: {
+        // 在非开发模式下，排除相关模块，以使用CDN加载
+        externals: !isEnvDevelopment ? {
             echarts: 'echarts',
             lodash: '_',
             react: 'React',
@@ -1010,6 +1023,6 @@ module.exports = function (webpackEnv) {
             '@wangeditor/editor': 'wangEditor',
             '@fingerprintjs/fingerprintjs': 'FingerprintJS',
             'bn.js': 'BN',
-        },
+        } : {},
     };
 };

plugins/InjectScriptWebpackPlugin.js

@@ -0,0 +1,56 @@
+'use strict';
+const fs = require('fs');
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+class InjectScriptWebpackPlugin {
+  constructor(options = {}) {
+    this.injectsDir = options.injectsDir || './injects';
+  }
+
+  apply(compiler) {
+    compiler.hooks.compilation.tap('InjectScriptWebpackPlugin', (compilation) => {
+      HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
+        'InjectScriptWebpackPlugin',
+        (data, cb) => {
+          const injectScripts = this.getInjectScripts();
+          
+          if (injectScripts.length > 0) {
+            const scriptsToInject = injectScripts.map(script => 
+              `<script>${script}</script>`
+            ).join('\n');
+
+            // 在</body>标签前插入脚本
+            data.html = data.html.replace('</body>', `${scriptsToInject}</body>`);
+          }
+
+          cb(null, data);
+        }
+      );
+    });
+  }
+
+  getInjectScripts() {
+    const injectScripts = [];
+    // 使用 __dirname 获取当前文件的目录
+    const injectsPath = path.resolve(__dirname, this.injectsDir);
+    
+    if (fs.existsSync(injectsPath)) {
+      const files = fs.readdirSync(injectsPath);
+      
+      files.forEach(file => {
+        if (path.extname(file).toLowerCase() === '.js') {
+          const filePath = path.join(injectsPath, file);
+          const content = fs.readFileSync(filePath, 'utf-8');
+          injectScripts.push(content);
+        }
+      });
+    } else {
+      console.warn(`Injects directory not found: ${injectsPath}`);
+    }
+
+    return injectScripts;
+  }
+}
+
+module.exports = InjectScriptWebpackPlugin;

plugins/injects/version-check.js

@@ -0,0 +1,101 @@
+(function() {
+    var sys = {};
+    var ua = navigator.userAgent.toLowerCase();
+    var s;
+    (s = ua.match(/firefox\/([\d.]+)/))
+        ? (sys.firefox = s[1])
+        : (s = ua.match(/chrome\/([\d.]+)/))
+        ? (sys.chrome = s[1])
+        : (s = ua.match(/opera.([\d.]+)/))
+        ? (sys.opera = s[1])
+        : (s = ua.match(/rv:([\d.]+)/))
+        ? (sys.ie = s[1])
+        : (s = ua.match(/msie ([\d.]+)/))
+        ? (sys.ie = s[1])
+        : (s = ua.match(/version\/([\d.]+).*safari/))
+        ? (sys.safari = s[1])
+        : 0;
+    var browser = 'Unknown';
+    var tip = document.createElement('div');
+    var closeBtn = document.createElement('img');
+    var contentHTML =
+        '您当前使用的浏览器可能会出现界面显示异常或功能无法正常使用等问题，建议下载使用谷歌，火狐，edge等新版本浏览器。';
+    var handleClickClose = function (event) {
+        document.body.removeChild(tip);
+    };
+    var startAppend = function () {
+        document.body.appendChild(tip);
+        tip.appendChild(closeBtn);
+    };
+
+    // closeBtn.style.position = 'absolute';
+    // closeBtn.style.right = '20px';
+    // closeBtn.style.bottom = '7px';
+    // closeBtn.style.cursor = 'pointer';
+    // closeBtn.style.width = '15px';
+    // closeBtn.style.height = '15px';
+    // closeBtn.src = '../assets/images/icon-close.png';
+    // closeBtn.alt = '关闭';
+
+    // if (closeBtn.addEventListener) {
+    //     closeBtn.addEventListener('click', handleClickClose);
+    // } else {
+    //     // IE8 及以下
+    //     closeBtn.attachEvent('onclick', handleClickClose);
+    // }
+
+    tip.style.position = 'relative';
+    tip.style.backgroundColor = 'yellow';
+    tip.style.color = 'red';
+    tip.style.position = 'fixed';
+    tip.style.top = 0;
+    tip.style.right = 0;
+    tip.style.left = 0;
+    tip.style.padding = '5px 20px';
+    tip.style.fontSize = '14px';
+
+    if (sys.ie) {
+        browser = 'IE';
+        tip.innerHTML = contentHTML;
+        startAppend();
+    }
+    if (sys.firefox) {
+        browser = 'Firefox';
+    }
+    if (sys.chrome) {
+        browser = 'Chrome';
+
+        var getChromeVersion = function () {
+            var arr = navigator.userAgent.split(' ');
+            var chromeVersion = '';
+            for (var i = 0; i < arr.length; i++) {
+                if (/chrome/i.test(arr[i])) chromeVersion = arr[i];
+            }
+            if (chromeVersion) {
+                return Number(
+                    chromeVersion.split('/')[1].split('.')[0]
+                );
+            } else {
+                return false;
+            }
+        };
+
+        if (getChromeVersion()) {
+            var version = getChromeVersion();
+            // 如果 360 极速浏览器并切换到极速模式低于86版本
+            if (version < 87) {
+                tip.innerHTML =
+                    '您当前使用的浏览器版本过低，使用可能会出现界面显示异常或功能无法正常使用等问题，建议下载使用谷歌，火狐，edge等新版本浏览器。';
+                startAppend();
+            }
+        }
+    }
+    if (sys.opera) {
+        browser = 'Opera';
+        tip.innerHTML = contentHTML;
+        startAppend();
+    }
+    if (sys.safari) {
+        browser = 'Safari';
+    }
+})();

template/web/public/index.html

@@ -110,109 +110,4 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     --></body>
-
-    <script>
-        function getBrowserVersion() {
-            var sys = {};
-            var ua = navigator.userAgent.toLowerCase();
-            var s;
-            (s = ua.match(/firefox\/([\d.]+)/))
-                ? (sys.firefox = s[1])
-                : (s = ua.match(/chrome\/([\d.]+)/))
-                ? (sys.chrome = s[1])
-                : (s = ua.match(/opera.([\d.]+)/))
-                ? (sys.opera = s[1])
-                : (s = ua.match(/rv:([\d.]+)/))
-                ? (sys.ie = s[1])
-                : (s = ua.match(/msie ([\d.]+)/))
-                ? (sys.ie = s[1])
-                : (s = ua.match(/version\/([\d.]+).*safari/))
-                ? (sys.safari = s[1])
-                : 0;
-            var browser = 'Unknown';
-            var tip = document.createElement('div');
-            var closeBtn = document.createElement('img');
-            var contentHTML =
-                '您当前使用的浏览器可能会出现界面显示异常或功能无法正常使用等问题，建议下载使用谷歌，火狐，edge等新版本浏览器。';
-            var handleClickClose = function (event) {
-                document.body.removeChild(tip);
-            };
-            var startAppend = function () {
-                document.body.appendChild(tip);
-                tip.appendChild(closeBtn);
-            };
-
-            // closeBtn.style.position = 'absolute';
-            // closeBtn.style.right = '20px';
-            // closeBtn.style.bottom = '7px';
-            // closeBtn.style.cursor = 'pointer';
-            // closeBtn.style.width = '15px';
-            // closeBtn.style.height = '15px';
-            // closeBtn.src = '../assets/images/icon-close.png';
-            // closeBtn.alt = '关闭';
-
-            // if (closeBtn.addEventListener) {
-            //     closeBtn.addEventListener('click', handleClickClose);
-            // } else {
-            //     // IE8 及以下
-            //     closeBtn.attachEvent('onclick', handleClickClose);
-            // }
-
-            tip.style.position = 'relative';
-            tip.style.backgroundColor = 'yellow';
-            tip.style.color = 'red';
-            tip.style.position = 'fixed';
-            tip.style.top = 0;
-            tip.style.right = 0;
-            tip.style.left = 0;
-            tip.style.padding = '5px 20px';
-            tip.style.fontSize = '14px';
-
-            if (sys.ie) {
-                browser = 'IE';
-                tip.innerHTML = contentHTML;
-                startAppend();
-            }
-            if (sys.firefox) {
-                browser = 'Firefox';
-            }
-            if (sys.chrome) {
-                browser = 'Chrome';
-
-                var getChromeVersion = function () {
-                    var arr = navigator.userAgent.split(' ');
-                    var chromeVersion = '';
-                    for (var i = 0; i < arr.length; i++) {
-                        if (/chrome/i.test(arr[i])) chromeVersion = arr[i];
-                    }
-                    if (chromeVersion) {
-                        return Number(
-                            chromeVersion.split('/')[1].split('.')[0]
-                        );
-                    } else {
-                        return false;
-                    }
-                };
-
-                if (getChromeVersion()) {
-                    var version = getChromeVersion();
-                    // 如果 360 极速浏览器并切换到极速模式低于86版本
-                    if (version < 87) {
-                        tip.innerHTML =
-                            '您当前使用的浏览器版本过低，使用可能会出现界面显示异常或功能无法正常使用等问题，建议下载使用谷歌，火狐，edge等新版本浏览器。';
-                        startAppend();
-                    }
-                }
-            }
-            if (sys.opera) {
-                browser = 'Opera';
-                tip.innerHTML = contentHTML;
-                startAppend();
-            }
-            if (sys.safari) {
-                browser = 'Safari';
-            }
-        }
-        getBrowserVersion();
-    </script>
 </html>