У меня есть проект TypeScript, который я хотел бы настроить, чтобы он использовал модули ES2015 без какого-либо модуля модулей, такого как Browserify или Webpack.
В документации компилятора TypeScript есть возможность указать, какой тип модуля генерируется, например. CommonJS, AMD, ES2015 и т. Д. У меня установлена опция ES2015.
Проблема, с которой я столкнулся, состоит в том, что отрендеренный JavaScript импортирует модули, используя синтаксис "./file" вместо синтаксиса "./file.js". Модули JavaScript в браузере должны заканчиваться на .js, в противном случае генерируется ошибка 404. Не найдено.
Единственное найденное решение, которое работает, - это указать синтаксис "./file.js" внутри самих файлов TypeScript, что неверно.
Что я могу сделать, чтобы получить расширение файла .js для модулей, импортируемых в отрендеренные файлы JavaScript?
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"
]
}