----初始化项目

console-ui/build/copy-dist.js

@@ -0,0 +1,82 @@
+/*
+ * Copyright 1999-2018 Alibaba Group Holding Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+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/src/main/resources/static/');
+
+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-ui/build/copyFile.js

@@ -0,0 +1,45 @@
+/*
+ * Copyright 1999-2018 Alibaba Group Holding Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const fs = require('fs');
+const path = require('path');
+// 默认打包存放地址
+const srcDir = path.join(__dirname, '../dist');
+// 打包后文件存放地址
+const destDir = path.join(__dirname, '../../console/src/main/resources/static/');
+
+const mkdir = dir => {
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir);
+    }
+  };
+
+const copyList = ['js/main.js', 'css/main.css', 'index.html'];
+
+copyList.forEach(_fileName => {
+    const srcFileName = path.join(srcDir, _fileName);
+    const destFileName = path.join(destDir, _fileName);
+
+    if (!fs.existsSync(srcFileName)) {
+        return;
+    }
+
+    mkdir(path.dirname(destFileName));
+
+    const readStream = fs.createReadStream(srcFileName);
+    const writeStream = fs.createWriteStream(destFileName);
+    readStream.pipe(writeStream);
+});

console-ui/build/webpack.base.conf.js

@@ -0,0 +1,113 @@
+/*
+ * Copyright 1999-2018 Alibaba Group Holding Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+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].js',
+    path: path.resolve(__dirname, '../dist'),
+  },
+  resolve: {
+    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
+    alias: {
+      '@': resolve('src'),
+      utils: resolve('src/utils'),
+      components: resolve('src/components'),
+    },
+  },
+  externals: {
+    jquery: 'jQuery'
+  },
+  node: {
+    fs: 'empty'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(css|scss)$/,
+        use: [isDev ? 'style-loader' : MiniCssExtractPlugin.loader, {
+          loader: 'css-loader',
+          options:{
+            url: (url) => {
+              return isDev || !url.includes("console-ui");
+            }
+          }
+        }, 'sass-loader'],
+      },
+      {
+        test: /\.(js|jsx)$/,
+        loader: 'eslint-loader',
+        enforce: 'pre',
+        include: [resolve('src')],
+      },
+      {
+        test: /\.(js|jsx|ts|tsx)$/,
+        include: [resolve('src')],
+        use: ['babel-loader'],
+      },
+      {
+        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: '/img/[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.ejs',
+      templateParameters: {
+        contextPath: isDev ? './' : 'console-ui/public/'
+      },
+      hash: true,
+      minify: !isDev,
+    }),
+    new CopyWebpackPlugin([
+      {
+        from: resolve('../console/src/main/resources/static/console-ui/public'),
+        to: './',
+        ignore: ['index.html'],
+      },
+    ]),
+  ],
+};

console-ui/build/webpack.dev.conf.js

@@ -0,0 +1,56 @@
+/*
+ * Copyright 1999-2018 Alibaba Group Holding Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const path = require('path');
+const webpack = require('webpack');
+const base = require('./webpack.base.conf');
+
+const [cssLoader]  = base.module.rules;
+cssLoader.use.push({
+  loader: '@alifd/next-theme-loader',
+  options: {
+    modifyVars: {
+      '$icon-font-path': '"/icons/icon-font"',
+      '$font-custom-path': '"/fonts/"'
+    }
+  }
+})
+module.exports = Object.assign({}, base, {
+  output: {
+    filename: './js/[name].js',
+    path: path.resolve(__dirname, '../dist'),
+  },
+  devServer: {
+    port: process.env.PORT || 8000,
+    proxy: [{
+      context: ['/'],
+      changeOrigin: true,
+      secure: false,
+      target: 'http://localhost:8848',
+      pathRewrite: {'^/v1' : '/nacos/v1', '^/v2' : '/nacos/v2'}
+    }],
+    disableHostCheck: true,
+    open: true,
+    hot: true,
+    overlay: true
+  },
+  mode: 'development',
+  devtool: 'eval-source-map',
+  plugins: [
+    ...base.plugins,
+    new webpack.HotModuleReplacementPlugin()
+  ]
+});

console-ui/build/webpack.prod.conf.js

@@ -0,0 +1,58 @@
+/*
+ * Copyright 1999-2018 Alibaba Group Holding Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+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');
+
+const [cssLoader]  = base.module.rules;
+cssLoader.use.push({
+  loader: '@alifd/next-theme-loader',
+  options: {
+    modifyVars: {
+      '$icon-font-path': '"../console-ui/public/icons/icon-font"',
+      '$font-custom-path': '"../console-ui/public/fonts/"',
+      '$adv-icon-font-path': '"../console-ui/public/fonts/font_1533967_slipq25tezj"',
+    }
+  }
+})
+module.exports = Object.assign({}, base, {
+  optimization: {
+    minimizer: [
+      new UglifyJsPlugin({
+        cache: true,
+        parallel: true
+      }),
+      new OptimizeCSSAssetsPlugin({}),
+    ],
+  },
+  plugins: [
+    new CleanWebpackPlugin({
+      cleanOnceBeforeBuildPatterns:[
+        path.resolve(__dirname, '../dist/**'),
+      ]
+    }),
+    ...base.plugins,
+    new MiniCssExtractPlugin({
+      filename: './css/[name].css',
+      chunkFilename: '[id].css',
+    }),
+  ],
+  mode: 'production'
+});