同步代码

2026-01-09 16:32:07 +08:00 · 2022-08-23 19:01:53 +08:00
parent e90c5003ae
commit e1514c901b
76 changed files with 796 additions and 577 deletions
--- a/km-console/packages/layout-clusters-fe/config/CoverHtmlWebpackPlugin.js
+++ b/km-console/packages/layout-clusters-fe/config/CoverHtmlWebpackPlugin.js
@@ -3,8 +3,7 @@
 * 注意: HtmlWebpackPlugin hooks 是 beta 版本，正式版本接口可能会变
 */
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-// const PublicPath = '//img-ys011.didistatic.com/static/bp_fe_daily/bigdata_cloud_KnowStreaming_FE/gn';
-const PublicPath = '';
+const PublicPath = process.env.PUBLIC_PATH;
 const isProd = process.env.NODE_ENV === 'production';
 const commonDepsMap = [
  {
@@ -32,30 +31,44 @@ const commonDepsMap = [
    development: '/static/js/moment.min.js',
    production: `${PublicPath}/static/js/moment.min.js`,
  },
+  {
+    name: 'react-router',
+    development: '/static/js/react-router.min.js',
+    production: `${PublicPath}/static/js/react-router.min.js`,
+  },
+  {
+    name: 'react-router-dom',
+    development: '/static/js/react-router-dom.min.js',
+    production: `${PublicPath}/static/js/react-router-dom.min.js`,
+  },
+  {
+    name: 'lodash',
+    development: '/static/js/lodash.min.js',
+    production: `${PublicPath}/static/js/lodash.min.js`,
+  },
+  {
+    name: 'echarts',
+    development: '/static/js/echarts.min.js',
+    production: `${PublicPath}/static/js/echarts.min.js`,
+  },
+  {
+    name: 'history',
+    development: '/static/js/history.production.min.js',
+    production: `${PublicPath}/static/js/history.production.min.js`,
+  },
 ];

 function generateSystemJsImportMap() {
-  const importMap = {
-    'react-router': 'https://unpkg.com/react-router@5.2.1/umd/react-router.min.js',
-    'react-router-dom': 'https://unpkg.com/react-router-dom@5.2.1/umd/react-router-dom.min.js',
-    lodash: 'https://unpkg.com/lodash@4.17.21/lodash.min.js',
-    history: 'https://unpkg.com/history@5/umd/history.development.js',
-    echarts: 'https://unpkg.com/echarts@5.3.1/dist/echarts.min.js',
-  };
-  //if (process.env.NODE_ENV === 'production') {
+  const importMap = {};
  commonDepsMap.forEach((o) => {
    importMap[o.name] = o[process.env.NODE_ENV];
  });
-  //}
  return JSON.stringify({
    imports: importMap,
  });
 }

 class CoverHtmlWebpackPlugin {
-  constructor(options) {
-    this.isBusiness = options.BUSINESS_VERSION;
-  }
  apply(compiler) {
    compiler.hooks.compilation.tap('CoverHtmlWebpackPlugin', (compilation) => {
      HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync('CoverHtmlWebpackPlugin', async (data, cb) => {
@@ -69,11 +82,16 @@ class CoverHtmlWebpackPlugin {
        };
        const assetJson = JSON.parse(data.plugin.assetJson);
        let links = '';
+        let vendors = '';

-        assetJson.forEach((item) => {
+        assetJson.reverse().forEach((item) => {
          if (/\.js$/.test(item)) {
+            // if (item.includes('vendor~')) {
+            //   vendors += `<script async src="${item}"></script>`;
+            // } else {
            // TODO: entry 只有一个
            portalMap['@portal/layout'] = item;
+            // }
          } else if (/\.css$/.test(item)) {
            links += `<link href="${item}" rel="stylesheet">`;
          }
@@ -91,10 +109,11 @@ class CoverHtmlWebpackPlugin {
                  <script src='${isProd ? PublicPath : ''}/static/js/named-exports.min.js'></script>
                  <script src='${isProd ? PublicPath : ''}/static/js/use-default.min.js'></script>
                  <script src='${isProd ? PublicPath : ''}/static/js/amd.js'></script>
-                  ${this.isBusiness ? `<script src=${isProd ? PublicPath : ''}/static/js/ksl.min.js></script>` : ''}
+                  ${process.env.BUSINESS_VERSION === 'true' ? `<script src=${isProd ? PublicPath : ''}/static/js/ksl.min.js></script>` : ''}
                </head>
                <body>
                  ${depsMap}
+                  ${vendors}
                  <script type="systemjs-importmap">
                    {
                      "imports": ${JSON.stringify(portalMap)}
--- a/km-console/packages/layout-clusters-fe/config/d1-spa-webpack.js
+++ b/km-console/packages/layout-clusters-fe/config/d1-spa-webpack.js
@@ -1,162 +0,0 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const ProgressBarPlugin = require('progress-bar-webpack-plugin');
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const CoverHtmlWebpackPlugin = require('./CoverHtmlWebpackPlugin.js');
-var webpackConfigResolveAlias = require('./webpackConfigResolveAlias');
-const TerserJSPlugin = require('terser-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const theme = require('./theme');
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-
-const isProd = process.env.NODE_ENV === 'production';
-
-const babelOptions = {
-  cacheDirectory: true,
-  babelrc: false,
-  presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-typescript'), require.resolve('@babel/preset-react')],
-  plugins: [
-    [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
-    [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }],
-    require.resolve('@babel/plugin-proposal-export-default-from'),
-    require.resolve('@babel/plugin-proposal-export-namespace-from'),
-    require.resolve('@babel/plugin-proposal-object-rest-spread'),
-    require.resolve('@babel/plugin-transform-runtime'),
-    !isProd && require.resolve('react-refresh/babel'),
-  ]
-    .filter(Boolean)
-    .concat([
-      '@babel/plugin-transform-object-assign',
-      '@babel/plugin-transform-modules-commonjs',
-    ]),
-};
-
-module.exports = () => {
-  const jsFileName = isProd ? '[name]-[chunkhash].js' : '[name].js';
-  const cssFileName = isProd ? '[name]-[chunkhash].css' : '[name].css';
-
-  const plugins = [
-    new CoverHtmlWebpackPlugin(),
-    new ProgressBarPlugin(),
-    new CaseSensitivePathsPlugin(),
-    new MiniCssExtractPlugin({
-      filename: cssFileName,
-    }),
-    !isProd &&
-      new ReactRefreshWebpackPlugin({
-        overlay: false,
-      }),
-  ].filter(Boolean);
-  const resolve = {
-    symlinks: false,
-    extensions: ['.web.jsx', '.web.js', '.ts', '.tsx', '.js', '.jsx', '.json'],
-    alias: webpackConfigResolveAlias,
-  };
-
-  if (isProd) {
-    plugins.push(new CleanWebpackPlugin());
-  }
-
-  if (!isProd) {
-    resolve.mainFields = ['browser', 'main', 'module'];
-  }
-
-  return {
-    output: {
-      filename: jsFileName,
-      chunkFilename: jsFileName,
-      library: 'layout',
-      libraryTarget: 'amd',
-    },
-    externals: [
-      /^react$/,
-      /^react\/lib.*/,
-      /^react-dom$/,
-      /.*react-dom.*/,
-      /^single-spa$/,
-      /^single-spa-react$/,
-      /^moment$/,
-      /^react-router$/,
-      /^react-router-dom$/,
-    ],
-    resolve,
-    plugins,
-    module: {
-      rules: [
-        {
-          parser: { system: false },
-        },
-        {
-          test: /\.(js|jsx)$/,
-          use: [
-            {
-              loader: 'babel-loader',
-              options: babelOptions,
-            },
-          ],
-        },
-        {
-          test: /\.(ts|tsx)$/,
-          use: [
-            {
-              loader: 'babel-loader',
-              options: babelOptions,
-            },
-            {
-              loader: 'ts-loader',
-              options: {
-                allowTsInNodeModules: true,
-              },
-            },
-          ],
-        },
-        {
-          test: /\.(png|svg|jpeg|jpg|gif|ttf|woff|woff2|eot|pdf)$/,
-          use: [
-            {
-              loader: 'file-loader',
-              options: {
-                name: '[name].[ext]',
-                outputPath: './assets/image/',
-                esModule: false,
-              },
-            },
-          ],
-        },
-        {
-          test: /\.(css|less)$/,
-          use: [
-            {
-              loader: MiniCssExtractPlugin.loader,
-            },
-            'css-loader',
-            {
-              loader: 'less-loader',
-              options: {
-                javascriptEnabled: true,
-                modifyVars: theme,
-              },
-            },
-          ],
-        },
-      ],
-    },
-    optimization: isProd
-      ? {
-          minimizer: [
-            new TerserJSPlugin({
-              cache: true,
-              sourceMap: true,
-            }),
-            new OptimizeCSSAssetsPlugin({}),
-          ],
-        }
-      : {},
-    devtool: isProd ? 'cheap-module-source-map' : 'source-map',
-    node: {
-      fs: 'empty',
-      net: 'empty',
-      tls: 'empty',
-    },
-  };
-};
--- a/km-console/packages/layout-clusters-fe/config/d1-webpack.base.js
+++ b/km-console/packages/layout-clusters-fe/config/d1-webpack.base.js
@@ -10,11 +10,8 @@ const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const theme = require('./theme');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
-const BUSINESS_VERSION = false;

 const isProd = process.env.NODE_ENV === 'production';
-// const publicPath = isProd ? '//img-ys011.didistatic.com/static/bp_fe_daily/bigdata_cloud_KnowStreaming_FE/gn/' : '/';
-const publicPath = '/';
 const babelOptions = {
  cacheDirectory: true,
  babelrc: false,
@@ -44,23 +41,19 @@ const babelOptions = {
 };

 module.exports = () => {
-  const jsFileName = isProd ? '[name]-[chunkhash].js' : '[name].js';
  const cssFileName = isProd ? '[name]-[chunkhash].css' : '[name].css';
-
  const plugins = [
    // !isProd && new HardSourceWebpackPlugin(),
-    new CoverHtmlWebpackPlugin({
-      BUSINESS_VERSION,
-    }),
+    new CoverHtmlWebpackPlugin(),
    new ProgressBarPlugin(),
    new CaseSensitivePathsPlugin(),
    new MiniCssExtractPlugin({
      filename: cssFileName,
    }),
    !isProd &&
-    new ReactRefreshWebpackPlugin({
-      overlay: false,
-    }),
+      new ReactRefreshWebpackPlugin({
+        overlay: false,
+      }),
  ].filter(Boolean);
  const resolve = {
    symlinks: false,
@@ -77,26 +70,21 @@ module.exports = () => {
  }

  return {
-    output: {
-      filename: jsFileName,
-      chunkFilename: jsFileName,
-      library: 'layout',
-      libraryTarget: 'amd',
-      publicPath,
-    },
    externals: isProd
      ? [
-        /^react$/,
-        /^react\/lib.*/,
-        /^react-dom$/,
-        /.*react-dom.*/,
-        /^single-spa$/,
-        /^single-spa-react$/,
-        /^moment$/,
-        /^antd$/,
-        /^lodash$/,
-        /^echarts$/,
-      ]
+          /^react$/,
+          /^react\/lib.*/,
+          /^react-dom$/,
+          /.*react-dom.*/,
+          /^single-spa$/,
+          /^single-spa-react$/,
+          /^moment$/,
+          /^antd$/,
+          /^lodash$/,
+          /^echarts$/,
+          /^react-router$/,
+          /^react-router-dom$/,
+        ]
      : [],
    resolve,
    plugins,
@@ -161,17 +149,34 @@ module.exports = () => {
        },
      ],
    },
-    optimization: isProd
-      ? {
-        minimizer: [
-          new TerserJSPlugin({
-            cache: true,
-            sourceMap: true,
-          }),
-          new OptimizeCSSAssetsPlugin({}),
-        ],
-      }
-      : {},
+    optimization: Object.assign(
+      // {
+      //   splitChunks: {
+      //     cacheGroups: {
+      //       vendor: {
+      //         test: /[\\/]node_modules[\\/]/,
+      //         chunks: 'all',
+      //         name: 'vendor',
+      //         priority: 10,
+      //         enforce: true,
+      //         minChunks: 1,
+      //         maxSize: 3500000,
+      //       },
+      //     },
+      //   },
+      // },
+      isProd
+        ? {
+            minimizer: [
+              new TerserJSPlugin({
+                cache: true,
+                sourceMap: true,
+              }),
+              new OptimizeCSSAssetsPlugin({}),
+            ],
+          }
+        : {}
+    ),
    devtool: isProd ? 'cheap-module-source-map' : '',
    node: {
      fs: 'empty',
@@ -180,4 +185,3 @@ module.exports = () => {
    },
  };
 };
-module.exports.BUSINESS_VERSION = BUSINESS_VERSION;
--- a/km-console/packages/layout-clusters-fe/config/registerApps.js
+++ b/km-console/packages/layout-clusters-fe/config/registerApps.js
@@ -3,6 +3,7 @@ import * as singleSpa from 'single-spa';
 const customProps = {
  env: {
    NODE_ENV: process.env.NODE_ENV,
+    BUSINESS_VERSION: process.env.BUSINESS_VERSION,
  },
 };

--- a/km-console/packages/layout-clusters-fe/config/systemsConfig.js
+++ b/km-console/packages/layout-clusters-fe/config/systemsConfig.js
@@ -6,11 +6,7 @@ const feSystemsConfig = {
        publicPath: 'http://localhost:8001/config/',
        index: 'http://localhost:8001/config/manifest.json',
      },
-      production: { publicPath: '/config/', index: '/config/manifest.json' },
-      // production: {
-      //   publicPath: '//img-ys011.didistatic.com/static/bp_fe_daily/bigdata_cloud_KnowStreaming_FE/gn/config/',
-      //   index: '//img-ys011.didistatic.com/static/bp_fe_daily/bigdata_cloud_KnowStreaming_FE/gn/config/manifest.json',
-      // },
+      production: { publicPath: `${process.env.PUBLIC_PATH}/config/`, index: `${process.env.PUBLIC_PATH}/config/manifest.json` },
    },
  ],
  feConfig: {
@@ -24,4 +20,4 @@ const feSystemsConfig = {
    },
  },
 };
-module.exports = feSystemsConfig;
+export default feSystemsConfig;