title: Uncaught SyntaxError: Unexpected identifier - importing jquery
body: <p>i have a problem with import statements in my website project. try to use nodejs - typescript and jquery</p>
  
  <p>my project folder looks like that:</p>
  
  <ul>
  <li>Project
  
  <ul>
  <li>node_modules</li>
  <li>public
  
  <ul>
  <li>js</li>
  <li>jquery/dist (copy form node_modules/jquery/dist)</li>
  <li>index.html</li>
  </ul></li>
  <li>ts
  
  <ul>
  <li>test.ts</li>
  </ul></li>
  </ul></li>
  <li>package.json</li>
  <li>tsconfig.json</li>
  </ul>
  
  <p>package.json:</p>
  
  <pre><code>{
    "name": "testclient",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
      "@types/jquery": "^3.3.4",
      "jquery": "^3.3.1"
    },
    "devDependencies": {
      "typescript": "^2.9.2"
    }
  }
  </code></pre>
  
  <p>tsconfig.json:</p>
  
  <pre><code>{
      "compileOnSave": true,
      "compilerOptions": {
          "experimentalDecorators": true,
          "sourceMap": true,
          "strict": true,
          "module": "ES2015",
          "moduleResolution": "Classic",
          "target": "ES5",
          "lib": ["dom", "es5", "es2015", "es2015.promise"],
          "removeComments": true,
          "sourceMap": true,
          "outDir": "public/js",
          "allowSyntheticDefaultImports": true
      },
      "include": [
          "ts/**/*"
      ],
      "exclude": [
          "node_modules"
      ]
  }
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="de"&gt;
      &lt;header&gt;
          &lt;title&gt;Test&lt;/title&gt;
      &lt;/header&gt;
      &lt;body&gt;
          Mein Test
      &lt;/body&gt;
      &lt;script type="text/javascript" src="js/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/test.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>test.ts</p>
  
  <pre><code>import $  from 'jquery';
  $(document).ready(() =&gt; {
      console.log('document is ready now');
      console.log($);
  });
  </code></pre>
  
  <p>if i start the index.html in my chrome browser and open the console i get a error:</p>
  
  <blockquote>
    <p>Uncaught SyntaxError: Unexpected identifier    test.js:1</p>
  </blockquote>
  
  <p>i figured out $ is not known at the moment i call it as jquery. so i cant use jquery in my script </p>
  
  <p>what is the best practice to get it run without using <code>///&lt;reference path=""/&gt;</code> for importing jquery. which tsconfig params are to set to get it running in browser?</p>