上传修改

.gitignore

@@ -16,4 +16,5 @@
 /radar-engine/radar-engine.iml
 /radar-service/radar-service.iml
 /radar-service-impl/radar-service-impl.iml
-webapp/node_modules/
+webapp/node_modules/
+.project

webapp/.babelrc

@@ -1,5 +1,8 @@
 {
-  "presets": ["es2015", "stage-0", "react"],
-  "plugins": [["antd", [{ "libraryName": "antd" }]]]
+  presets: ['@babel/env', '@babel/preset-react'],
+  plugins: [
+    ['@babel/plugin-proposal-decorators', { legacy: true }],
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    "@babel/plugin-proposal-export-default-from",
+  ]
 }
-

webapp/.eslintignore

@@ -0,0 +1,5 @@
+/build/
+/dist/
+/*.js
+/node_modules/
+/.vscode/

webapp/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  parser: 'babel-eslint',
+  env: {
+    browser: true,
+    jest: true,
+    node: true,
+  }
+};

webapp/package.json

@@ -4,8 +4,8 @@
   "description": "",
   "main": "src/index.jsx",
   "scripts": {
-    "build": "webpack  --progress --colors --config webpack.production.config.js",
-    "start": "webpack-dev-server --progress --hot --colors --open"
+    "start": "webpack-dev-server --inline --config webpack.config.dev.js --open",
+    "build": "webpack --config webpack.config.prod.js --mode production"
   },
   "dependencies": {
     "antd": "^2.1.0",
@@ -17,36 +17,62 @@
     "react": "^15.0.0",
     "react-dom": "^15.0.0",
     "react-router": "^2.4.0",
-    "whatwg-fetch": "^1.0.0"
+    "whatwg-fetch": "^1.0.0",
+    "animate.css": "^3.5.1",
+    "fetch-ie8": "^1.4.2"
   },
   "devDependencies": {
-    "animate.css": "^3.5.1",
-    "babel-core": "6.x",
-    "babel-eslint": "6.x",
-    "babel-loader": "6.x",
-    "babel-plugin-antd": "^0.5.1",
-    "babel-plugin-transform-runtime": "6.x",
-    "babel-preset-es2015": "6.x",
-    "babel-preset-react": "6.x",
-    "babel-preset-stage-0": "6.x",
     "copy-webpack-plugin": "2.x",
-    "css-loader": "~0.23.0",
-    "es5-shim": "^4.5.8",
-    "es6-promise": "^3.2.1",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "fetch-ie8": "^1.4.2",
-    "less": "^2.7.1",
-    "less-loader": "^2.2.3",
-    "open-browser-webpack-plugin": "0.0.2",
-    "style-loader": "~0.13.0",
-    "url-loader": "^0.5.7",
-    "webpack": "1.x",
-    "webpack-dev-server": "^1.14.1"
+    "less": "2.7.3",
+    "less-loader": "^4.1.0",
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.4.0",
+    "@babel/plugin-proposal-class-properties": "^7.4.0",
+    "@babel/plugin-proposal-decorators": "^7.4.0",
+    "@babel/plugin-proposal-export-default-from": "^7.2.0",
+    "@babel/polyfill": "^7.4.0",
+    "@babel/preset-env": "^7.4.1",
+    "@babel/preset-react": "^7.0.0",
+    "autoprefixer": "^8.6.5",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^24.5.0",
+    "babel-loader": "^8.0.5",
+    "clean-webpack-plugin": "^0.1.19",
+    "css-loader": "^0.28.11",
+    "css-split-webpack-plugin": "^0.2.6",
+    "es3ify-webpack-plugin": "0.0.1",
+    "eslint": "^5.1.0",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-loader": "^2.0.0",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "file-loader": "^3.0.1",
+    "friendly-errors-webpack-plugin": "^1.7.0",
+    "fs-extra": "^7.0.0",
+    "html-loader": "^0.5.5",
+    "html-webpack-plugin": "^3.2.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^24.5.0",
+    "mini-css-extract-plugin": "^0.4.0",
+    "moment": "2.22.2",
+    "node-notifier": "^5.2.1",
+    "node-sass": "^4.9.0",
+    "optimize-css-assets-webpack-plugin": "^4.0.2",
+    "ora": "^3.0.0",
+    "portfinder": "^1.0.17",
+    "postcss-flexbugs-fixes": "^3.3.1",
+    "postcss-loader": "^2.1.6",
+    "sass-loader": "^7.0.3",
+    "style-loader": "^0.21.0",
+    "uglifyjs-webpack-plugin": "^1.2.7",
+    "url-loader": "^1.0.1",
+    "webpack": "^4.12.1",
+    "webpack-bundle-analyzer": "^3.0.2",
+    "webpack-cli": "^3.0.8",
+    "webpack-dev-server": "^3.1.4",
+    "webpack-merge": "^4.1.4"
   },
   "keywords": [
     "es6",
     "react"
-  ],
-  "author": "Ding Lu",
-  "license": "MIT"
+  ]
 }

webapp/src/component/utils/fetchUtil.jsx

@@ -1,6 +1,6 @@
 import {Modal,message} from 'antd';
 import 'whatwg-fetch';
-import 'es6-promise/dist/es6-promise.min.js';
+// import 'es6-promise/dist/es6-promise.min.js';
 import 'fetch-ie8/fetch.js';
 
 export var fetchVersion='/services/v1';

webapp/src/index.html

@@ -6,7 +6,7 @@
 
         <title>风控引擎管理平台</title>
         <link rel="shortcut icon" href="/resources/images/xwf.ico">
-        <link rel="stylesheet" href="dist/style.css">
+        <!-- <link rel="stylesheet" href="dist/style.css"> -->
         <!-- Polyfills -->
         <!--[if lt IE 10]>
         <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
@@ -15,7 +15,7 @@
     <body>
         <div id="react-content"></div>
 
-        <script src="dist/common.js"></script>
-        <script src="dist/main.bundle.js"></script>
+        <!-- <script src="dist/common.js"></script>
+        <script src="dist/main.bundle.js"></script> -->
     </body>
 </html>

webapp/webpack.config.base.js

@@ -0,0 +1,142 @@
+const path = require('path');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const autoprefixer = require('autoprefixer');
+const HtmlWebPackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // MINI CSS
+const CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default;
+function assetsPath(_path) {
+  return path.posix.join('static', _path);
+}
+
+const config = {
+  context: path.resolve(),
+  resolve: {
+    extensions: ['.js', '.json', '.jsx'],
+    alias: {
+      '@': path.resolve('./src')
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        loader: 'eslint-loader',
+        enforce: 'pre',
+        include: [path.resolve('./src'), path.resolve('./test')],
+        options: {
+          formatter: require('eslint-friendly-formatter')
+        }
+      },
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'sass-loader',
+          {
+            loader: 'postcss-loader',
+            options: {
+              ident: 'postcss',
+              plugins: () => [
+                require('postcss-flexbugs-fixes'),
+                autoprefixer({
+                  browsers: [
+                    '>1%',
+                    'last 4 versions',
+                    'Firefox ESR',
+                    'not ie < 9' // React doesn't support IE8 anyway
+                  ],
+                  flexbox: 'no-2009'
+                })
+              ]
+            }
+          }
+        ]
+      },
+      {
+        test: /\.less$/,
+        use: [{
+          loader: 'style-loader',
+        }, {
+          loader: 'css-loader', // translates CSS into CommonJS
+        }, {
+          loader: 'less-loader', // compiles Less to CSS
+          options: {
+            javascriptEnabled: true,
+          },
+        }],
+      },
+      {
+        test: /\.js|jsx$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        options: {
+          presets: ['@babel/env', '@babel/preset-react'],
+          plugins: [
+            ['@babel/plugin-proposal-decorators', { legacy: true }],
+            ['@babel/plugin-proposal-class-properties', { loose: true }],
+            "@babel/plugin-proposal-export-default-from"
+          ]
+        }
+      },
+      {
+        test: /\.html$/,
+        use: [
+          {
+            loader: 'html-loader',
+            options: { minimize: true }
+          }
+        ]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  plugins: [
+    new CleanWebpackPlugin(['dist', 'build'], {
+      root: path.resolve(),
+      verbose: true,
+      dry: false
+    }),
+    new CSSSplitWebpackPlugin({
+      size: 3000
+    })
+  ],
+  // 生产
+  optimization: {
+    minimizer: [
+      new OptimizeCSSAssetsPlugin({
+        cssProcessor: require('cssnano')({
+          reduceIdents: false,
+          // 避免 cssnano 重新计算 z-index
+          safe: true
+        })
+      })
+    ]
+  }
+};
+
+module.exports = config;

webapp/webpack.config.dev.js

@@ -0,0 +1,86 @@
+const path = require('path');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const portfinder = require('portfinder');
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
+const HtmlWebPackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const baseWebpackConfig = require('./webpack.config.base.js');
+
+const devWebpackConfig = merge(baseWebpackConfig, {
+  devtool: 'cheap-module-source-map',
+  entry: ['@babel/polyfill', './src/index.jsx'],
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'app.bundle.js'
+  },
+  devServer: {
+    contentBase: path.join(__dirname, 'dist'),
+    port: 8080,
+    disableHostCheck: true,
+    host: '0.0.0.0',
+    compress: true,
+    inline: true,
+    hot: true,
+    overlay: true,
+    disableHostCheck: true, //  新增该配置项
+    proxy: [{
+        context: ["/services/v1/"],
+        target: "http://104.128.89.231:8080",
+        changeOrigin: true,
+        secure: false,
+        onProxyRes: function (proxyRes, req, res) { //
+            // console.log(proxyRes)
+            let proxyHost = proxyRes.req.getHeader('host');
+            let proxyPath = proxyRes.req.path;
+            //console.log(host, path)
+            console.log(`Proxy ${req.get('host')}${req.path} -> ${proxyHost}${proxyPath}`)
+        }
+    }]
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new MiniCssExtractPlugin({
+      // Options similar to the same options in webpackOptions.output
+      // both options are optional
+      // filename: devMode ? '[name].css' : '[name].[hash].css',
+      // chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
+      filename: 'index.[hash:8].css',
+      // chunkFilename: '[id].[chunkhash].css'
+    }),
+    new HtmlWebPackPlugin({
+      template: path.resolve('./src/index.html'),
+      filename: './index.html'
+    }),
+    new webpack.DefinePlugin({
+      'SERVICE_URL': JSON.stringify("http://localhost:3000")
+    })
+  ],
+  mode: 'development'
+});
+
+
+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = process.env.PORT || devWebpackConfig.devServer.port;
+  portfinder.getPort((err, port) => {
+    if (err) {
+      reject(err);
+    } else {
+      // publish the new Port, necessary for e2e tests
+      process.env.PORT = port;
+      // add port to devServer config
+      devWebpackConfig.devServer.port = port;
+
+      // Add FriendlyErrorsPlugin
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`]
+        }
+      }));
+
+      resolve(devWebpackConfig);
+    }
+  });
+});
+
+exports.config = devWebpackConfig;

webapp/webpack.config.js

@@ -1,72 +0,0 @@
-var webpack = require('webpack');
-var path = require('path');
-var ExtractTextPlugin = require('extract-text-webpack-plugin'); //抽取CSS文件插件
-var OpenBrowserPlugin = require('open-browser-webpack-plugin'); //自动打开浏览器插件
-
-module.exports = {
-
-    // 配置服务器
-    devServer: {
-        historyApiFallback: true,
-        hot: true,
-        host: '0.0.0.0',
-        inline: true,
-        progress: true,
-        contentBase: "./",
-        port: 8000,
-        disableHostCheck: true,
-        proxy: {
-            '/services/v1/*': {
-                changeOrigin: true,
-                //target: 'https://devradar.xwf-id.com',
-                target: 'http://radar.pgmmer.top',
-                //target: 'http://10.1.22.21:16580',
-                secure: true
-            }
-        }
-    },
-
-    // 配置入口
-    entry: [
-        path.resolve(__dirname, 'src/index.jsx')
-    ],
-    output: {
-        // path: 'dist',  //不写居然也没事，由于有服务器，生成不了静态文件，这也是一个坑
-        publicPath: 'dist',
-        filename: '[name].bundle.js'
-    },
-    module: {
-        loaders: [{
-                test: /\.css$/,
-                loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
-            }, //坑：不能用叹号链接，必须写成这种格式
-            {
-                test: /\.less$/,
-                loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader')
-                    //loader: 'style!css!less'
-            }, {
-                test: /\.js[x]?$/,
-                include: path.resolve(__dirname, 'src'),
-                exclude: /node_modules/,
-                loader: 'babel-loader'
-            }, {
-                test: /\.(png|jpg)$/,
-                loader: 'url?limit=8192'
-            }, {
-                test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
-                loader: 'url'
-            }
-        ]
-    },
-    resolve: {
-        extensions: ['', '.js', '.jsx'],
-    },
-    plugins: [
-        new webpack.optimize.CommonsChunkPlugin('common.js'),
-        new ExtractTextPlugin("style.css"),
-        new webpack.HotModuleReplacementPlugin(),
-        new OpenBrowserPlugin({
-            url: 'http://localhost:8000'
-        })
-    ]
-};

webapp/webpack.config.prod.js

@@ -0,0 +1,55 @@
+const path = require('path');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const HtmlWebPackPlugin = require('html-webpack-plugin');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const baseWebpackConfig = require('./webpack.config.base.js');
+
+const webpackConfig = merge(baseWebpackConfig, {
+  entry: ['@babel/polyfill', './src/index.jsx'],
+  externals:{},
+  output: {
+    path: path.resolve('dist'),
+    filename: '[name].[hash:8].js',
+    publicPath: './',
+    libraryTarget: 'umd'
+  },
+  plugins: [
+    new UglifyJSPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false,
+          drop_debugger: true,
+          drop_console: true
+        },
+        sourceMap: true
+      }
+    }),
+    new MiniCssExtractPlugin({
+        // Options similar to the same options in webpackOptions.output
+        // both options are optional
+        // filename: devMode ? '[name].css' : '[name].[hash].css',
+        // chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
+        filename: 'index.[hash:8].css',
+        // chunkFilename: '[id].[chunkhash].css'
+    }),
+    new HtmlWebPackPlugin({
+      template: path.resolve('./src/index.html'),
+      filename: './index.html',
+      minify: {
+        // 压缩HTML文件
+        removeComments: true, // 移除HTML中的注释
+        collapseWhitespace: false // 删除空白符与换行符
+      }
+    }),
+    new webpack.DefinePlugin({
+      'SERVICE_URL': JSON.stringify("")
+    })
+  ],
+  mode: 'production'
+});
+
+
+module.exports = webpackConfig;

webapp/webpack.production.config.js

@@ -1,48 +0,0 @@
-var webpack = require('webpack');
-var path = require('path');
-var ExtractTextPlugin = require('extract-text-webpack-plugin'); //抽取CSS文件插件
-var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
-
-module.exports = {
-    entry: [
-        path.resolve(__dirname, 'src/index.jsx')
-    ],
-    output: {
-        path: 'dist',
-        filename: '[name].bundle.js'
-    },
-    module: {
-        loaders: [{
-                test: /\.css$/,
-                loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
-            }, //坑：不能用叹号链接，必须写成这种格式
-            {
-                test: /\.less$/,
-                loader: ExtractTextPlugin.extract('style-loader', 'css-loader', 'less-loader')
-            }, {
-                test: /\.js[x]?$/,
-                include: path.resolve(__dirname, 'src'),
-                exclude: /node_modules/,
-                loader: 'babel-loader'
-            }, {
-                test: /\.(png|jpg)$/,
-                loader: 'url?limit=8192'
-            }, {
-                test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
-                loader: 'url'
-            }
-        ]
-    },
-    resolve: {
-        extensions: ['', '.js', '.jsx'],
-    },
-    plugins: [
-        new webpack.optimize.CommonsChunkPlugin('common.js'),
-        new ExtractTextPlugin("style.css"),
-        new uglifyJsPlugin({
-            compress: {
-                warnings: false
-            }
-        })
-    ]
-};