Merge pull request #13 from opennaslab/chsh_dev

前端基础脚手架初始化

.gitignore

@@ -1 +1,2 @@
-.vscode
+.vscode
+webui/node_modules

webui/.babelrc

@@ -0,0 +1,24 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/transform-runtime",
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+    ["@babel/plugin-proposal-class-properties", { "loose": true }],
+    [
+      "import",
+      {
+        "libraryName": "antd",
+        "libraryDirectory": "es",
+        "style": false // `style: true` 会加载 less 文件
+      }
+    ]
+  ]
+}

webui/.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*.{js,py}]
+charset = utf-8
+
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

webui/.eslintrc.js

@@ -0,0 +1,43 @@
+module.exports = {
+  extends: ['airbnb', 'prettier'],
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+    jquery: true,
+  },
+  parser: 'babel-eslint',
+  plugins: ['react', 'babel'],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warning' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warning' : 'off',
+    'prefer-destructuring': 0,
+    'prefer-promise-reject-errors': 1,
+    'no-else-return': 0,
+    'import/no-extraneous-dependencies': 0,
+    'import/no-unresolved': [2, { ignore: ['^@/'] }],
+    'react/jsx-props-no-spreading': 0,
+    'react/jsx-one-expression-per-line': 0,
+    'react/prop-types': 0,
+    'react/forbid-prop-types': 0,
+    'react/jsx-indent': 0,
+    'react/jsx-wrap-multilines': [
+      'error',
+      {
+        declaration: false,
+        assignment: false,
+      },
+    ],
+    'react/jsx-filename-extension': [
+      1,
+      {
+        extensions: ['.js', '.jsx'],
+      },
+    ],
+    'jsx-a11y/no-static-element-interactions': 0,
+    'jsx-a11y/anchor-has-content': 0,
+    'jsx-a11y/click-events-have-key-events': 0,
+    'jsx-a11y/anchor-is-valid': 0,
+    // 'comma-dangle': ['error', 'always-multiline'],
+  },
+};

webui/.postcssrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+};
+
+// package.json中配置兼容浏览器
+// "browserslist": [
+//   "> 1%",
+//   "last 2 versions",
+//   "not ie <= 10"
+// ]

webui/.prettierignore

@@ -0,0 +1,18 @@
+
+package.json
+.umi
+.umi-production
+lib/
+es/
+dist/
+coverage/
+LICENSE
+yarn.lock
+yarn-error.log
+*.sh
+.gitignore
+.npmignore
+.prettierignore
+.DS_Store
+.editorconfig
+.eslintignore

webui/.prettierrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  singleQuote: true,
+  trailingComma: 'all',
+  printWidth: 120,
+  // overrides: [
+  //   {
+  //     files: '.prettierrc',
+  //     options: {
+  //       parser: 'json',
+  //     },
+  //   },
+  // ],
+};

webui/.stylelintrc

@@ -0,0 +1,9 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+  "rules": {
+    "declaration-empty-line-before": null,
+    "no-descending-specificity": null,
+    "selector-pseudo-class-no-unknown": null,
+    "selector-pseudo-element-colon-notation": null
+  }
+}

webui/build/webpack.common.js

@@ -0,0 +1,108 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
+const os = require('os');
+const HappyPack = require('happypack');
+
+const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
+
+const srcDir = path.join(__dirname, '../src');
+const devMode = process.env.NODE_ENV !== 'production';
+
+module.exports = {
+  entry: {
+    main: path.join(__dirname, '../src/main.js'),
+  },
+  output: {
+    path: path.join(__dirname, '../dist'),
+    filename: '[name].[chunkhash:8].js',
+    // publicPath: "/",
+    chunkFilename: 'chunk/[name].[chunkhash:8].js',
+  },
+  module: {
+    rules: [
+      // {
+      //   test: /\.(js|jsx)$/,
+      //   include: [srcDir],
+      //   loader: 'eslint-loader',
+      //   enforce: 'pre',
+      //   options: {
+      //     fix: true,
+      //   },
+      // },
+      {
+        test: /\.(js|jsx)$/,
+        include: [srcDir],
+        exclude: /(node_modules|bower_components)/,
+        use: ['happypack/loader?id=happybabel'],
+      },
+      {
+        test: /\.less$/,
+        use: [
+          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
+          'css-loader',
+          'postcss-loader',
+          'less-loader',
+        ],
+      },
+      {
+        test: /\.css$/,
+        use: [
+          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
+          'css-loader',
+          'postcss-loader',
+        ],
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        use: ['url-loader'],
+        include: [srcDir],
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        use: ['url-loader'],
+        include: [srcDir],
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        use: ['url-loader'],
+        include: [srcDir],
+      },
+    ],
+  },
+  plugins: [
+    // 开启 happypack 的线程池
+    new HappyPack({
+      id: 'happybabel',
+      loaders: ['babel-loader?cacheDirectory=true'],
+      threadPool: happyThreadPool,
+      // cache: true,
+      verbose: true,
+    }),
+    new HtmlWebpackPlugin({
+      template: `${srcDir}/index.html`,
+    }),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: `${srcDir}/assets/images/nowthen.jpg`,
+          to: 'nowthen.jpg',
+        },
+      ],
+    }),
+    new AntdDayjsWebpackPlugin()
+  ],
+  resolve: {
+    alias: {
+      '@': srcDir,
+      '@pages': `${srcDir}/pages`,
+    },
+  },
+  // optimization: {
+  //   removeAvailableModules: true, // 删除已解决的chunk (默认 true)
+  //   removeEmptyChunks: true, // 删除空的chunks (默认 true)
+  //   mergeDuplicateChunks: true // 合并重复的chunk (默认 true)
+  // }
+};

webui/build/webpack.dev.js

@@ -0,0 +1,31 @@
+const webpack = require('webpack');
+const {merge} = require('webpack-merge');
+// const path = require('path');
+
+const commonConfig = require('./webpack.common');
+
+module.exports = merge(commonConfig, {
+  mode: 'development',
+  // 开发环境本地启动的服务配置
+  devServer: {
+    port: 9001,
+    hot: true,
+    open: true,
+    historyApiFallback: true,
+    compress: true,
+    // 接口代理转发
+    proxy: {
+      '/testapi': {
+        target: 'https://www.easy-mock.com/mock/5dff0acd5b188e66c6e07329/react-template',
+        changeOrigin: true,
+        secure: false,
+        pathRewrite: { '^/testapi': '' },
+      },
+    },
+  },
+  plugins: [ new webpack.HotModuleReplacementPlugin()],
+  devtool: 'eval-source-map',
+  // optimization: {
+  //   moduleIds: 'named',
+  // },
+});

webui/build/webpack.prod.js

@@ -0,0 +1,74 @@
+const webpack = require('webpack');
+const { merge } = require('webpack-merge');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const WebpackBundleAnalyzer = require('webpack-bundle-analyzer');
+
+const commonConfig = require('./webpack.common');
+
+let config = merge(commonConfig, {
+  mode: 'production',
+  plugins: [
+    new CleanWebpackPlugin(),
+    new MiniCssExtractPlugin({
+      filename: '[name].[contenthash:8].css',
+      chunkFilename: 'chunk/[id].[contenthash:8].css',
+    }),
+    new webpack.ids.HashedModuleIdsPlugin(),
+  ],
+  // optimization: {
+  //   splitChunks: {
+  //     cacheGroups: {
+  //       commons: {
+  //         name: "commons",
+  //         chunks: "initial",
+  //         minChunks: 2
+  //       }
+  //     }
+  //   }
+  // }
+  performance: {
+    maxEntrypointSize: 400000,
+    maxAssetSize: 800000,
+  },
+  optimization: {
+    runtimeChunk: {
+      name: 'manifest',
+    },
+    splitChunks: {
+      chunks: 'all', // 默认只作用于异步模块，为`all`时对所有模块生效,`initial`对同步模块有效
+      cacheGroups: {
+        dll: {
+          test: /[\\/]node_modules[\\/](react|react-dom|react-dom-router|babel-polyfill|mobx|mobx-react|mobx-react-dom|antd|@ant-design)/,
+          minChunks: 1,
+          priority: 2,
+          name: 'dll',
+        },
+        codeMirror: {
+          test: /[\\/]node_modules[\\/](react-codemirror|codemirror)/,
+          minChunks: 1,
+          priority: 2,
+          name: 'codemirror',
+        },
+        vendors: {
+          test: /[\\/]node_modules[\\/]/,
+          minChunks: 1,
+          priority: 1,
+          name: 'vendors',
+        },
+      },
+    },
+  },
+});
+
+if (process.env.npm_lifecycle_event === 'build:watch') {
+  config = merge(config, {
+    devtool: 'cheap-source-map',
+  });
+}
+if (process.env.npm_lifecycle_event === 'build:report') {
+  const BundleAnalyzerPlugin = WebpackBundleAnalyzer.BundleAnalyzerPlugin;
+  config.plugins.push(new BundleAnalyzerPlugin());
+}
+
+module.exports = config;