cstarOrz · Lottid · May 3, 2018 · May 3, 2018
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,5 @@ npm-debug.log.*
 package-lock.json
 sftp-config.json
 build
+yarn-error.*
+tslint.json
diff --git a/README.md b/README.md
@@ -1 +1,2 @@
-# react-pro-webpack4
+# react-pro-webpack4
+## webpack4 + react + react-router + mobx + react-mobx + typescript
diff --git a/package.json b/package.json
@@ -4,34 +4,67 @@
   "description": "koa2-code-demo",
   "main": "index.js",
   "scripts": {
-    "dev": "webpack-dev-server --open --mode development --config ./static/config/webpack.config.base.js",
+    "init_sql": "node --harmony ./sql",
+    "dev_server": "nodemon ./app.js",
+    "devServer": "webpack-dev-server --open --mode development --config ./static/config/webpack.config.base.js",
     "watch": "webpack --mode development --config ./static/config/webpack.config.dev.js",
-    "prod": "webpack --mode production --config ./static/config/webpack.config.prod.js"
+    "prod": "webpack --mode production --config ./static/config/webpack.config.prod.js",
+    "start_server": "node --harmony ./app.js",
+    "dev": "npm run dev_server & npm run watch",
+    "start": "npm run prod & npm run start_server"
   },
   "license": "MIT",
   "dependencies": {
     "axios": "^0.18.0",
+    "busboy": "^0.2.14",
+    "co": "^4.6.0",
+    "debug": "^2.6.0",
     "echarts": "^4.0.4",
+    "ejs": "^2.5.5",
     "element-react": "^1.4.10",
     "element-theme-default": "^1.4.13",
     "glob": "^5.0.15",
     "iconv-lite": "^0.4.19",
+    "koa": "^2.0.0",
+    "koa-bodyparser": "^3.2.0",
+    "koa-convert": "^1.2.0",
+    "koa-ejs": "4.1.0",
+    "koa-log4": "^2.3.0",
+    "koa-logger": "^1.3.0",
+    "koa-mysql-session": "0.0.2",
+    "koa-router": "^7.0.1",
+    "koa-send": "^3.2.0",
+    "koa-session-minimal": "^3.0.3",
+    "koa-static": "^2.0.0",
+    "koa-views": "^5.2.0",
     "lodash": "^4.17.4",
-    "mobx": "^4.1.0",
+    "mobx": "^4.2.0",
     "mobx-react": "^5.0.0",
+    "mysql": "^2.12.0",
+    "qs": "^6.5.1",
     "react": "^16.2.0",
     "react-dev-utils": "^5.0.0",
     "react-dom": "^16.2.0",
     "react-loadable": "^5.3.1",
     "react-router-config": "^1.0.0-beta.4",
     "react-router-dom": "^4.2.2",
-    "ua-parser-js": "^0.7.17"
+    "ua-parser-js": "^0.7.17",
+    "validator": "^6.2.0"
   },
   "devDependencies": {
-    "autoprefixer": "7.1.6",
+    "@babel/preset-react": "^7.0.0-beta.44",
+    "@types/echarts": "^0.0.12",
+    "@types/qs": "^6.5.1",
+    "@types/react": "^16.3.11",
+    "@types/react-dom": "^16.0.5",
+    "@types/react-loadable": "^5.3.4",
+    "@types/react-router-config": "^1.0.6",
+    "@types/react-router-dom": "^4.2.6",
+    "@types/ua-parser-js": "^0.7.32",
+    "autoprefixer": "^7.1.6",
     "babel-core": "^6.26.0",
     "babel-eslint": "^7.2.3",
-    "babel-jest": "20.0.3",
+    "babel-jest": "^20.0.3",
     "babel-loader": "^7.1.4",
     "babel-plugin-import": "^1.7.0",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
@@ -61,7 +94,6 @@
     "eslint-plugin-import": "2.8.0",
     "eslint-plugin-jsx-a11y": "5.1.1",
     "eslint-plugin-react": "7.4.0",
-    "extract-text-webpack-plugin": "^2.0.0-beta.4",
     "file-loader": "^1.1.5",
     "fs-extra": "^3.0.1",
     "html-loader": "^0.5.5",
@@ -75,12 +107,13 @@
     "optimize-css-assets-webpack-plugin": "^4.0.0",
     "postcss-flexbugs-fixes": "^3.2.0",
     "postcss-loader": "^2.0.8",
-    "promise": "8.0.1",
-    "qs": "^6.5.1",
+    "promise": "^8.0.1",
     "raf": "^3.4.0",
     "source-map-loader": "^0.2.3",
     "style-loader": "^0.13.1",
     "sw-precache-webpack-plugin": "^0.11.4",
+    "ts-loader": "^4.2.0",
+    "typescript": "^2.8.1",
     "uglifyjs-webpack-plugin": "^1.2.4",
     "url-loader": "^0.6.2",
     "webpack": "^4.5.0",

diff --git a/static/config/webpack.config.base.js b/static/config/webpack.config.base.js
@@ -1,111 +1,10 @@
-const merge = require('webpack-merge');
-const webpack = require('webpack');
-// const baseWebpackConfig = require('./webpack.config.base');
 const path = require('path');
-const outputPath = path.join(__dirname, './../build');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const rootPath = path.join(__dirname, './../../');
 function resolve(dir) {
   return path.join(__dirname, './../../', dir)
 }
-module.exports = {
-  context: rootPath,
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx)$/,
-        exclude: resolve('node_modules'),
-        loader: ['babel-loader']
-      }, {
-        test: /\.less$/,
-        use: [
-          MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'
-        ],
-        // use:['css-loader','less-loader'], include: []
-      }, {
-        test: /\.css$/,
-        // use:['css-loader','postcss-loader'],
-        use: [
-          MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'
-        ],
-        // include:['../node_modules/element-theme-default']
-      }, {
-        test: [
-          /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/
-        ],
-        loader: require.resolve('url-loader'),
-        options: {
-          limit: 10000,
-          name: 'assets/images/[name].[hash:8].[ext]'
-        }
-      }, {
-        test: /\.(eot|woff|woff2|svg|ttf)([?]?.*)$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: 'assets/fonts/[name].[ext]',
-              context: rootPath
-            }
-          }
-        ]
-      }
-    ]
-  },
-  resolve: {
-    extensions: [
-      '.ts', '.tsx', '.js', '.jsx'
-    ],
-    modules: [resolve('static/src'), resolve('node_modules')]
-  },
-  entry: {
-    'main': ['./static/src/index.js'],
-    vendor: [
-      'react',
-      'react-dom',
-      'react-router-dom',
-      'react-router-config',
-      'react-loadable',
-      'mobx',
-      'mobx-react'
-    ]
-  },
-  output: {
-    path: outputPath,
-    publicPath: '/',
-    filename: 'assets/js/[name].[chunkhash:8].js',
-    chunkFilename: 'assets/js/[name].[chunkhash:8].js'
-  },
-  optimization: {
-    runtimeChunk: {
-      name: "manifest"
-    },
-    splitChunks: {
-      cacheGroups: {
-        vendor: {
-          test: /[\\/]node_modules[\\/]/,
-          name: "vendors",
-          priority: -20,
-          chunks: "all"
-        }
-      }
-    }
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: JSON.stringify('development')
-      }
-    }),
-    new HtmlWebpackPlugin({
-      title: 'My App',
-      filename: 'index.html',
-      template: resolve('static/public/index.html')
-    }),
-    new MiniCssExtractPlugin({filename: "assets/css/app.[contenthash].css", chunkFilename: "assets/css/app.[contenthash].[contenthash].css"})
-  ]
-}
-
 
+module.exports = {
 
+}
diff --git a/static/config/webpack.config.dev.js b/static/config/webpack.config.dev.js
@@ -14,6 +14,12 @@ module.exports = {
   module: {
     rules: [
       {
+        test: /\.(ts|tsx)$/,
+        include: resolve('static/src'),
+        exclude: resolve('node_modules'),
+        // loader: ['babel-loader', 'awesome-typescript-loader']
+        loader: ['babel-loader', 'ts-loader']
+      }, {
         test: /\.(js|jsx)$/,
         exclude: resolve('node_modules'),
         loader: ['babel-loader']
@@ -60,7 +66,7 @@ module.exports = {
     modules: [resolve('static/src'), resolve('node_modules')]
   },
   entry: {
-    'main': ['./static/src/index.js'],
+    'main': ['./static/src/index.tsx'],
     vendor: [
       'react',
       'react-dom',

diff --git a/static/config/webpack.config.prod.js b/static/config/webpack.config.prod.js
@@ -12,8 +12,14 @@ function resolve(dir) {
 module.exports = {
   context: rootPath,
   module: {
-    rules: [ 
+    rules: [
       {
+        test: /\.(ts|tsx)$/,
+        include: resolve('static/src'),
+        exclude: resolve('node_modules'),
+        // loader: ['babel-loader', 'awesome-typescript-loader']
+        loader: ['babel-loader', 'ts-loader']
+      }, {
         test: /\.(js|jsx)$/,
         exclude: resolve('node_modules'),
         loader: ['babel-loader']
@@ -60,7 +66,7 @@ module.exports = {
     modules: [resolve('static/src'), resolve('node_modules')]
   },
   entry: {
-    'main': ['./static/src/index.js'],
+    'main': ['./static/src/index.tsx'],
     vendor: [
       'react',
       'react-dom',

diff --git a/static/src/AppStatic.js b/static/src/AppStatic.js
diff --git a/static/src/AppStatic.tsx b/static/src/AppStatic.tsx
@@ -0,0 +1,63 @@
+// import React, {Component} from 'react';
+import * as React from "react";
+import {observer, inject} from 'mobx-react';
+import {renderRoutes} from 'react-router-config'
+import {withRouter} from 'react-router-dom';
+import * as Qs from 'qs';
+import List from './routerStatic';
+import { Props } from "./utils/interface";
+
+const routes = [...List];
+interface Params {
+  pid:string,
+  start_time:any,
+  end_time:any
+}
+
+@inject('store')
+@observer
+class App extends React.Component < Props, {} > {
+  constructor(props:any, context?: any) {
+    super(props, context)
+    console.log('App-TS');
+    this.setUrlParamsToStore()
+  }
+  formatParams() {
+    let res:Params = {} as Params;
+    res.pid = this.props.store.actived;
+    if(this.props.store.projectTime.startTime) res.start_time = this.props.store.projectTime.startTime;
+    if(this.props.store.projectTime.endTime) res.end_time = this.props.store.projectTime.endTime;
+    return res;
+  }
+  setUrlParamsToStore() {
+    let isLoginPages = this.props.location.pathname.indexOf('/login')>-1;
+    if(isLoginPages) return;
+    let urlParams:Params = Qs.parse(this.props.location.search.replace(/^\?/, ''));
+    if(urlParams&&urlParams.pid) {
+      if(urlParams.pid !== this.props.store.actived) this.props.store.updateActive(urlParams.pid);
+      if(urlParams.start_time&&urlParams.end_time) {
+        this.props.store.updateProjectTime({
+          startTime:urlParams.start_time,
+          endTime:urlParams.end_time
+        });
+      }
+    } else {
+      console.log('setUrlParamsToStore');
+      console.log(routes,'routes')
+      this.props.history.push({
+        pathname: '/overview/list',
+        search: '?'+ Qs.stringify(this.formatParams())
+      });
+    }
+  }
+  render() {
+    return (
+      <div className="main">
+        <div>
+          {renderRoutes(routes)}
+        </div>
+      </div>
+    )
+  }
+}
+export default withRouter(App)