Merge branch 'feature/edge' into develop

__tests__/fixtures/companion-api-import-4.json

@@ -0,0 +1,225 @@
+{
+  "free": false,
+  "id": 2,
+  "modules": {
+    "Armour": {
+      "module": {
+        "free": false,
+        "id": 128049280,
+        "name": "CobraMkIII_Armour_Grade1",
+        "on": true,
+        "priority": 1,
+        "value": 0
+      }
+    },
+    "FrameShiftDrive": {
+      "module": {
+        "free": false,
+        "id": 128064117,
+        "name": "Int_Hyperdrive_Size4_Class5",
+        "on": true,
+        "priority": 4,
+        "value": 1610080
+      }
+    },
+    "FuelTank": {
+      "module": {
+        "free": false,
+        "id": 128064349,
+        "name": "Int_FuelTank_Size4_Class3",
+        "on": true,
+        "priority": 1,
+        "value": 24734
+      }
+    },
+    "LifeSupport": {
+      "module": {
+        "free": false,
+        "id": 128064149,
+        "name": "Int_LifeSupport_Size3_Class2",
+        "on": true,
+        "priority": 0,
+        "value": 10133
+      }
+    },
+    "MainEngines": {
+      "module": {
+        "free": false,
+        "id": 128064079,
+        "name": "Int_Engine_Size4_Class2",
+        "on": true,
+        "priority": 0,
+        "value": 59633
+      }
+    },
+    "PaintJob": {
+      "module": {
+        "free": false,
+        "id": 128741033,
+        "name": "PaintJob_CobraMKIII_Corrosive_05",
+        "on": true,
+        "priority": 1,
+        "value": 0
+      }
+    },
+    "PlanetaryApproachSuite": {
+      "module": {
+        "free": false,
+        "id": 128672317,
+        "name": "Int_PlanetApproachSuite",
+        "on": true,
+        "priority": 1,
+        "value": 500
+      }
+    },
+    "PowerDistributor": {
+      "module": {
+        "free": false,
+        "id": 128064179,
+        "name": "Int_PowerDistributor_Size1_Class2",
+        "on": true,
+        "priority": 2,
+        "value": 1293
+      }
+    },
+    "PowerPlant": {
+      "module": {
+        "free": false,
+        "id": 128064037,
+        "name": "Int_Powerplant_Size2_Class5",
+        "on": true,
+        "priority": 1,
+        "value": 160224
+      }
+    },
+    "Radar": {
+      "module": {
+        "free": false,
+        "id": 128064229,
+        "name": "Int_Sensors_Size3_Class2",
+        "on": true,
+        "priority": 0,
+        "value": 10133
+      }
+    },
+    "ShipID0": {
+      "module": {
+        "free": false,
+        "id": 128758976,
+        "name": "Nameplate_ShipID_Black",
+        "on": true,
+        "priority": 1,
+        "value": 0
+      }
+    },
+    "ShipID1": {
+      "module": {
+        "free": false,
+        "id": 128758976,
+        "name": "Nameplate_ShipID_Black",
+        "on": true,
+        "priority": 1,
+        "value": 0
+      }
+    },
+    "ShipKitBumper": {
+      "module": {
+        "free": false,
+        "id": 128740698,
+        "name": "CobraMkIII_ShipkitRaider1_Bumper1",
+        "on": true,
+        "priority": 1,
+        "value": 0
+      }
+    },
+    "ShipKitSpoiler": {
+      "module": {
+        "free": false,
+        "id": 128740701,
+        "name": "CobraMkIII_ShipkitRaider1_Spoiler1",
+        "on": true,
+        "priority": 1,
+        "value": 0
+      }
+    },
+    "ShipKitTail": {
+      "module": {
+        "free": false,
+        "id": 128740705,
+        "name": "CobraMkIII_ShipkitRaider1_Tail2",
+        "on": true,
+        "priority": 1,
+        "value": 0
+      }
+    },
+    "ShipKitWings": {
+      "module": {
+        "free": false,
+        "id": 128740707,
+        "name": "CobraMkIII_ShipkitRaider1_Wings1",
+        "on": true,
+        "priority": 1,
+        "value": 0
+      }
+    },
+    "ShipName0": {
+      "module": {
+        "free": false,
+        "id": 128758944,
+        "name": "Nameplate_Explorer01_Black",
+        "on": true,
+        "priority": 1,
+        "value": 0
+      }
+    },
+    "ShipName1": {
+      "module": {
+        "free": false,
+        "id": 128758944,
+        "name": "Nameplate_Explorer01_Black",
+        "on": true,
+        "priority": 1,
+        "value": 0
+      }
+    },
+    "Slot01_Size4": {
+      "module": {
+        "free": false,
+        "id": 128666663,
+        "name": "Int_FuelScoop_Size4_Class3",
+        "on": true,
+        "priority": 2,
+        "value": 178898
+      }
+    },
+    "Slot02_Size4": [],
+    "Slot03_Size4": [],
+    "Slot04_Size2": [],
+    "Slot05_Size2": {
+      "module": {
+        "free": false,
+        "id": 128663561,
+        "name": "Int_StellarBodyDiscoveryScanner_Advanced",
+        "on": true,
+        "priority": 2,
+        "value": 1545000
+      }
+    },
+    "Slot06_Size2": {
+      "module": {
+        "free": false,
+        "id": 128666634,
+        "name": "Int_DetailedSurfaceScanner_Tiny",
+        "on": true,
+        "priority": 2,
+        "value": 250000
+      }
+    }
+  },
+  "name": "CobraMkIII",
+  "value": {
+    "hull": 205287,
+    "modules": 3850628,
+    "unloaned": 1751109
+  }
+}

__tests__/test-import.js

@@ -1,8 +1,10 @@
-jest.dontMock('../src/app/stores/Persist');
-jest.dontMock('../src/app/components/TranslatedComponent');
-jest.dontMock('../src/app/components/ModalImport');
+jest.unmock('../src/app/stores/Persist');
+jest.unmock('../src/app/components/TranslatedComponent');
+jest.unmock('../src/app/components/ModalImport');
+jest.unmock('prop-types');
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import TU from 'react-testutils-additions';
 import Utils from './testUtils';
@@ -264,6 +266,18 @@ describe('Import Modal', function() {
       expect(MockRouter.go.mock.calls.length).toBe(1);
       expect(MockRouter.go.mock.calls[0][0]).toBe('/outfit/type_7_transport?code=A0patfFflidasdf5----0404040005050504044d2402.AwRj4yrI.CwRgDBlVK7EiA%3D%3D%3D.&bn=Imported%20Type-7%20Transporter');
     });
+
+    it('imports a valid companion API build', function() {
+      const importData = require('./fixtures/companion-api-import-4');
+      pasteText(JSON.stringify(importData));
+
+      expect(modal.state.importValid).toBeTruthy();
+      expect(modal.state.errorMsg).toEqual(null);
+      expect(modal.state.singleBuild).toBe(true);
+      clickProceed();
+      expect(MockRouter.go.mock.calls.length).toBe(1);
+      expect(MockRouter.go.mock.calls[0][0]).toBe('outfit/cobra_mk_iii?code=A0p0tdFaldd3sdf4------34---2f2i.AwRj4yKA.CwRgDMYExre1Rcg%3D..EweloBhBGA2EoFMCGBzANokMK6A%3D');
+    });
   });
 
   describe('Import E:D Shipyard Builds', function() {

__tests__/test-persist.js

@@ -1,4 +1,4 @@
-jest.dontMock('../src/app/stores/Persist');
+jest.unmock('../src/app/stores/Persist');
 
 import React from 'react';
 import ReactDOM from 'react-dom';

package.json

@@ -24,7 +24,7 @@
     "deploy": "npm run lint && npm test && npm run build && npm run rsync"
   },
   "jest": {
-    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
+    "transform": {".*": "<rootDir>/node_modules/babel-jest"},
     "testRegex": "(/__tests__/test-.*|\\.(test|spec))\\.js$",
     "moduleFileExtensions": [
       "js",
@@ -37,7 +37,6 @@
       "<rootDir>/node_modules/lodash",
       "<rootDir>/node_modules/react",
       "<rootDir>/node_modules/react-dom",
-      "<rootDir>/node_modules/react-addons-test-utils",
       "<rootDir>/node_modules/react-testutils-additions",
       "<rootDir>/node_modules/fbjs",
       "<rootDir>/node_modules/fbemitter",
@@ -62,46 +61,46 @@
     "babel-preset-es2015": "*",
     "babel-preset-react": "*",
     "babel-preset-stage-0": "*",
-    "css-loader": "^0.23.0",
+    "css-loader": "^0.28.0",
     "d3-selection": "1",
-    "eslint": "2.2.0",
-    "eslint-plugin-react": "^4.0.0",
-    "expose-loader": "^0.7.1",
-    "express": "^4.13.3",
-    "extract-text-webpack-plugin": "2.0.0",
-    "file-loader": "^0.8.4",
+    "eslint": "3.19.0",
+    "eslint-plugin-react": "^6.10.3",
+    "expose-loader": "^0.7.3",
+    "express": "^4.15.2",
+    "extract-text-webpack-plugin": "2.1.0",
+    "file-loader": "^0.11.1",
     "html-webpack-plugin": "^2.28.0",
-    "jest-cli": "^16.0.1",
-    "jsen": "^0.6.0",
-    "json-loader": "^0.5.3",
-    "less": "^2.5.3",
-    "less-loader": "^2.2.1",
+    "jest-cli": "^19.0.2",
+    "jsen": "^0.6.4",
+    "json-loader": "^0.5.4",
+    "less": "^2.7.2",
+    "less-loader": "^4.0.3",
     "react-addons-perf": "^15.4.2",
-    "react-addons-test-utils": "^15.0.1",
-    "react-measure": "^1.4.6",
-    "react-testutils-additions": "^15.1.0",
-    "rimraf": "^2.4.3",
-    "rollup": "0.36",
-    "rollup-plugin-node-resolve": "2",
-    "style-loader": "^0.13.0",
-    "url-loader": "^0.5.6",
-    "webpack": "^2.2.1",
-    "webpack-dev-server": "^2.4.1"
+    "react-measure": "^1.4.7",
+    "react-testutils-additions": "^15.2.0",
+    "rimraf": "^2.6.1",
+    "rollup": "0.41",
+    "rollup-plugin-node-resolve": "3",
+    "style-loader": "^0.16.1",
+    "url-loader": "^0.5.8",
+    "webpack": "^2.4.1",
+    "webpack-dev-server": "^2.4.4"
   },
   "dependencies": {
     "babel-polyfill": "*",
-    "browserify-zlib": "ipfs/browserify-zlib",
-    "classnames": "^2.2.0",
+    "browserify-zlib-next": "^1.0.1",
+    "classnames": "^2.2.5",
     "coriolis-data": "EDCD/coriolis-data",
-    "d3": "4.6.0",
-    "fbemitter": "^2.0.0",
-    "lodash": "^4.15.0",
+    "d3": "4.8.0",
+    "detect-browser": "^1.7.0",
+    "fbemitter": "^2.1.1",
+    "lodash": "^4.17.4",
     "lz-string": "^1.4.4",
     "prop-types": "^15.5.8",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
     "react-number-editor": "Athanasius/react-number-editor.git#miggy",
     "recharts": "^0.22.3",
-    "superagent": "^1.4.0"
+    "superagent": "^3.5.2"
   }
 }

src/app/components/AvailableModulesMenu.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as ModuleUtils from '../shipyard/ModuleUtils';
-import { findDOMNode } from 'react-dom';
 import TranslatedComponent from './TranslatedComponent';
 import { stopCtxPropagation } from '../utils/UtilityFunctions';
 import cn from 'classnames';
@@ -374,7 +373,7 @@ export default class AvailableModulesMenu extends TranslatedComponent {
    */
   componentDidMount() {
     if (this.groupElem) {  // Scroll to currently selected group
-      findDOMNode(this).scrollTop = this.groupElem.offsetTop;
+      this.node.scrollTop = this.groupElem.offsetTop;
     }
   }
 
@@ -393,7 +392,7 @@ export default class AvailableModulesMenu extends TranslatedComponent {
    */
   render() {
     return (
-      <div
+      <div ref={node => this.node = node}
           className={cn('select', this.props.className)}
           onScroll={this._hideDiff}
           onClick={(e) => e.stopPropagation() }

src/app/components/ModalExport.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { findDOMNode } from 'react-dom';
 import TranslatedComponent from './TranslatedComponent';
 
 /**
@@ -46,10 +45,9 @@ export default class ModalExport extends TranslatedComponent {
    * Focus on textarea and select all
    */
   componentDidMount() {
-    let e = findDOMNode(this.refs.exportField);
-    if (e) {
-      e.focus();
-      e.select();
+    if (this.exportField) {
+      this.exportField.focus();
+      this.exportField.select();
     }
   }
 
@@ -69,7 +67,7 @@ export default class ModalExport extends TranslatedComponent {
       <h2>{translate(this.props.title || 'Export')}</h2>
       {description}
       <div>
-        <textarea className='cb json' ref='exportField' readOnly value={this.state.exportJson} />
+        <textarea className='cb json' ref={node => this.exportField = node} readOnly value={this.state.exportJson} />
       </div>
       <button className='r dismiss cap' onClick={this.context.hideModal}>{translate('close')}</button>
     </div>;

src/app/components/ModalHelp.jsx

@@ -1,7 +1,6 @@
 /* eslint react/no-danger: 0 */
 import PropTypes from 'prop-types';
 import React from 'react';
-import { findDOMNode } from 'react-dom';
 import TranslatedComponent from './TranslatedComponent';
 
 /**
@@ -21,17 +20,6 @@ export default class ModalHelp extends TranslatedComponent {
     super(props);
   }
 
-  /**
-   * Focus on textarea and select all
-   */
-  componentDidMount() {
-    const e = findDOMNode(this.refs.exportField);
-    if (e) {
-      e.focus();
-      e.select();
-    }
-  }
-
   /**
    * Render the modal
    * @return {React.Component} Modal Content

src/app/components/ModalImport.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { findDOMNode } from 'react-dom';
 import cn from 'classnames';
 import TranslatedComponent from './TranslatedComponent';
 import Router from '../Router';
@@ -460,8 +459,8 @@ export default class ModalImport extends TranslatedComponent {
    * If textarea is shown focus on mount
    */
   componentDidMount() {
-    if (!this.props.builds && findDOMNode(this.refs.importField)) {
-      findDOMNode(this.refs.importField).focus();
+    if (!this.props.builds && this.importField) {
+      this.importField.focus();
     }
   }
 
@@ -477,7 +476,7 @@ export default class ModalImport extends TranslatedComponent {
     if (!state.processed) {
       importStage = (
         <div>
-          <textarea className='cb json' ref='importField' onChange={this._validateImport} defaultValue={this.state.importString} placeholder={translate('PHRASE_IMPORT')} />
+          <textarea className='cb json' ref={node => this.importField = node} onChange={this._validateImport} defaultValue={this.state.importString} placeholder={translate('PHRASE_IMPORT')} />
           <button id='proceed' className='l cap' onClick={this._process} disabled={!state.importValid} >{translate('proceed')}</button>
           <div className='l warning' style={{ marginLeft:'3em' }}>{state.errorMsg}</div>
         </div>

src/app/components/PowerManagement.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { findDOMNode } from 'react-dom';
 import cn from 'classnames';
 import TranslatedComponent from './TranslatedComponent';
 import PowerBands from './PowerBands';
@@ -149,7 +148,7 @@ export default class PowerManagement extends TranslatedComponent {
    * Update power bands width from DOM
    */
   _updateWidth() {
-    this.setState({ width: findDOMNode(this).offsetWidth });
+    this.setState({ width: this.node.offsetWidth });
   }
 
   /**
@@ -197,7 +196,7 @@ export default class PowerManagement extends TranslatedComponent {
     let sortOrder = this._sortOrder;
 
     return (
-      <div className='group half' id='componentPriority'>
+      <div ref={node => this.node = node} className='group half' id='componentPriority'>
         <table style={{ width: '100%' }}>
           <thead>
             <tr className='main'>

src/app/components/Slider.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { findDOMNode } from 'react-dom';
 
 const MARGIN_LR = 8; // Left/ Right margin
 
@@ -101,7 +100,7 @@ export default class Slider extends React.Component {
    */
   _updateDimensions() {
     this.setState({
-      outerWidth: findDOMNode(this).getBoundingClientRect().width
+      outerWidth: this.node.getBoundingClientRect().width
     });
   }
 
@@ -145,14 +144,14 @@ export default class Slider extends React.Component {
     };
 
     if (!outerWidth) {
-      return <svg style={style} />;
+      return <svg style={style} ref={node => this.node = node} />;
     }
 
     let margin = MARGIN_LR * scale;
     let width = outerWidth - (margin * 2);
     let pctPos = width * this.props.percent;
 
-    return <svg onMouseUp={this._up} onMouseEnter={this._enter.bind(this)} onMouseMove={this._move} onTouchEnd={this._up} style={style}>
+    return <svg onMouseUp={this._up} onMouseEnter={this._enter.bind(this)} onMouseMove={this._move} onTouchEnd={this._up} style={style} ref={node => this.node = node}>
       <rect className='primary' style={{ opacity: 0.3 }} x={margin} y='0.25em' rx='0.3em' ry='0.3em' width={width} height='0.7em' />
       <rect className='primary-disabled' x={margin} y='0.45em' rx='0.15em' ry='0.15em' width={pctPos} height='0.3em' />
       <circle className='primary' r={margin} cy='0.6em' cx={pctPos + margin} />

src/app/components/SlotSection.jsx

@@ -5,6 +5,7 @@ import { wrapCtxMenu } from '../utils/UtilityFunctions';
 import { canMount } from '../utils/SlotFunctions';
 import { Equalizer } from '../components/SvgIcons';
 import cn from 'classnames';
+const browser = require('detect-browser');
 
 /**
  * Abstract Slot Section
@@ -76,8 +77,10 @@ export default class SlotSection extends TranslatedComponent {
    * @param  {Event} e           Drag Event
    */
   _drag(originSlot, e) {
+    if (!browser || (browser.name !== 'edge' && browser.name !== 'ie')) {
       e.dataTransfer.setData('text/html', e.currentTarget);
-    e.dataTransfer.effectAllowed = 'all';
+    }
+    e.dataTransfer.effectAllowed = 'copyMove';
     this.setState({ originSlot, copy: e.getModifierState('Alt') });
     this._close();
   }
@@ -94,12 +97,16 @@ export default class SlotSection extends TranslatedComponent {
     if (os) {
       // Show correct icon
       const effect = this.state.copy ? 'copy' : 'move';
+      if (!browser || (browser.name !== 'edge' && browser.name !== 'ie')) {
         e.dataTransfer.dropEffect = os != targetSlot && canMount(this.props.ship, targetSlot, os.m.grp, os.m.class) ? effect : 'none';
+      }
       this.setState({ targetSlot });
     } else {
+      if (!browser || (browser.name !== 'edge' && browser.name !== 'ie')) {
         e.dataTransfer.dropEffect = 'none';
       }
     }
+  }
 
   /**
    * Drag over non-droppable target/element
@@ -107,7 +114,9 @@ export default class SlotSection extends TranslatedComponent {
    */
   _dragOverNone(e) {
     e.preventDefault();
+    if (!browser || (browser.name !== 'edge' && browser.name !== 'ie')) {
       e.dataTransfer.dropEffect = 'none';
+    }
     this.setState({ targetSlot: null });
   }
 

src/app/components/VerticalBarChart.jsx

@@ -95,6 +95,10 @@ class ValueLabel extends React.Component {
     value: PropTypes.number
   };
 
+  /**
+   * Render offence
+   * @return {React.Component} contents
+   */
   render() {
     const { x, y, payload, value } = this.props;
 

src/app/pages/ComparisonPage.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { findDOMNode } from 'react-dom';
 import Page from './Page';
 import Router from '../Router';
 import cn from 'classnames';
@@ -17,7 +16,7 @@ import ModalImport from '../components/ModalImport';
 import { FloppyDisk, Bin, Download, Embed, Rocket, LinkIcon } from '../components/SvgIcons';
 import ShortenUrl from '../utils/ShortenUrl';
 import { comparisonBBCode } from '../utils/BBCode';
-
+const browser = require('detect-browser');
 
 /**
  * Creates a comparator based on the specified predicate
@@ -228,9 +227,11 @@ export default class ComparisonPage extends Page {
     let placeholder = this.placeholder = document.createElement('li');
     placeholder.style.width = Math.round(this.dragged.offsetWidth) + 'px';
     placeholder.className = 'facet-placeholder';
+    if (!browser || (browser.name !== 'edge' && browser.name !== 'ie')) {
       e.dataTransfer.effectAllowed = 'move';
       e.dataTransfer.setData('text/html', e.currentTarget);
     }
+  }
 
   /**
    * Handle facet drop
@@ -383,7 +384,7 @@ export default class ComparisonPage extends Page {
    */
   _updateDimensions() {
     this.setState({
-      chartWidth: findDOMNode(this.refs.chartRef).offsetWidth
+      chartWidth: this.chartRef.offsetWidth
     });
   }
 
@@ -498,9 +499,9 @@ export default class ComparisonPage extends Page {
         <ComparisonTable builds={builds} facets={facets} onSort={this._sortShips} predicate={predicate} desc={desc} />
 
         {!builds.length ?
-          <div className='chart' ref={'chartRef'}>{translate('PHRASE_NO_BUILDS')}</div> :
+          <div className='chart' ref={node => this.chartRef = node}>{translate('PHRASE_NO_BUILDS')}</div> :
           facets.filter((f) => f.active).map((f, i) =>
-            <div key={f.title} className='chart' ref={ i == 0 ? 'chartRef' : null}>
+            <div key={f.title} className='chart' ref={ i == 0 ? node => this.chartRef = node : null}>
               <h3 className='ptr' onClick={this._sortShips.bind(this, f.props[0])}>{translate(f.title)}</h3>
               <BarChart
                 width={chartWidth}

src/app/pages/OutfittingPage.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 // import Perf from 'react-addons-perf';
-import { findDOMNode } from 'react-dom';
 import { Ships } from 'coriolis-data/dist';
 import cn from 'classnames';
 import Page from './Page';

src/app/pages/ShipyardPage.jsx

@@ -65,7 +65,7 @@ function shipSummary(shipId, shipData) {
     th = ship.standard[1].maxClass + 'A';
   }
 
-  ship.optimizeMass({ th: th, fsd: '2D', ft: '1C' }); // Optmize mass with Max Thrusters
+  ship.optimizeMass({ th, fsd: '2D', ft: '1C' }); // Optmize mass with Max Thrusters
   summary.topSpeed = ship.topSpeed;
   summary.topBoost = ship.topBoost;
   summary.baseArmour = ship.armour;

src/app/shipyard/Ship.js

@@ -1486,8 +1486,8 @@ export default class Ship {
     let bufsize = 0;
     for (let i = 0; i < slots.length; i++) {
       if (slots[i].length > 0 || (blueprints[i] && blueprints[i].id)) {
-        // Length is 1 for the slot ID, 5 for each modification, and 1 for the end marker
-        bufsize = bufsize + 1 + (5 * slots[i].length) + 1;
+        // Length is 1 for the slot ID, 5 for each modification, 1 for the end marker of the modifications and 1 for the end marker of the slot
+        bufsize = bufsize + 1 + (5 * slots[i].length) + 1 + 1;
 
         if (blueprints[i] && blueprints[i].id) {
           // Additional 10 for the blueprint and grade

webpack.config.prod.js

@@ -18,6 +18,7 @@ CopyDirPlugin.prototype.apply = function(compiler) {
 };
 
 module.exports = {
+  cache: true,
   entry: {
     app: ['babel-polyfill', path.resolve(__dirname, 'src/app/index')],
     lib: ['d3', 'react', 'react-dom', 'classnames', 'fbemitter', 'lz-string']
@@ -76,7 +77,7 @@ module.exports = {
     rules: [
       { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader'}) },
       { test: /\.less$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader',use: 'css-loader!less-loader'}) },
-      { test: /\.(js|jsx)$/, loaders: [ 'babel-loader' ], include: path.join(__dirname, 'src') },
+      { test: /\.(js|jsx)$/, loader: 'babel-loader?cacheDirectory=true', include: path.join(__dirname, 'src') },
       { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
       { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
       { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },