Initially, I am struggling to articulate the correct question. It seems like there may be some confusion or overlap in my understanding of the TypeScript compiler, new ES2015 (ES6) module syntax, and module loaders.
My current objective is to utilize ES2015 module syntax to import an npm-installed jquery module while ensuring that TypeScript transpiles it to ES5.
However, upon attempting to open index.html, I encountered an error:
system-polyfills.src.js:1276 Error: SyntaxError: Unexpected token <
Evaluating http://localhost:3000/jquery
Error loading http://localhost:3000/app/main.js
The content of index.html is as follows:
<html>
<head>
<title>Bare TypeScript</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<div>Loading...</div>
</body>
</html>
- I'm uncertain about the necessity of
.<script src="node_modules/jquery/dist/jquery.js"></script> - Why does the B import function correctly even when
console.log($)is disabled? Shouldn't the jQuery import also function properly? - Could the issue be related to mixing npm's commonjs modules with systemjs?
In my main.ts file, the code appears as follows:
import * as $ from 'jquery'
import B from './app.b'
console.log("Monkey");
let b = new B();
console.log($);
How can I configure tsc to effectively work with ES2015 module syntax? Please note that I am using TypeScript version 1.8.
The tsconfig.json file contains the following settings:
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
Lastly, the package.json file lists the dependencies as:
"dependencies": {
"es6-shim": "^0.35.0",
"jquery": "^2.2.2",
"systemjs": "0.19.25"
}
The typings.json file includes the following ambient dependencies:
{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
"jquery": "registry:dt/jquery#1.10.0+20160316155526"
}
}