refactor: 脚手架重构

console/src/main/resources/static/console-fe/.babelrc

@@ -0,0 +1,16 @@
+{
+  "presets": [
+    "env",
+    "react-app"
+  ],
+  "plugins": [
+    "transform-decorators-legacy",
+    [
+      "babel-plugin-import",
+      {
+        "libraryName": "@alifd/next",
+        "style": true
+      }
+    ]
+  ]
+}

console/src/main/resources/static/console-fe/.gitignore

@@ -5,7 +5,6 @@
 
 # production
 /dist
-/build
 
 # misc
 .DS_Store

console/src/main/resources/static/console-fe/build.js

@@ -16,9 +16,9 @@ const cp = require('child_process');
 const fs = require('fs');
 const path = require('path');
 // 默认打包存放地址
-const buildDir = path.join(__dirname, 'build');
+const buildDir = path.join(__dirname, '../dist');
 // 打包后文件存放地址
-const targetDir = path.join(__dirname, '../');
+const targetDir = path.join(__dirname, '../../');
 
 const spawnAsync = (...args) =>
   new Promise((resolve, reject) => {

console/src/main/resources/static/console-fe/build/copy-dist.js

@@ -0,0 +1,66 @@
+const path = require('path')
+const fs = require('fs')
+
+const styles = {
+    'red': ['\x1B[31m', '\x1B[39m'],
+    'green': ['\x1B[32m', '\x1B[39m'],
+    'yellow': ['\x1B[33m', '\x1B[39m']
+}
+
+const distPath = path.join(__dirname, '../dist/')
+const rootPath = path.join(__dirname, '../../')
+
+console.log('\n\n> Start copying the dist directory...\n')
+
+function delDir(dest) {
+    let paths = fs.readdirSync(dest)
+    paths.forEach(function (p) {
+        const target = path.join(dest, p)
+        const st = fs.statSync(target)
+        if (st.isFile()) {
+            console.log(`\r${styles.red[0]}Delete File${styles.red[1]}: ${target}`)
+            fs.unlinkSync(target)
+        }
+        if (st.isDirectory()) {
+            console.log(`\r${styles.red[0]}Delete Directory${styles.red[1]}: ${target}`)
+            delDir(target)
+        }
+    })
+    paths = fs.readdirSync(dest)
+    if (!paths.length) {
+        fs.rmdirSync(dest)
+    }
+}
+
+function copyDir(source, dest) {
+    const paths = fs.readdirSync(source)
+    paths.forEach(function (p) {
+        const src = path.join(source, p)
+        const target = path.join(dest, p)
+        const st = fs.statSync(src)
+        if (st.isFile()) {
+            if (fs.existsSync(target)) {
+                console.log(`\r${styles.red[0]}Delete File${styles.red[1]}: ${target}`)
+                fs.unlinkSync(target)
+            }
+            console.log(`\r${styles.yellow[0]}Copy File${styles.yellow[1]}: ${target}`)
+            const readStream = fs.createReadStream(src)
+            const writeStream = fs.createWriteStream(target)
+            readStream.pipe(writeStream)
+        }
+        if (st.isDirectory()) {
+            if (fs.existsSync(target)) {
+                console.log(`\r${styles.red[0]}Delete Directory${styles.red[1]}: ${target}`)
+                delDir(target)
+            }
+            console.log(`\r${styles.yellow[0]}Create Directory${styles.yellow[1]}: ${target}`)
+            fs.mkdirSync(target)
+            copyDir(src, target)
+        }
+    })
+}
+
+
+copyDir(distPath, rootPath)
+
+console.log(`\n>${styles.green[0]} Copy complete!${styles.green[0]}\n`)

console/src/main/resources/static/console-fe/build/webpack.base.conf.js

@@ -0,0 +1,77 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const isDev = process.env.NODE_ENV !== 'production';
+
+function resolve(dir) {
+  return path.join(__dirname, '..', dir);
+}
+
+module.exports = {
+  entry: {
+    main: './src/index.js',
+  },
+  output: {
+    filename: './js/[name].[chunkhash:8].js',
+    path: path.resolve(__dirname, '../dist'),
+  },
+  resolve: {
+    extensions: ['.js', '.jsx', '.json'],
+    alias: {
+      '@': resolve('src'),
+      'utils': resolve('src/utils'),
+      'components': resolve('src/components'),
+    },
+  },
+  module: {
+    rules: [{
+      test: /\.(css|scss)$/,
+      use: [
+        isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
+        'css-loader',
+        'sass-loader',
+      ],
+    }, {
+      test: /\.(js|jsx)$/,
+      loader: 'eslint-loader',
+      enforce: 'pre',
+      include: [resolve('src')],
+    }, {
+      test: /\.(js|jsx)$/,
+      exclude: /node_modules/,
+      use: ['babel-loader'],
+    }, {
+      test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+      loader: 'url-loader',
+      options: {
+        limit: 10000,
+        name: '/images/[name].[hash:8].[ext]',
+      },
+    }, {
+      test: /\.(ttf|woff|svg)$/,
+      use: [{
+        loader: 'url-loader',
+        options: {
+          name: '/fonts/[name].[hash:8].[ext]',
+        },
+      }],
+
+    }],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: './public/index.html',
+      minify: !isDev,
+    }),
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../public'),
+        to: './',
+        ignore: ['index.html'],
+      },
+    ]),
+  ],
+};

console/src/main/resources/static/console-fe/build/webpack.dev.conf.js

@@ -0,0 +1,15 @@
+const base = require('./webpack.base.conf')
+
+module.exports = Object.assign({}, base, {
+    devServer: {
+        port: 8000,
+        proxy: [{
+            context: ['/'],
+            changeOrigin: true,
+            secure: false,
+            target: 'http://11.163.128.36:8848'
+        }],
+        disableHostCheck: true
+    },
+    mode: 'development'
+})

console/src/main/resources/static/console-fe/build/webpack.prod.conf.js

@@ -0,0 +1,30 @@
+const path = require('path')
+const base = require('./webpack.base.conf')
+const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin")
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const CleanWebpackPlugin = require('clean-webpack-plugin')
+
+module.exports = Object.assign({}, base, {
+    optimization: {
+        minimizer: [
+            new UglifyJsPlugin({
+                cache: true,
+                parallel: true,
+                sourceMap: true
+            }),
+            new OptimizeCSSAssetsPlugin({})
+        ]
+    },
+    plugins: [
+        new CleanWebpackPlugin(path.resolve(__dirname, '../dist'), {
+            root: path.resolve(__dirname, '../')
+        }),
+        ...base.plugins,
+        new MiniCssExtractPlugin({
+            filename: "./css/[name].[hash:8].css",
+            chunkFilename: "[id].css"
+        })
+    ],
+    mode: 'production'
+})

console/src/main/resources/static/console-fe/package.json

@@ -1,4 +1,14 @@
 {
+  "name": "console-fe",
+  "version": "1.0.0",
+  "description": "console fe",
+  "main": "index.js",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.conf.js --open",
+    "build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js && node build/copy-dist.js",
+    "eslint": "eslint --ext .js src/",
+    "eslint-fix": "eslint  --ext .js --fix src/"
+  },
   "private": true,
   "husky": {
     "hooks": {
@@ -11,39 +21,64 @@
       "git add"
     ]
   },
-  "scripts": {
-    "start": "roadhog dev",
-    "build": "node build.js",
-    "dist": "roadhog build",
-    "eslint": "eslint --ext .js src/",
-    "eslint-fix": "eslint  --ext .js --fix src/"
-  },
-  "dependencies": {
-    "@alifd/next": "^1.7.6",
-    "dva": "^2.3.1",
-    "jquery": "^3.3.1",
-    "moment": "^2.22.2",
-    "prop-types": "^15.6.2",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alibaba/nacos.git"
   },
   "devDependencies": {
+    "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "^10.0.1",
-    "babel-plugin-dva-hmr": "^0.3.2",
+    "babel-loader": "^7.1.5",
+    "babel-plugin-import": "^1.10.0",
+    "babel-plugin-transform-decorators": "^6.24.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.5",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-2": "^6.24.1",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react-app": "^3.1.1",
+    "babel-runtime": "^6.23.0",
+    "clean-webpack-plugin": "^0.1.19",
+    "copy-webpack-plugin": "^4.6.0",
+    "cross-env": "^5.2.0",
+    "css-loader": "^1.0.0",
     "eslint": "^5.9.0",
     "eslint-config-ali": "^4.0.0",
     "eslint-config-prettier": "^3.3.0",
+    "eslint-loader": "^2.1.1",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-prettier": "^3.0.0",
     "eslint-plugin-react": "^7.11.1",
+    "file-loader": "^2.0.0",
+    "html-webpack-plugin": "^3.2.0",
     "husky": "^1.1.4",
     "lint-staged": "^8.0.4",
+    "mini-css-extract-plugin": "^0.4.3",
+    "node-sass": "^4.1.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "prettier": "1.15.2",
-    "roadhog": "^2.0.0"
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.0",
+    "uglifyjs-webpack-plugin": "^2.0.1",
+    "url-loader": "^1.1.1",
+    "webpack": "^4.20.2",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.9"
+  },
+  "dependencies": {
+    "@alifd/next": "^1.9.19",
+    "axios": "^0.18.0",
+    "dva": "^2.4.1",
+    "jquery": "^3.3.1",
+    "moment": "^2.22.2",
+    "prop-types": "^15.6.2",
+    "query-string": "^6.2.0",
+    "react": "^16.6.0",
+    "react-dom": "^16.6.0",
+    "react-redux": "^5.1.0",
+    "react-router": "^4.3.1",
+    "react-router-dom": "^4.3.1",
+    "react-router-redux": "^4.0.8",
+    "redux": "^4.0.1",
+    "redux-thunk": "^2.3.0"
   }
 }

console/src/main/resources/static/console-fe/src/components/BatchHandle/BatchHandle.js

@@ -15,7 +15,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Dialog, Pagination, Transfer } from '@alifd/next';
 import { request, aliwareIntl } from '../../globalLib';
-import './index.less';
+import './index.scss';
 
 class BatchHandle extends React.Component {
   static propTypes = {

console/src/main/resources/static/console-fe/src/components/CloneDialog/CloneDialog.js

@@ -12,7 +12,7 @@
  */
 
 import React from 'react';
-import './index.less';
+import './index.scss';
 import { getParams, request, aliwareIntl } from '../../globalLib';
 import { Button, Dialog, Field, Form, Select } from '@alifd/next';
 

console/src/main/resources/static/console-fe/src/components/DeleteDialog/DeleteDialog.js

@@ -12,7 +12,7 @@
  */
 
 import React from 'react';
-import './index.less';
+import './index.scss';
 import { aliwareIntl } from '../../globalLib';
 import { Button, Dialog, Grid, Icon } from '@alifd/next';
 

console/src/main/resources/static/console-fe/src/components/DiffEditorDialog/DiffEditorDialog.js

@@ -14,7 +14,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { aliwareIntl } from '../../globalLib';
-import './index.less';
+import './index.scss';
 import { Button, Dialog, Grid } from '@alifd/next';
 
 const { Row, Col } = Grid;

console/src/main/resources/static/console-fe/src/components/EditorNameSpace/EditorNameSpace.js

@@ -12,7 +12,7 @@
  */
 
 import React from 'react';
-import './index.less';
+import './index.scss';
 import { request, aliwareIntl } from '../../globalLib';
 import { Button, Dialog, Field, Form, Input, Loading } from '@alifd/next';
 

console/src/main/resources/static/console-fe/src/components/ExportDialog/ExportDialog.js

@@ -13,7 +13,7 @@
 
 import React from 'react';
 import { aliwareIntl } from '../../globalLib';
-import './index.less';
+import './index.scss';
 import { Button, Dialog, Form } from '@alifd/next';
 
 const FormItem = Form.Item;

console/src/main/resources/static/console-fe/src/components/ImportDialog/ImportDialog.js

@@ -13,7 +13,7 @@
 
 import React from 'react';
 import { aliwareIntl } from '../../globalLib';
-import './index.less';
+import './index.scss';
 import { Balloon, Button, Dialog, Form, Icon, Select, Upload } from '@alifd/next';
 
 const FormItem = Form.Item;

console/src/main/resources/static/console-fe/src/components/NameSpaceList/NameSpaceList.js

@@ -13,7 +13,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import './index.less';
+import './index.scss';
 import { Dialog } from '@alifd/next';
 import { getParams, setParams, request, aliwareIntl } from '../../globalLib';
 

console/src/main/resources/static/console-fe/src/components/NewNameSpace/NewNameSpace.js

@@ -12,7 +12,7 @@
  */
 
 import React from 'react';
-import './index.less';
+import './index.scss';
 import { request, aliwareIntl } from '../../globalLib';
 import { Button, Dialog, Field, Form, Input, Loading } from '@alifd/next';
 

console/src/main/resources/static/console-fe/src/components/RegionGroup/RegionGroup.js

@@ -17,7 +17,7 @@ import { Button } from '@alifd/next';
 import $ from 'jquery';
 import NameSpaceList from '../NameSpaceList';
 import { setParams, request } from '../../globalLib';
-import './index.less';
+import './index.scss';
 
 class RegionGroup extends React.Component {
   static propTypes = {

console/src/main/resources/static/console-fe/src/components/ShowCodeing/ShowCodeing.js

@@ -12,7 +12,7 @@
  */
 
 import React from 'react';
-import './index.less';
+import './index.scss';
 import { getParams, aliwareIntl } from '../../globalLib';
 import { Dialog, Loading, Tab } from '@alifd/next';
 

console/src/main/resources/static/console-fe/src/components/SuccessDialog/SuccessDialog.js

@@ -14,9 +14,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { aliwareIntl } from '../../globalLib';
-import './index.less';
 import { Button, Dialog, Grid, Icon } from '@alifd/next';
 
+import './index.scss';
+
 const { Row, Col } = Grid;
 
 class SuccessDialog extends React.Component {

console/src/main/resources/static/console-fe/src/index.js

@@ -13,8 +13,8 @@
 
 import dva from 'dva';
 import '@alifd/next/dist/next.css';
-import './index.css';
-import './index.less';
+import './index.scss';
+import './index1.scss';
 
 // 1. Initialize
 const app = dva();

console/src/main/resources/static/console-fe/src/layouts/Header.js

@@ -16,7 +16,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import siteConfig from '../config';
 import { getLink } from '../utils/nacosutil';
-import './index.css';
+import './index.scss';
 
 const languageSwitch = [
   {

console/src/main/resources/static/console-fe/src/lib.js

@@ -197,9 +197,5 @@ window.addEventListener('resize', () => {
 // 判断是否是国际站国际用户
 window.isIntel = function() {
   const { host } = window.location;
-  if (host.indexOf('alibabacloud.com') !== -1) {
-    return true;
-  } else {
-    return false;
-  }
+  return host.indexOf('alibabacloud.com') !== -1;
 };

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/ConfigDetail/ConfigDetail.js

@@ -12,9 +12,10 @@
  */
 
 import React from 'react';
-import './index.less';
-import { getParams, request, aliwareIntl } from '../../../globalLib';
 import { Button, Dialog, Field, Form, Input, Loading, Tab } from '@alifd/next';
+import { getParams, request, aliwareIntl } from '../../../globalLib';
+
+import './index.scss';
 
 const TabPane = Tab.Item;
 const FormItem = Form.Item;

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/ConfigEditor/ConfigEditor.js

@@ -16,7 +16,7 @@ import $ from 'jquery';
 import { getParams, request, aliwareIntl } from '../../../globalLib';
 import DiffEditorDialog from '../../../components/DiffEditorDialog';
 import SuccessDialog from '../../../components/SuccessDialog';
-import './index.less';
+import './index.scss';
 import {
   Balloon,
   Button,

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/ConfigRollback/ConfigRollback.js

@@ -12,7 +12,7 @@
  */
 
 import React from 'react';
-import './index.less';
+import './index.scss';
 import { getParams, request, aliwareIntl } from '../../../globalLib';
 import { Button, Dialog, Field, Form, Input } from '@alifd/next';
 

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/ConfigSync/ConfigSync.js

@@ -15,7 +15,7 @@ import React from 'react';
 import { Button, Checkbox, Dialog, Field, Form, Input, Loading } from '@alifd/next';
 import SuccessDialog from '../../../components/SuccessDialog';
 import { getParams, request, aliwareIntl } from '../../../globalLib';
-import './index.less';
+import './index.scss';
 
 class ConfigSync extends React.Component {
   constructor(props) {

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/ConfigurationManagement/ConfigurationManagement.js

@@ -21,7 +21,7 @@ import CloneDialog from '../../../components/CloneDialog';
 import ImportDialog from '../../../components/ImportDialog';
 import ExportDialog from '../../../components/ExportDialog';
 import { getParams, setParams, request, aliwareIntl } from '../../../globalLib';
-import './index.less';
+import './index.scss';
 import {
   Balloon,
   Button,

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/HistoryDetail/HistoryDetail.js

@@ -13,9 +13,10 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getParams, request, aliwareIntl } from '../../../globalLib';
-import './index.less';
 import { Button, Field, Form, Input } from '@alifd/next';
+import { getParams, request, aliwareIntl } from '../../../globalLib';
+
+import './index.scss';
 
 class HistoryDetail extends React.Component {
   static propTypes = {

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/HistoryRollback/HistoryRollback.js

@@ -15,7 +15,7 @@ import React from 'react';
 import { Field, Form, Input, Loading, Pagination, Table } from '@alifd/next';
 import RegionGroup from '../../../components/RegionGroup';
 import { getParams, setParams, request, aliwareIntl } from '../../../globalLib';
-import './index.less';
+import './index.scss';
 
 class HistoryRollback extends React.Component {
   constructor(props) {

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/ListeningToQuery/ListeningToQuery.js

@@ -14,9 +14,10 @@
 import React from 'react';
 import RegionGroup from '../../../components/RegionGroup';
 import { getParams, request, aliwareIntl } from '../../../globalLib';
-import './index.less';
 import { Field, Form, Grid, Input, Loading, Pagination, Select, Table } from '@alifd/next';
 
+import './index.scss';
+
 const FormItem = Form.Item;
 const { Row, Col } = Grid;
 

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/NewConfig/NewConfig.js

@@ -15,7 +15,6 @@ import React from 'react';
 import $ from 'jquery';
 import SuccessDialog from '../../../components/SuccessDialog';
 import { getParams, setParams, request, aliwareIntl } from '../../../globalLib';
-import './index.less';
 import {
   Balloon,
   Button,
@@ -30,6 +29,8 @@ import {
   Radio,
 } from '@alifd/next';
 
+import './index.scss';
+
 const FormItem = Form.Item;
 const { Group: RadioGroup } = Radio;
 const { AutoComplete: Combobox } = Select;

console/src/main/resources/static/console-fe/src/pages/NameSpace/NameSpace.js

@@ -18,7 +18,7 @@ import DeleteDialog from '../../components/DeleteDialog';
 import NewNameSpace from '../../components/NewNameSpace';
 import EditorNameSpace from '../../components/EditorNameSpace';
 import { getParams, setParams, request, aliwareIntl } from '../../globalLib';
-import './index.less';
+import './index.scss';
 
 class NameSpace extends React.Component {
   constructor(props) {

console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceDetail/ServiceDetail.js

@@ -19,7 +19,7 @@ import EditClusterDialog from './EditClusterDialog';
 import InstanceTable from './InstanceTable';
 import queryString from 'query-string';
 import { I18N } from './constant';
-import './ServiceDetail.less';
+import './ServiceDetail.scss';
 
 const FormItem = Form.Item;
 const pageFormLayout = {

console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceList/ServiceList.js

@@ -29,7 +29,7 @@ import {
 } from '@alifd/next';
 import EditServiceDialog from '../ServiceDetail/EditServiceDialog';
 import { I18N, STATUS_COLOR_MAPPING } from './constant';
-import './ServiceList.less';
+import './ServiceList.scss';
 
 const FormItem = Form.Item;
 const { Row, Col } = Grid;

console/src/main/resources/static/console-fe/src/routes/IndexPage.js

@@ -13,7 +13,7 @@
 
 import React from 'react';
 import { connect } from 'dva';
-import styles from './IndexPage.css';
+import styles from './IndexPage.scss';
 
 function IndexPage() {
   return (