I am currently working on a small example for a web app utilizing typescript. My main issue lies in importing a module.
I am seeking advice on why this is incorrect and what potential solutions I have to resolve it.
The specific problem I am facing is a 404 error in the index.js file when attempting to import the 'hello' module.
Below is the code snippet:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p>Check the console log...</p>
</body>
<script type="module" src="/dist/index.js"></script>
</html>
index.ts
import { HelloWorld } from "./hello";
var helloWorld = new HelloWorld();
helloWorld.sayHello();
hello.ts
export class HelloWorld {
constructor() {
}
sayHello() {
console.log("Hello, world!");
}
}
tsconfig.json
{
"compilerOptions": {
"target": "ES2015",
"module": "ES2015",
"lib": ["es2015", "dom"],
"moduleResolution": "node",
"allowJs": true,
"checkJs": true,
"sourceMap": true,
"outDir": "./dist",
"strict": true,
"esModuleInterop": true,
"experimentalDecorators": true,
"forceConsistentCasingInFileNames": true
}
}
Running the above code through tsc results in the following output:
dist
hello.js
hello.js.map
index.js
index.js.map
Breakdown of the files generated:
hello.js
export class HelloWorld {
constructor() {
}
sayHello() {
console.log("Hello, world!");
}
}
//# sourceMappingURL=hello.js.map
index.js
import { HelloWorld } from "./hello";
var helloWorld = new HelloWorld();
helloWorld.sayHello();
//# sourceMappingURL=index.js.map
By changing 'hello' to 'hello.js' in the index.ts, it resolves the issue. However, this approach doesn't feel right, especially considering there's no 'index.js' during development.
What is the proper way to address this problem to make it work smoothly in an ES2015 compatible browser like Chrome?
Do I need to implement something like requirejs?