umi init

.babelrc

@@ -1,20 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": {
-          // 大于相关浏览器版本无需用到 preset-env
-          "edge": 17,
-          "firefox": 60,
-          "chrome": 49,
-          "safari": 11
-        },
-        "corejs": "2", // <---
-        // 根据代码逻辑中用到的 ES6+语法进行方法的导入，而不是全部导入
-        "useBuiltIns": "usage"
-      }
-    ],
-    "@babel/preset-react"
-  ]
-}

.browserslistrc

@@ -1,4 +0,0 @@
-> 1%
-chrome 49
-ie 9
-

.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

.gitignore

@@ -1,26 +1,20 @@
-package-lock.json
-*.lock
-.DS_Store
-node_modules
-dist
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# local env files
-.env.local
-.env.*.local
+# dependencies
+/node_modules
+/npm-debug.log*
+/yarn-error.log
+/yarn.lock
+/package-lock.json
 
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+# production
+/dist
 
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+# misc
+.DS_Store
 
-# 其他数据文件
-json
+# umi
+/src/.umi
+/src/.umi-production
+/src/.umi-test
+/.env.local

.prettierignore

@@ -0,0 +1,8 @@
+**/*.md
+**/*.svg
+**/*.ejs
+**/*.html
+package.json
+.umi
+.umi-production
+.umi-test

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": { "parser": "json" }
+    }
+  ]
+}

.umirc.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'umi';
+
+export default defineConfig({
+  nodeModulesTransform: {
+    type: 'none',
+  },
+  routes: [{ path: '/', component: '@/pages/index' }],
+});

README.md

@@ -0,0 +1,15 @@
+# umi project
+
+## Getting Started
+
+Install dependencies,
+
+```bash
+$ yarn
+```
+
+Start the dev server,
+
+```bash
+$ yarn start
+```

config/createPages.js

@@ -1,89 +0,0 @@
-#!/usr/bin/env node
-const fs = require('fs');
-const filePath = process.argv[2];
-const name = process.argv[3];
-
-var styles = {
-  bold: ['\x1B[1m', '\x1B[22m'],
-  italic: ['\x1B[3m', '\x1B[23m'],
-  underline: ['\x1B[4m', '\x1B[24m'],
-  inverse: ['\x1B[7m', '\x1B[27m'],
-  strikethrough: ['\x1B[9m', '\x1B[29m'],
-  white: ['\x1B[37m', '\x1B[39m'],
-  grey: ['\x1B[90m', '\x1B[39m'],
-  black: ['\x1B[30m', '\x1B[39m'],
-  blue: ['\x1B[34m', '\x1B[39m'],
-  cyan: ['\x1B[36m', '\x1B[39m'],
-  green: ['\x1B[32m', '\x1B[39m'],
-  magenta: ['\x1B[35m', '\x1B[39m'],
-  red: ['\x1B[31m', '\x1B[39m'],
-  yellow: ['\x1B[33m', '\x1B[39m'],
-  whiteBG: ['\x1B[47m', '\x1B[49m'],
-  greyBG: ['\x1B[49;5;8m', '\x1B[49m'],
-  blackBG: ['\x1B[40m', '\x1B[49m'],
-  blueBG: ['\x1B[44m', '\x1B[49m'],
-  cyanBG: ['\x1B[46m', '\x1B[49m'],
-  greenBG: ['\x1B[42m', '\x1B[49m'],
-  magentaBG: ['\x1B[45m', '\x1B[49m'],
-  redBG: ['\x1B[41m', '\x1B[49m'],
-  yellowBG: ['\x1B[43m', '\x1B[49m'],
-};
-if (!filePath || !name) {
-  console.error(styles.red[0], `输入错误`);
-  console.error(
-    styles.red[0],
-    `请输入${!filePath ? '路径' : ''}${!name ? '名字' : ''}!`
-  );
-  return;
-}
-
-try {
-  function firstUpperCase(name) {
-    return name.replace(/\b(\w)(\w*)/g, function ($0, $1, $2) {
-      return $1.toUpperCase() + $2.toLowerCase();
-    });
-  }
-  const fileName = firstUpperCase(name);
-  fs.mkdirSync(`./src/pages/${fileName}`);
-  fs.writeFileSync(`./src/pages/${fileName}/index.js`, index());
-  fs.writeFileSync(`./src/pages/${fileName}/${fileName}.tsx`, tmp());
-  fs.writeFileSync(`./src/pages/${fileName}/${fileName}.less`, style());
-
-  function index() {
-    return `import ${fileName} from './${fileName}.tsx';
-import './${fileName}.less';
-
-export default ${fileName}
-`;
-  }
-
-  function tmp() {
-    return `import React from 'react';
-import { Button } from 'antd';
-
-export default class ${fileName} extends React.Component {
-  test() {
-    console.log('${fileName}');
-  }
-  render() {
-    return (
-      <div className="${name}-wrapper">
-        ${fileName}
-        <div>
-          <Button onClick={(e) => this.test()}>goto</Button>
-        </div>
-      </div>
-    );
-  }
-}`;
-  }
-
-  function style() {
-    return `.${name}-wrapper {
-  background-color: blanchedalmond;
-}`;
-  }
-  console.log(styles.green[0], '文件创成功');
-} catch (e) {
-  console.log(styles.red[0], '出现错误', e);
-}

config/webpack.common.config.js

@@ -1,108 +0,0 @@
-const tsImportPluginFactory = require('ts-import-plugin'); // 按需加载
-
-const path = require('path');
-const resolve = (dir) => {
-  return path.resolve(process.cwd(), dir);
-};
-
-module.exports = {
-  entry: {
-    index: './src/index.tsx',
-    framework: ['react', 'react-dom'],
-  },
-  output: {
-    path: path.resolve(__dirname, '../dist'),
-    sourceMapFilename: '[name].map',
-    chunkFilename: 'static/js/[name].[chunkhash:8].js',
-    filename: 'static/js/[name].[hash:8].js',
-  },
-  // stats: 'errors-warnings',
-
-  resolve: {
-    // 设置别名
-    alias: {
-      '@': resolve('src'), // 这样配置后 @ 可以指向 src 目录
-    },
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(jsx|tsx|js|ts)$/,
-        loader: 'ts-loader',
-        options: {
-          transpileOnly: true,
-          getCustomTransformers: () => ({
-            before: [tsImportPluginFactory(/** options */)],
-          }),
-          compilerOptions: {
-            module: 'es2015',
-          },
-        },
-        exclude: /node_modules/,
-      },
-      /*{
-        test: /\.(j|t)sx?$/,
-        include: [resolve("src")],
-        exclude: /node_modules/,
-        loader: "babel-loader",
-        options: {
-          presets: [
-            [
-              "@babel/preset-env",
-              {
-                targets: { ie: 9 },
-                ignoreBrowserslistConfig: true,
-                useBuiltIns: false,
-                modules: false,
-                exclude: ["transform-typeof-symbol"]
-              }
-            ],
-            [
-              "@babel/preset-react",
-              {
-                targets: "last 2 versions, ie 11",
-                modules: false
-              }
-            ],
-            ["@babel/preset-typescript"]
-          ],
-          plugins: [
-            ["@babel/plugin-syntax-dynamic-import"],
-            ["@babel/plugin-proposal-decorators", { legacy: true }],
-            ["@babel/plugin-proposal-class-properties", { loose: true }]
-          ],
-          sourceMap: true
-        }
-      },*/
-      {
-        test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
-        use: [
-          {
-            loader: 'url-loader',
-            options: {
-              name: '[name].[ext]',
-              outputPath: 'images/',
-              limit: 4096,
-              fallback: {
-                loader: 'file-loader',
-                options: {
-                  name: 'img/[name].[hash:8].[ext]',
-                },
-              },
-            },
-          },
-        ],
-      },
-      {
-        test: /\.(eot|ttf|svg|woff|woff2)$/,
-        use: {
-          loader: 'file-loader',
-          options: {
-            name: '[name]_[hash].[ext]',
-            outputPath: 'font/',
-          },
-        },
-      },
-    ],
-  },
-};

config/webpack.dev.config.js

@@ -1,65 +0,0 @@
-const path = require('path');
-const merge = require('webpack-merge');
-const common = require('./webpack.common.config.js');
-const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
-
-const webpack = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin', null, 2);
-
-const webpack_config = merge(common, {
-  mode: 'development',
-  output: {
-    filename: 'js/[name].[hash:8].bundle.js',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader', 'postcss-loader'],
-      },
-      {
-        test: /\.less$/,
-        use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
-      },
-    ],
-  },
-  devServer: {
-    contentBase: path.resolve(__dirname, '../dist'),
-    open: true,
-    port: 9000,
-    compress: true,
-    hot: true,
-    quiet: true,
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: 'public/index.html',
-      inject: 'body',
-      hash: false,
-    }),
-    new webpack.HotModuleReplacementPlugin(),
-    new FriendlyErrorsWebpackPlugin({
-      // 运行成功
-      compilationSuccessInfo: {
-        messages: ['You application is running here http://localhost:9000'],
-        notes: [
-          'Some additionnal notes to be displayed unpon successful compilation',
-        ],
-      },
-      // 运行错误
-      onErrors: function (severity, errors) {
-        //您可以收听插件转换和优先级的错误
-        //严重性可以是'错误'或'警告'
-      },
-      //是否每次编译之间清除控制台
-      //默认为true
-      clearConsole: true,
-
-      //添加格式化程序和变换器(见下文)
-      additionalFormatters: [],
-      additionalTransformers: [],
-    }),
-  ],
-});
-
-module.exports = webpack_config;

config/webpack.prod.config.js

@@ -1,103 +0,0 @@
-/*
- * @Author: Johnhong9527
- * @Date:   2020-05-12 16:35:36
- * @Last Modified by:   Johnhong9527
- * @Last Modified time: 2020-05-12 16:35:44
- */
-const merge = require('webpack-merge');
-const common = require('./webpack.common.config.js');
-
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
-
-module.exports = merge(common, {
-  mode: 'production',
-  stats: 'detailed',
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          // 'style-loader',
-          'css-loader',
-          'postcss-loader',
-          'less-loader',
-        ],
-      },
-      {
-        test: /\.less$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          // 'style-loader',
-          'css-loader',
-          'postcss-loader',
-          'less-loader',
-        ],
-      },
-      // {
-      //   test: /\.(scss|sass)$/,
-      //   use: [
-      //     MiniCssExtractPlugin.loader,
-      //     'css-loader',
-      //     'postcss-loader',
-      //     'sass-loader'
-      //   ]
-      // },
-    ],
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      filename: 'index.html',
-      template: 'public/index.html',
-      inject: 'body',
-      minify: {
-        removeComments: true,
-        collapseWhitespace: true,
-      },
-    }),
-    new CleanWebpackPlugin(),
-    new CleanWebpackPlugin(),
-    new FriendlyErrorsWebpackPlugin(),
-    new MiniCssExtractPlugin({
-      filename: 'css/[name].[hash].css',
-      chunkFilename: 'css/[id].[hash].css',
-    }),
-  ],
-  optimization: {
-    minimizer: [
-      new UglifyJsPlugin(),
-      new OptimizeCssAssetsPlugin({
-        assetNameRegExp: /\.css$/g,
-        cssProcessor: require('cssnano'),
-        cssProcessorPluginOptions: {
-          preset: ['default', { discardComments: { removeAll: true } }],
-        },
-        canPrint: true,
-      }),
-    ],
-    splitChunks: {
-      chunks: 'all',
-      minSize: 30000,
-      maxSize: 0,
-      minChunks: 1,
-      cacheGroups: {
-        framework: {
-          test: 'framework',
-          name: 'framework',
-          enforce: true,
-        },
-        vendors: {
-          priority: -10,
-          test: /node_modules/,
-          name: 'vendor',
-          enforce: true,
-        },
-      },
-    },
-  },
-});

package.json

@@ -1,57 +1,32 @@
 {
-  "name": "mes-react",
-  "version": "0.0.1",
-  "description": "",
-  "main": "index.js",
+  "private": true,
   "scripts": {
-    "page": "node ./config/createPages.js",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "serve": "webpack-dev-server --inline --config ./config/webpack.dev.config.js",
-    "build": "webpack --config ./config/webpack.prod.config.js",
-    "lint": "eslint --ext ts,tsx src/",
-    "lint:fix": "eslint --ext ts,tsx src/ --fix"
+    "start": "umi dev",
+    "build": "umi build",
+    "postinstall": "umi generate tmp",
+    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
+    "test": "umi-test",
+    "test:coverage": "umi-test --coverage"
   },
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "@types/react": "^16.9.35",
-    "@types/react-dom": "^16.9.8",
-    "@types/react-router-dom": "^5.1.5",
-    "antd": "^4.2.2",
-    "axios": "^0.19.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-router-dom": "^5.2.0",
-    "ts-import-plugin": "^1.6.6"
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,less,md,json}": [
+      "prettier --write"
+    ],
+    "*.ts?(x)": [
+      "prettier --parser=typescript --write"
+    ]
   },
-  "devDependencies": {
-    "@babel/core": "^7.9.6",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-decorators": "^7.8.3",
-    "@babel/preset-env": "^7.9.6",
-    "@babel/preset-react": "^7.9.4",
-    "@babel/preset-typescript": "^7.9.0",
-    "autoprefixer": "^9.7.6",
-    "babel-loader": "^8.1.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^3.5.3",
-    "file-loader": "^6.0.0",
-    "friendly-errors-webpack-plugin": "^1.7.0",
-    "html-webpack-plugin": "^4.3.0",
-    "less": "^3.11.1",
-    "less-loader": "^6.1.0",
-    "mini-css-extract-plugin": "^0.9.0",
-    "node-notifier": "^7.0.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "postcss-loader": "^3.0.0",
-    "style-loader": "^1.2.1",
-    "ts-loader": "^7.0.4",
-    "typescript": "^3.8.3",
-    "uglifyjs-webpack-plugin": "^2.2.0",
-    "url-loader": "^4.1.0",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3",
-    "webpack-merge": "^4.2.2"
+  "dependencies": {
+    "@umijs/preset-react": "1.x",
+    "@umijs/test": "^3.2.0-beta.6",
+    "lint-staged": "^10.0.7",
+    "prettier": "^1.19.1",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "umi": "^3.2.0-beta.6",
+    "yorkie": "^2.0.0"
   }
 }

postcss.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  plugins: {
-    autoprefixer: {},
-  },
-};

public/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>从零配置webpack4+react脚手架</title>
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>

src/components/layout/Header.tsx

@@ -1,22 +0,0 @@
-/*
- * @Author: Johnhong9527
- * @Date:   2020-05-12 17:06:30
- * @Last Modified by:   Johnhong9527
- * @Last Modified time: 2020-05-12 17:13:42
- */
-import React from 'react';
-
-type CardProps = {
-  name: String;
-  // paragraph: Object;
-};
-export default class Header extends React.Component<{}, CardProps> {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    console.log(this);
-    return <h1>10010101{this.props.name}</h1>;
-  }
-}

src/index.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { HashRouter } from 'react-router-dom';
-import App from './pages/App.tsx';
-// console.log(a());
-// function a() {
-//   return require.context('./pages', true, /\.tsx$/);
-// }
-
-ReactDOM.render(
-  <HashRouter>
-    <App />
-  </HashRouter>,
-  document.getElementById('root')
-);

src/pages/App.less

@@ -1,19 +0,0 @@
-@import "~antd/dist/antd.css";
-.App {
-  height: 300px;
-  // display: flex;
-  // justify-content: center;
-  // align-items: center;
-  // background-color: lightcoral;
-  h1 {
-    font-size: 16px;
-    color: #fff;
-  }
-  // .background {
-  //   position: absolute;
-  //   width: 100%;
-  //   left: 0;
-  //   top: -124px;
-  //   z-index: -1;
-  // }
-}

src/pages/App.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-
-import { Switch, Route } from 'react-router-dom';
-import Home from './Home/index.js';
-import Other from './Other';
-
-import './app.less';
-import background from './images/background.jpg';
-
-export default class App extends React.Component {
-  tpl: Object[];
-  // test(): any {
-  //   const requireComponents = require.context('./pages', true, /\.tsx$/);
-  //   let tpl: any[] = [];
-  //   requireComponents.keys().forEach((fileName) => {
-  //     const reqCom = requireComponents(fileName);
-  //     console.log(fileName);
-
-  //     const reqComName = fileName.replace(/^\..*\//, '').replace(/\.tsx$/, '');
-  //     tpl.push({
-  //       reqComName,
-  //       component: reqCom.default || reqCom,
-  //     });
-  //   });
-  //   console.log(23, tpl[0].component);
-
-  //   return tpl;
-  // }
-  render() {
-    return (
-      <div>
-        <Switch>
-          <Route exact path="/" component={Home} />
-          <Route exact path="/home" component={Home} />
-          <Route exact path="/other" component={Other} />
-          {/* {this.test().map((key): any => (
-            <Route path={`/${key.reqComName}`} component={key.component} />
-          ))} */}
-        </Switch>
-      </div>
-    );
-  }
-}

src/pages/Home/Home.less

@@ -1,3 +0,0 @@
-.home-wrapper {
-  background-color: blanchedalmond;
-}

src/pages/Home/home.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Button } from 'antd';
-import Header from '@/components/layout/Header.tsx';
-export default class Home extends React.Component {
-  test() {
-    console.log('Home');
-  }
-  render() {
-    return (
-      <div className="home-wrapper">
-        <Header name={'asas'} />
-        Home
-        <div></div>
-        <div>
-          <Button onClick={(e) => this.test()}>goto</Button>
-        </div>
-      </div>
-    );
-  }
-}

src/pages/Home/index.js

@@ -1,4 +0,0 @@
-import Home from './Home.tsx';
-import './Home.less';
-
-export default Home

src/pages/Other/Other.less

@@ -1,3 +0,0 @@
-.other-wrapper {
-  background-color: blanchedalmond;
-}

src/pages/Other/Other.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { Button } from 'antd';
-
-export default class Other extends React.Component {
-  test() {
-    console.log('Other');
-  }
-  render() {
-    return (
-      <div className="other-wrapper">
-        Other
-        <div>
-          <Button onClick={(e) => this.test()}>goto</Button>
-        </div>
-      </div>
-    );
-  }
-}

src/pages/Other/index.js

@@ -1,4 +0,0 @@
-import Other from './Other.tsx';
-import './Other.less';
-
-export default Other

src/pages/index.less

@@ -0,0 +1,6 @@
+.normal {
+}
+
+.title {
+  background: rgb(121, 242, 157);
+}

src/pages/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from './index.less';
+
+export default () => {
+  return (
+    <div>
+      <h1 className={styles.title}>Page index</h1>
+    </div>
+  );
+};

tsconfig.json

@@ -1,29 +1,25 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "module": "commonjs",
-    "sourceMap": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "removeComments": false,
-    "noImplicitAny": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "allowSyntheticDefaultImports": true,
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "importHelpers": true,
     "jsx": "react",
-    "lib": ["dom", "es2015"],
-    "outDir": "./dist/",
-    "typeRoots": ["./node_modules/@types/", "./src/@types/"],
-    "baseUrl": "./src",
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "baseUrl": "./",
+    "strict": true,
     "paths": {
-      "@assets/*": ["assets/*"],
-      "@components/*": ["components/*"],
-      "@constants/*": ["constants/*"],
-      "@models/*": ["models/*"],
-      "@pages/*": ["pages/*"],
-      "@plugins": ["plugins/*"],
-      "@utils/*": ["utils/*"]
-    }
+      "@/*": ["src/*"],
+      "@@/*": ["src/.umi/*"]
+    },
+    "allowSyntheticDefaultImports": true
   },
-  "compileOnSave": false,
-  "exclude": ["node_modules"]
+  "include": [
+    "mock/**/*",
+    "src/**/*",
+    "config/**/*",
+    ".umirc.ts",
+    "typings.d.ts"
+  ]
 }

typings.d.ts

@@ -0,0 +1,10 @@
+declare module '*.css';
+declare module '*.less';
+declare module '*.png';
+declare module '*.svg' {
+  export function ReactComponent(
+    props: React.SVGProps<SVGSVGElement>,
+  ): React.ReactElement;
+  const url: string;
+  export default url;
+}