Migrate webpack stuff

Author: yangshun

.babelrc

@@ -1,23 +1,45 @@
 {
   "presets": [
-    "es2015",
+    [
+      "env",
+      {
+        "targets": {
+          "browsers": [
+            "last 2 versions",
+            "iOS >= 9",
+            "Safari >= 9",
+            "not ie <= 11"
+          ],
+          // We currently minify with uglify
+          // Remove after https://github.com/mishoo/UglifyJS2/issues/448
+          "uglify": true,
+        },
+        // Enable tree-shaking for webpack
+        "modules": false,
+        "useBuiltIns": true,
+      }
+    ],
     "react",
-    "stage-0",
   ],
   "env": {
     "development": {
-      "presets": [
-        "react-hmre",
+      "plugins": [
+        "react-hot-loader/babel",
       ],
     },
     "production": {
       "presets": [
         "react-optimize",
       ],
     },
+    "test": {
+      "plugins": [
+        "transform-es2015-modules-commonjs"
+      ],
+    },
   },
   "plugins": [
-    "syntax-object-rest-spread",
     "transform-object-rest-spread",
+    "transform-class-properties",
   ],
 }

.eslintrc.js

@@ -5,11 +5,15 @@ module.exports = {
     'airbnb',
     'plugin:flowtype/recommended',
   ],
+  env: {
+    browser: true,
+    node: true,
+  },
   plugins: [
     'flowtype',
-    'react',
+    'import',
     'jsx-a11y',
-    'import'
+    'react',
   ],
   settings: {
     'import/resolver': {
@@ -18,43 +22,43 @@ module.exports = {
       },
     },
   },
-  env: {
-    'browser': true,
-    'node': true,
-    'es6': true,
-    'mocha': true,
-    'jest': true,
-  },
   rules: {
-    // Turning it on causes undecipherable errors.
+    // Body style is more troublesome than it's worth
     'arrow-body-style': 'off',
-    // Import required only for non-js files.
+    // Consistent arrow parens.
+    'arrow-parens': ['error', 'as-needed', { requireForBlockBody: true }],
+    // After adding flowtypes the lines are getting longer.
+    'max-len': ['error', 120],
     'import/extensions': ['error', 'always',
       {
         js: 'never',
-        jsx: 'never',
-      },
+        jsx: 'never'
+      }
     ],
-    // To allow flowtype definitions to be imported.
-    'import/no-duplicates': 'error',
-    // To allow enzyme to be imported in tests.
-    'import/no-extraneous-dependencies': ['error', { 'devDependencies': ['**/*.test.js'] }],
-    'import/no-named-as-default': 'off',
-    'import/no-named-as-default-member': 'off',
-    'jsx-a11y/href-no-hash': 'off',
-    'jsx-a11y/no-static-element-interactions': 'off',
-    'no-duplicate-imports': 'off',
-    'no-underscore-dangle': ['error', { 'allowAfterThis': true, 'allowAfterSuper': true }],
-    'react/jsx-filename-extension': 'off',
+    'react/no-array-index-key': 'off',
+    'react/jsx-closing-bracket-location': 'off',
     'react/jsx-first-prop-new-line': ['error', 'never'],
     // It just looks nicer without the space.
     'react/jsx-space-before-closing': 'off',
-    // TODO: https://github.com/yannickcr/eslint-plugin-react/issues/861
+    // SEE: https://github.com/yannickcr/eslint-plugin-react/issues
     'react/no-unused-prop-types': 'off',
-    'react/jsx-tag-spacing': ['error', {
-      beforeSelfClosing: 'never',
+    // Enables typing to be placed above lifecycle
+    "react/sort-comp": ['error', {
+      order: [
+        'type-annotations',
+        'static-methods',
+        'lifecycle',
+        '/^on.+$/',
+        'everything-else',
+        'render',
+      ],
     }],
-    // Let git handle the linebreaks instead
+    'react/require-default-props': 'off',
+    // TODO: Replace divs with buttons, but remove all button styling.
+    'jsx-a11y/no-static-element-interactions': 'off',
+    // TODO: Investigate this error.
+    'jsx-a11y/href-no-hash': 'off',
+    // Let git handle the linebreaks instead.
     'linebreak-style': 'off',
-  }
-}
+  },
+};

.flowconfig

@@ -1,7 +1,4 @@
 [ignore]
-.*node_modules/babel-core.*
-.*node_modules/fbjs.*
-.*node_modules/stylelint.*
 .*node_modules/.*
 
 [include]
@@ -11,6 +8,4 @@
 [options]
 module.name_mapper='^\(actions\|components\|data\|middlewares\|reducers\|types\|utils\|views\)\/?\(.*\)$' -> '<PROJECT_ROOT>/src/js/\1/\2'
 module.name_mapper='^img\/\(.*\)$' -> '<PROJECT_ROOT>/src/img/\1'
-module.name_mapper.extension='css' -> '<PROJECT_ROOT>/__mocks__/cssStub.js.flow'
-module.name_mapper.extension='scss' -> '<PROJECT_ROOT>/__mocks__/cssStub.js.flow'
 suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe

.gitignore

@@ -8,6 +8,7 @@ coverage
 
 # dll
 dll
+.cache-loader
 
 # production
 dist

flow-typed/package-dep-libdefs.js

@@ -1,5 +1,9 @@
 // This file is autogenerated by flow-scripts.
 
+declare module 'babel-polyfill' {
+  declare module.exports: any;
+}
+
 declare module 'react' {
   declare module.exports: any;
 }

package.json

@@ -4,31 +4,38 @@
   "description": "Barebones React Redux starter kit on Webpack",
   "main": "index.js",
   "scripts": {
-    "start": "cross-env NODE_ENV=development webpack-dev-server --config=webpack/webpack.config.dev.js --open",
-    "build": "cross-env NODE_ENV=production webpack --config=webpack/webpack.config.prod.js",
+    "start": "cross-env NODE_ENV=development babel-node scripts/start",
+    "build": "cross-env NODE_ENV=production babel-node scripts/build",
     "build:dll": "cross-env NODE_ENV=development webpack --config=webpack/webpack.config.dll.js",
-    "postinstall": "yarn run build:dll && flow-scripts stub",
+    "postinstall": "npm run build:dll && flow-scripts stub",
+    "flow": "flow check",
+    "lint": "eslint test src/js/**/*.{js,jsx} webpack scripts",
+    "lint:src": "eslint src/js/**/*.{js,jsx}",
+    "lint:test": "eslint test",
+    "lint:scripts": "eslint webpack scripts",
     "test": "jest --coverage",
-    "test:watch": "jest --config .jestconfig --watch"
+    "test:watch": "jest --watch",
+    "ci": "npm run lint && npm run test && npm run build "
   },
   "author": "Tay Yang Shun",
   "license": "MIT",
   "devDependencies": {
     "autoprefixer": "^7.1.2",
+    "babel-cli": "^6.24.1",
     "babel-core": "^6.25.0",
     "babel-eslint": "^7.2.3",
     "babel-loader": "^7.1.1",
-    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
-    "babel-plugin-transform-es2015-destructuring": "^6.23.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
-    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-env": "^1.5.2",
     "babel-preset-react": "^6.24.1",
-    "babel-preset-react-hmre": "^1.1.1",
     "babel-preset-react-optimize": "^1.0.1",
-    "babel-preset-stage-0": "^6.24.1",
+    "babel-register": "^6.24.1",
+    "cache-loader": "^1.0.3",
     "clean-webpack-plugin": "^0.1.16",
     "cross-env": "^5.0.1",
     "css-loader": "^0.28.4",
+    "cssnano": "^3.10.0",
     "enzyme": "^2.9.1",
     "eslint": "^4.3.0",
     "eslint-config-airbnb": "^15.0.2",
@@ -38,29 +45,35 @@
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-react": "^7.1.0",
-    "extract-text-webpack-plugin": "^3.0.0",
+    "extract-text-webpack-plugin": "^2.1.2",
     "file-loader": "^0.11.2",
     "flow-bin": "^0.51.0",
     "flow-scripts": "^0.3.0",
     "flow-status-webpack-plugin": "^0.1.7",
     "html-webpack-plugin": "^2.29.0",
     "jest": "^20.0.4",
+    "lodash-webpack-plugin": "^0.11.4",
     "node-sass": "^4.5.3",
+    "optimize-css-assets-webpack-plugin": "^2.0.0",
     "postcss-loader": "^2.0.6",
     "react-addons-test-utils": "^15.6.0",
+    "react-dev-utils": "^0.5.2",
+    "react-hot-loader": "3.0.0-beta.7",
+    "react-test-renderer": "^15.6.1",
     "redux-logger": "^3.0.6",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.18.2",
     "stylelint": "^8.0.0",
     "stylelint-config-standard": "^17.0.0",
     "stylelint-webpack-plugin": "^0.9.0",
     "url-loader": "^0.5.9",
-    "webpack": "^1.13.1",
-    "webpack-dev-server": "^1.14.1",
+    "webpack": "^2.7.0",
+    "webpack-dev-server": "^2.6.1",
     "webpack-merge": "^4.1.0"
   },
   "dependencies": {
     "axios": "^0.16.2",
+    "babel-polyfill": "^6.23.0",
     "bootstrap": "^4.0.0-alpha.6",
     "lodash": "^4.15.0",
     "react": "^15.6.1",
@@ -72,5 +85,11 @@
     "react-router-redux": "^4.0.8",
     "redux": "^3.7.2",
     "redux-thunk": "^2.2.0"
-  }
+  },
+  "browserslist": [
+    "last 2 versions",
+    "iOS >= 9",
+    "Safari >= 9",
+    "not ie <= 11"
+  ]
 }

scripts/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  rules: {
+    // build scripts gotta print
+    'no-console': 'off',
+    // eslint thinks script dev dependencies are dependencies
+    'import/no-extraneous-dependencies': 'off',
+  },
+};

scripts/build.js

@@ -0,0 +1,59 @@
+const chalk = require('chalk');
+const webpack = require('webpack');
+const { measureFileSizesBeforeBuild, printFileSizesAfterBuild } = require('react-dev-utils/FileSizeReporter');
+
+const config = require('../webpack/webpack.config.prod');
+const parts = require('../webpack/webpack.parts');
+
+// Print out errors
+function printErrors(summary, errors) {
+  console.log(chalk.red(summary));
+  console.log();
+  errors.forEach((err) => {
+    console.log(err.message || err);
+    console.log();
+  });
+}
+
+// Create the production build and print the deployment instructions.
+function build(previousFileSizes) {
+  console.log(chalk.cyan('Creating an optimized production build...'));
+  console.log();
+
+  webpack(config).run((err, stats) => {
+    if (err) {
+      printErrors('Failed to compile.', [err]);
+      process.exit(1);
+    }
+
+    if (stats.compilation.errors.length) {
+      printErrors('Failed to compile.', stats.compilation.errors);
+      process.exit(1);
+    }
+
+    if (process.env.CI && stats.compilation.warnings.length) {
+      // eslint-disable-next-line max-len
+      printErrors('Failed to compile. When process.env.CI = true, warnings are treated as failures. Most CI servers set this automatically.', stats.compilation.warnings);
+      process.exit(1);
+    }
+
+    console.log(chalk.green('Compiled successfully.'));
+    console.log();
+
+    console.log('File sizes after gzip:');
+    console.log();
+    printFileSizesAfterBuild(stats, previousFileSizes);
+    console.log();
+
+    console.log(`The ${chalk.cyan(parts.PATHS.build)} folder is ready to be deployed.`);
+  });
+}
+
+// First, read the current file sizes in build directory.
+// This lets us display how much they changed later.
+// First, read the current file sizes in build directory.
+// This lets us display how much they changed later.
+measureFileSizesBeforeBuild(parts.PATHS.build).then((previousFileSizes) => {
+  // Start the webpack build
+  build(previousFileSizes);
+});