Using ES2015 Modules In TypeScript Without A Module Loader
Question
I have a TypeScript project that I would like to configure so it uses ES2015 modules without any module bundler like Browserify or Webpack.
In the TypeScript compiler documentation , there is an option to specify which type of module is generated eg CommonJS, AMD, ES2015, etc. I have my option set to ES2015.
The problem I have is that the rendered JavaScript imports modules using the "./file" syntax instead of "./file.js" syntax. JavaScript modules in the browser must end in .js, otherwise a 404 not found error is generated.
The only solution I've found that works is to specify the "./file.js" syntax inside the TypeScript files themselves, which is incorrect.
What can I do to get the .js file extension for modules being imported in the rendered JavaScript files?
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<base href="/">
</head>
<body>
<script type="module" src="./js/index.js"></script>
</body>
</html>
index.ts
import { Cat } from './cat'
import { Dog } from './dog'
let cat = new Cat('Lily');
cat.eat();
cat.sleep();
cat.meow();
let dog = new Dog('Rex');
dog.eat();
dog.sleep();
dog.bark();
animal.ts
export class Animal {
public readonly name: string;
public constructor(
name: string
) {
this.name = name;
}
public sleep(): void {
console.log(`${this.name} is sleeping.`);
}
public eat(): void {
console.log(`${this.name} is eating.`);
}
}
cat.ts
import { Animal } from './animal'
export class Cat extends Animal {
public meow(): void {
console.log(`${this.name} is meowing.`);
}
}
dog.ts
import { Animal } from './animal'
export class Dog extends Animal {
public bark(): void {
console.log(`${this.name} is barking.`);
}
}
package.json
{
"scripts": {
"start": "http-server -a localhost -p 5000 -c-1"
},
"devDependencies": {
"http-server": "^0.9.0",
"ts-loader": "^6.0.4",
"typescript": "^3.5.2"
}
}
tsconfig.json
{
"compilerOptions": {
"module": "ES2015",
"outDir": "js",
"sourceMap": true,
"strict": true,
"target": "es2017"
},
"exclude": [
"node_modules"
]
}
1 answers
solution1
2 ACCPTED 2019-06-25 02:29:51
What can I do to get the .js file extension for modules being imported in the rendered JavaScript files?
Not much, see this github issue . You could write your own transform and use something like ttypescript instead of regular compiler.
The only solution I've found that works is to specify the "./file.js" syntax inside the TypeScript files themselves, which is incorrect.
No it's not incorrect, it's what some members of TypeScript team had recommended and some people are actually using . It works, in the sense that TypeScript will still look for and compile a .ts file if it exists, not .js file.
See also this issue .
Another potential solution is to use import maps and import map generator to map extensionless imports to URLs in the browser. However, it's still "spec in progress" and is not yet implemented in all browsers .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.