title: Webstorm Typescript loading modules results in Unexpected token import
body: <p>So before I start following is a brief of the environment</p>
  
  <ol>
  <li>IDE: Webstorm, latest release</li>
  <li>es6 is installed and enabled</li>
  <li>babel is installed. babel file watcher is installed</li>
  <li>Typescripts is installed</li>
  </ol>
  
  <p>What I am trying to do is to create a module and then import it and use, however I always get different errors. Following is a list of files that I do have and its content</p>
  
  <ol>
  <li><p>staf.ts</p>
  
  <pre><code>export class Staf {
  StaffNo: number;
  Username: string;
  Firstname: string;
  Lastname: string;
  Password: string;
  Type: string;
  Program: array&lt;string&gt;;
  }
  </code></pre></li>
  </ol>
  
  <p>Webstorm underlines the word Staf with the folllowing error</p>
  
  <pre><code>cannot compile external modules unless the '--module' flag is provided
  </code></pre>
  
  <ol start="2">
  <li><p>login.js</p>
  
  <pre><code>import Staff from 'Staf';
  
  $(document).ready(function(){
  console.log('hello');
  
  var staff = [];
  
  $.getJSON('data/staff.json', function(data) {
  $.each(data, function (i, record) {
  staff.push(record);
  });
  });
  
  console.log(staff);
  
  $('.btn').click(function(){
  var name = $('input[aria-describedby=basic-addon-username]').val();
  var pass = $('input[aria-describedby=basic-addon-passwor]').val();
  
  $.each(staff, function(i, data){
  if( (data.Username == name || data.Firstname == name) &amp;&amp; data.Password == pass){
  console.log("hi");
  $($('.input-group')).addClass('has-success')
  window.location.href = "./actions.html";
  }
  })
  
  $($('.input-group')).addClass('has-error');
  $('.help-block').toggle();
  //$('.bg-danger').show();
  
  })
  
  })
  </code></pre></li>
  <li><p>Login.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;STARS - Login&lt;/title&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="css/login.css"&gt;
  &lt;script src="//code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
  &lt;!--&lt;script src="node_modules/babel-browser/browser.js"&gt;&lt;/script&gt;--&gt;
  &lt;script src="js/login.js"&gt;&lt;/script&gt;
  &lt;script src="node_modules/systemjs/node_modules/es6-module-loader/src/system.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      System.config({
          baseURL: 'node_modules/babel-browser/browser.js',
          // or 'traceur' or 'typescript'
          transpiler: 'babel',
          // or traceurOptions or typescriptOptions
          babelOptions: {
  
          }
      });
  
      // loads /app/main.js
      System.import('lgoin.js');
  
  &lt;/script&gt;
  &lt;/head&gt;
  
   &lt;body&gt;
  
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre></li>
  </ol>
  
  <p>When I try to run that I get three errors</p>
  
  <pre><code>  1. Uncaught SyntaxError: Unexpected token import
    2. Uncaught ReferenceError: Loader is not defined
    3. Uncaught TypeError: Cannot read property 'config' of undefined
  </code></pre>
  
  <p>Now I have tried to install babel, babel-cli and babel-preset-es2015
  However noting leads to a breakthrough to solve this issue</p>