init.

55f7fbf5 · 陈俊尹 · 55f7fbf5 · 55f7fbf5 · 55f7fbf5 · 55f7fbf5
Commit 55f7fbf5 authored Jan 07, 2020 by 陈俊尹
13 changed files
--- a/.babelrc
+++ b/.babelrc
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ]
+}
\ No newline at end of file
--- a/.eslintrc
+++ b/.eslintrc
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
+  "rules": {
+    "arrow-parens": 0,
+    "semi": [
+      "error",
+      "always"
+    ],
+    "indent": [
+      "error",
+      4
+    ],
+    "space-before-function-paren": 0,
+    "object-curly-spacing": "off",
+    "no-undef": 0,
+    "quotes": [
+      2,
+      "single",
+      {
+        "allowTemplateLiterals": true
+      }
+    ],
+    "react/jsx-indent": [
+      "error",
+      4
+    ],
+    "react/jsx-indent-props": [
+      "error",
+      4
+    ],
+    "react/jsx-first-prop-new-line": [
+      2,
+      "multiline"
+    ],
+    "react/jsx-no-target-blank": 0,
+    "no-unused-vars": 0,
+    "no-dupe-class-members": "off"
+  },
+  "parser": "typescript-eslint-parser",
+  "plugins": [
+    "react",
+    "typescript"
+  ],
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  }
+}
--- a/.gitignore
+++ b/.gitignore
+node_modules
+dist
+.idea
+package-lock.json
\ No newline at end of file
--- a/README.md
+++ b/README.md
+## 测试项目
+### 1. 需求实现
+- App 组件内, 实现 Icon 跟随鼠标移动.
+### 2. 函数修改
+- 改进 AppFunction.ts 内 foo 方法的实现.
\ No newline at end of file
--- a/package.json
+++ b/package.json
+{
+  "name": "@az/react-test-project",
+  "version": "0.1.0",
+  "description": "react-test-project",
+  "scripts": {
+    "dev": "webpack-dev-server --devtool source-map"
+  },
+  "author": "uglyer",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-class-properties": "^7.3.0",
+    "@babel/preset-env": "^7.3.1",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/runtime": "^7.3.1",
+    "@types/node": "^10.12.8",
+    "@types/react": "^16.8.6",
+    "@types/react-dom": "^16.8.4",
+    "awesome-typescript-loader": "^5.2.1",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-import": "^1.12.0",
+    "body-parser": "^1.19.0",
+    "cache-loader": "^4.0.0",
+    "css-loader": "^3.0.0",
+    "eslint": "^5.16.0",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-plugin-import": "^2.17.2",
+    "eslint-plugin-node": "^8.0.1",
+    "eslint-plugin-promise": "^4.1.1",
+    "eslint-plugin-react": "^7.13.0",
+    "eslint-plugin-typescript": "^0.14.0",
+    "express": "^4.17.1",
+    "file-loader": "^3.0.1",
+    "fork-ts-checker-webpack-plugin": "^1.3.7",
+    "html-webpack-plugin": "^3.2.0",
+    "node-sass": "^4.11.0",
+    "redux-devtools": "^3.5.0",
+    "redux-devtools-extension": "^2.13.7",
+    "sass-loader": "^7.1.0",
+    "source-map-loader": "^0.2.4",
+    "style-loader": "^0.23.1",
+    "thread-loader": "^2.1.2",
+    "ts-declaration-webpack-plugin": "^1.2.0",
+    "ts-loader": "^5.3.0",
+    "typescript": "^3.7.3",
+    "typescript-eslint-parser": "^22.0.0",
+    "typings-for-css-modules-loader": "^1.7.0",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.25.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.10"
+  },
+  "dependencies": {
+    "antd": "^3.19.3",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "redux": "^4.0.1"
+  }
+}
--- a/public/index.html
+++ b/public/index.html
+<!DOCTYPE html>
+<link lang="zh-cmn-Hans">
+<meta name="viewport"
+    content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
+<meta charset="UTF-8">
+<title>react-test-project</title>
+<style>
+    * {
+        font-size: 14px;
+        -moz-user-select: none;
+        -o-user-select: none;
+        -khtml-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+    body {
+        margin: 0;
+        -webkit-overflow-scrolling: auto;
+        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+    }
+    #react-test-project{
+        margin: 80px;
+    }
+</style>
+</head>
+<body>
+    <div id="react-test-project"></div>
+</body>
+</html>
\ No newline at end of file
--- a/public/res.json
+++ b/public/res.json
+{
+  "title": "title"
+}
--- a/src/component/App.tsx
+++ b/src/component/App.tsx
+/**
+ * root component
+ * @author uglyer
+ * @date 2020/1/7 9:17
+ */
+import 'antd/dist/antd.css';
+import * as React from 'react';
+import {Icon} from 'antd';
+import {ChildComponent} from './ChildComponent';
+interface AppProps {
+}
+interface AppState {
+}
+export class App extends React.Component<AppProps, AppState> {
+    constructor(props: AppProps) {
+        super(props);
+        this.state = {};
+    }
+    render() {
+        const children = [];
+        for (let i = 0; i < 5000; i++) {
+            children.push(<ChildComponent index={i} key={i}/>);
+        }
+        return <div>
+            <Icon type="fullscreen-exit" />
+            {children}
+        </div>;
+    }
+}
--- a/src/component/ChildComponent.tsx
+++ b/src/component/ChildComponent.tsx
+/**
+ * 子组件
+ * @author uglyer
+ * @date 2020/1/7 9:45
+ */
+import * as React from 'react';
+import {} from 'antd';
+interface ChildComponentProps {
+    index: number;
+}
+interface ChildComponentState {
+}
+export class ChildComponent extends React.Component<ChildComponentProps, ChildComponentState> {
+    constructor(props: ChildComponentProps) {
+        super(props);
+        this.state = {};
+    }
+    render() {
+        return <div>ChildComponent:{this.props.index}</div>;
+    }
+}
--- a/src/function/AppFunction.ts
+++ b/src/function/AppFunction.ts
+/**
+ * 常用方法
+ * @author uglyer
+ * @date 2020/1/7 9:24
+ */
+/**
+ * 一个需要被改进的方法
+ * @param test1 测试参数
+ * @param handler 函数被正常执行结束回调
+ */
+function foo(test1: { foo?: number, foo2?: (index: number, fooValue: number) => void }, handler: () => void) {
+    if (test1) {
+        if (test1.foo) {
+            if (test1.foo2) {
+                for (let i = 0; i < 10; i++) {
+                    test1.foo2(i, test1.foo);
+                    // do something A
+                }
+                if (handler) {
+                    handler();
+                }
+            } else {
+                // do something B
+            }
+        } else {
+            // do something C
+        }
+    } else {
+        // do something D
+    }
+}
--- a/src/index.tsx
+++ b/src/index.tsx
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import {App} from './component/App';
+ReactDOM.render(
+    <App/>,
+    document.getElementById('react-test-project')
+);
--- a/tsconfig.json
+++ b/tsconfig.json
+{
+  "compilerOptions": {
+    "allowUnreachableCode": true,
+    "allowUnusedLabels": true,
+    "esModuleInterop": true,
+    "module": "commonjs",
+    "target": "es5",
+    "noImplicitAny": false,
+    "sourceMap": false,
+    "jsx": "react",
+    "preserveConstEnums": true,
+    "declaration": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "dom",
+      "scripthost",
+      "es5",
+      "es6",
+      "es7"
+    ],
+    "typeRoots": [
+      "node_modules/@types/node",
+      "global.d.ts"
+    ],
+    "baseUrl": ".",
+    "paths": {
+    }
+  },
+  "exclude": [
+    "./dist",
+    "lib",
+    "es",
+    "./node_modules/*",
+    "webpack.*",
+    "index.js"
+  ]
+}
--- a/webpack.config.js
+++ b/webpack.config.js
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebPackPlugin = require('html-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const babelOptions = {
+    'presets': [
+        '@babel/preset-react'
+    ],
+    'plugins': [
+        ['import', {
+            'libraryName': 'antd',
+            'libraryDirectory': 'es',
+            'style': 'css' 
+        }]
+    ]
+};
+module.exports = {
+    mode: 'development',
+    entry: {test: './src/index.tsx'},
+    output: {
+        filename: '[name].js',
+        path: path.resolve(__dirname, 'dist'),
+        libraryTarget: 'umd',
+        umdNamedDefine: true
+        // publicPath: '/'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                exclude: /node_modules/,
+                use: [
+                    {loader: 'cache-loader'},
+                    {
+                        loader: 'thread-loader',
+                        options: {
+                            workers: require('os').cpus().length - 1,
+                        },
+                    },
+                    {
+                        loader: 'babel-loader',
+                        options: babelOptions
+                    },
+                    {
+                        loader: 'ts-loader',
+                        options: {happyPackMode: true}
+                    }
+                ]
+            },
+            {
+                test: /\.jsx$/,
+                loader: 'babel-loader',
+                exclude: /node_modules/,
+                options: babelOptions
+            },
+            {
+                test: /\.css$/,
+                use: [
+                    'style-loader',
+                    'css-loader'
+                ]
+            },
+            {
+                test: /\.scss$/,
+                use: [
+                    {
+                        loader: 'style-loader'
+                    },
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            importLoaders: 1,
+                            localsConvention: 'camelCase', 
+                            modules: {
+                                mode: 'local',
+                                localIdentName: '[name]__[local]--[hash:base64:5]',
+                                context: path.resolve(__dirname, 'src'),
+                            }
+                        }
+                    },
+                    {
+                        loader: 'sass-loader'
+                    }
+                ]
+            },
+            {
+                test: /\.(png|jpg|gif)$/,
+                use: [
+                    {
+                        loader: 'url-loader',
+                        options: {
+                            name: 'assets/img/[hash:16].[ext]',
+                            limit: 1
+                        }
+                    }
+                ]
+            },
+            {enforce: 'pre', test: /\.js$/, loader: 'source-map-loader'}
+        ]
+    },
+    resolve: {
+        extensions: [
+            '.ts', '.tsx', '.js', '.jsx', '.json', '.css', '.scss'
+        ]
+    },
+    // 调试服务
+    devServer: {
+        contentBase: path.join(__dirname, './'),
+        compress: true,
+        port: 7799,
+        useLocalIp: true,
+        host: '0.0.0.0',
+        overlay: true,
+        inline: true,
+        hot: true,
+        historyApiFallback: {
+            index: '/index.html',
+            rewrites: [
+                {from: /^\/assets\/res.json/, to: '/test/assets/res.json'},
+            ]
+        },
+        proxy: {
+            '/api': {
+                target: 'http://police.reality3d.cn',
+                changeOrigin: true
+            },
+            '/file': {
+                target: 'http://police.reality3d.cn',
+                changeOrigin: true
+            },
+            '/map': {
+                target: 'http://127.0.0.1:5000',
+                changeOrigin: true
+            }
+        }
+    },
+    // 插件
+    plugins: [
+        new ForkTsCheckerWebpackPlugin({checkSyntacticErrors: true}),
+        new webpack.HotModuleReplacementPlugin(),
+        new HtmlWebPackPlugin({
+            template: './public/index.html',
+            filename: './index.html'
+        })
+    ]
+};