init

.eslintrc.js

@@ -0,0 +1,170 @@
+module.exports = {
+  'env': {
+    'node': true,
+    'browser': true,
+    'commonjs': true,
+    'es6': true,
+  },
+  'extends': 'eslint:recommended',
+  'parserOptions': {
+    'parser': 'babel-eslint',
+    'ecmaFeatures': {
+      'jsx': true
+    },
+    'ecmaVersion': 2018,
+  },
+  'plugins': [
+    'react'
+  ],
+  'rules': {
+    'class-methods-use-this': ['off', {
+      exceptMethods: [],
+    }],
+
+    'guard-for-in': 'off',
+    'no-alert': 'warn',
+    'no-div-regex': 'off',
+    'no-else-return': ['off', { allowElseIf: true }],
+    'no-implicit-globals': 'off',
+    'no-loop-func': 'warn',
+    'no-script-url': 'off',
+    'no-console': 'warn',
+    'no-var': 'error',
+    'no-constant-condition': 'error',
+
+    'prefer-arrow-callback': ['off', {
+      allowNamedFunctions: false,
+      allowUnboundThis: true,
+    }],
+
+    'prefer-const': ['off', {
+      destructuring: 'any',
+      ignoreReadBeforeAssign: true,
+    }],
+
+    'callback-return': 'off',
+    'strict': ['off', 'never'],
+
+    'indent': ['error', 2, {
+      SwitchCase: 1,
+      VariableDeclarator: 1,
+      outerIIFEBody: 1,
+
+      FunctionDeclaration: {
+        parameters: 1,
+        body: 1,
+      },
+
+      FunctionExpression: {
+        parameters: 1,
+        body: 1,
+      },
+
+      CallExpression: {
+        arguments: 1,
+      },
+
+      ArrayExpression: 1,
+      ObjectExpression: 1,
+      ImportDeclaration: 1,
+      flatTernaryExpressions: false,
+      ignoredNodes: ['JSXElement', 'JSXElement *'],
+    }],
+
+    'jsx-quotes': ['warn', 'prefer-double'],
+
+    'keyword-spacing': ['warn', {
+      before: true,
+      after: true,
+      overrides: {
+        return: { after: true },
+        throw: { after: true },
+        case: { after: true },
+      }
+    }],
+
+    'linebreak-style': ['error', 'unix'],
+
+    'lines-around-comment': 'off',
+
+    'max-depth': ['off', 4],
+
+    'max-len': ['off', 100, 2, {
+      ignoreUrls: true,
+      ignoreComments: false,
+      ignoreRegExpLiterals: true,
+      ignoreStrings: true,
+      ignoreTemplateLiterals: true,
+    }],
+
+    'max-lines': ['off', {
+      max: 300,
+      skipBlankLines: true,
+      skipComments: true,
+    }],
+
+    'max-nested-callbacks': 'off',
+    'max-params': ['warn', 10],
+    'max-statements': ['off', 10],
+    'max-statements-per-line': ['off', { max: 1 }],
+    'multiline-comment-style': ['off', 'starred-block'],
+    'no-lonely-if': 'off',
+    'quotes': ['error', 'single', { avoidEscape: true }],
+    'semi-style': ['error', 'last'],
+    'semi': ['error', 'never'],
+
+    'comma-dangle': ['error', {
+      'arrays': 'only-multiline',
+      'objects': 'only-multiline',
+      'imports': 'only-multiline',
+      'exports': 'only-multiline',
+      'functions': 'ignore',
+    }],
+
+    'object-shorthand': ['off', 'always', {
+      ignoreConstructors: false,
+      avoidQuotes: true,
+    }],
+
+    'arrow-parens': ['off', 'as-needed', {
+      requireForBlockBody: true,
+    }],
+
+    'arrow-body-style': 'off',
+    'no-plusplus': 'off',
+    'no-param-reassign': 'off',
+    'import/extensions': 'off',
+    'import/prefer-default-export': 'off',
+    'import/no-dynamic-require': 'off',
+    'import/no-unresolved': 'off',
+    'prefer-template': 'off',
+    'prefer-rest-params': 'off',
+    'radix': 'off',
+    'no-mixed-operators': 'off',
+    'object-curly-newline': 'off',
+    'object-curly-spacing': 'off',
+    'prefer-destructuring': 'off',
+    'no-restricted-globals': 'off',
+    'no-restricted-syntax': 'off',
+    'no-prototype-builtins': 'off',
+    'func-names': 'off',
+    'no-underscore-dangle': 'off',
+    'global-require': 'off',
+    'array-callback-return': 'off',
+    'quote-props': 'off',
+    'no-continue': 'off',
+    'space-before-function-paren': ['error', 'always'],
+
+    'complexity': ['error', { max: 20 }],
+    'no-nested-ternary': 0,
+    'no-multiple-empty-lines': ['error', {
+      'max': 1,
+      'maxEOF': 1,
+    }],
+    'no-new': 0,
+    'react/no-children-prop': 0,
+    'no-unused-expressions': 0,
+    'react/no-unescaped-entities': 0,
+    'no-console': 0
+  }
+};

.gitignore

@@ -0,0 +1,47 @@
+# Numerous always-ignore extensions
+*.bak
+*.patch
+*.diff
+*.err
+*.gz
+*.tar
+
+# temp file for git conflict merging
+*.orig
+*.log
+*.rej
+*.swo
+*.swp
+*.zip
+*.vi
+*~
+*.sass-cache
+*.tmp.html
+*.dump
+
+# OS or Editor folders
+.DS_Store
+._*
+.cache
+.project
+.settings
+.tmproj
+*.esproj
+*.sublime-project
+*.sublime-workspace
+nbproject
+thumbs.db
+*.iml
+package-lock.json
+
+# Folders to ignore
+.hg
+.svn
+.CVS
+.idea
+node_modules/
+jscoverage_lib/
+bower_components/
+dist/
+output/
+public/

.vscode/settings.json

@@ -0,0 +1,25 @@
+{
+  "eslint.enable": true,
+  "eslint.autoFixOnSave": true,
+  "eslint.run": "onType",
+  "eslint.options": {
+    "extensions": [
+      ".js",
+      ".vue"
+    ],
+  },
+  "eslint.validate": [
+    "javascriptreact",
+    "vue",
+    "javascript",
+    {
+      "language": "vue",
+      // "autoFix": true
+    },
+    "html",
+    {
+      "language": "html",
+      // "autoFix": true
+    }
+  ]
+}

README.md

@@ -0,0 +1 @@
+# react-template

build/webpack.base.conf.js

@@ -0,0 +1,86 @@
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const CleanWebpackPlugin = require('clean-webpack-plugin')
+const optimizeCss = require('optimize-css-assets-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+module.exports = {
+  entry: {
+    index: './src/index.tsx'
+  },
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    filename: 'index.[hash].js',
+    publicPath: '/',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(tsx|ts|js|es6)$/,
+        use: 'awesome-typescript-loader',
+        exclude: [path.resolve(__dirname, '../node_modules')]
+      },
+      {
+        test: /\.(scss|css)$/,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.(png|jpg|jpeg|gif|svg)$/,
+        use: [{
+          loader: 'url-loader',
+          options: {
+            limit: 1024,
+            name: 'img/[name].[hash].[ext]',
+            fallback: 'file-loader'
+          }
+        }]
+      },
+      {
+        test: /\.(woff|woff2|ttc|ttf|eot|otf)/,
+        loader: 'file-loader',
+        options: {
+          name: 'font/[name].[hash].[ext]'
+        }
+      }
+    ]
+  },
+  plugins: [
+    new CleanWebpackPlugin(['dist'], {
+      root: path.resolve(__dirname, '../')
+    }),
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    }),
+    new optimizeCss({
+      cssProcessor: require('cssnano'),
+      cssProcessorOptions: { discardComments: { removeAll: true } },
+      canPrint: true
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[id].[contenthash].css',
+    }),
+  ],
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        vendors: {
+          name: 'vendors',
+          test: /[\\/]node_modules[\\/]/,
+          chunks: 'all',
+          priority: 10
+        }
+      }
+    }
+  },
+  resolve: {
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    alias: {
+      '@src': path.resolve(__dirname, '../src'),
+      '@static': path.resolve(__dirname, '../src/static'),
+      '@request': path.resolve(__dirname, '../src/request'),
+      '@view': path.resolve(__dirname, '../src/view'),
+      '@components': path.resolve(__dirname, '../src/view/components'),
+    }
+  }
+}

build/webpack.dev.conf.js

@@ -0,0 +1,23 @@
+const path = require('path')
+const merge = require('webpack-merge')
+const baseConfig = require('./webpack.base.conf')
+const webpack = require('webpack')
+
+module.exports = merge(baseConfig, {
+  devtool: 'cheap-eval-source-map',
+  mode: 'development',
+  devServer: {
+    contentBase: path.resolve(__dirname, './dist'),
+    port: 8081,
+    compress: true,
+    inline: true,
+    hot: true,
+    host: '0.0.0.0',
+    historyApiFallback: true,
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('development')
+    })
+  ]
+})

build/webpack.prod.conf.js

@@ -0,0 +1,13 @@
+const merge = require('webpack-merge')
+const baseConfig = require('./webpack.base.conf')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const webpack = require('webpack')
+
+module.exports = merge(baseConfig, {
+  plugins: [
+    new UglifyJsPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    })
+  ]
+})

build/webpack.test.conf.js

@@ -0,0 +1,13 @@
+const merge = require('webpack-merge')
+const baseConfig = require('./webpack.base.conf')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const webpack = require('webpack')
+
+module.exports = merge(baseConfig, {
+  plugins: [
+    new UglifyJsPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('test')
+    })
+  ]
+})