我有一个我想配置的 TypeScript 项目，因此它使用 ES2015 模块，而没有任何模块捆绑器，如 Browserify 或 Webpack。在 TypeScript 编译器文档中，有一个选项可以指定生成哪种类型的模块，例如 CommonJS、AMD、ES2015 等。我的选项设置为 ES2015。我遇到的问题是渲染的 JavaScript 使用“./file”语法而不是“./file.js”语法导入模块。浏览器中的 JavaScript 模块必须以 .js 结尾，否则会产生 404 not found 错误。我发现唯一有效的解决方案是在 TypeScript 文件本身中指定“./file.js”语法，这是不正确的。我该怎么做才能为在呈现的 JavaScript 文件中导入的模块获取 .js 文件扩展名？索引.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>索引.tsimport { 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();动物.tsexport 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.`); }}猫import { Animal } from './animal'export class Cat extends Animal { public meow(): void { console.log(`${this.name} is meowing.`); }}狗.tsimport { Animal } from './animal'export class Dog extends Animal { public bark(): void { console.log(`${this.name} is barking.`); }}包.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" }}配置文件{ "compilerOptions": { "module": "ES2015", "outDir": "js", "sourceMap": true, "strict": true, "target": "es2017" }, "exclude": [ "node_modules" ]}
1 回答
MMMHUHU
TA贡献1834条经验 获得超8个赞
我该怎么做才能为在呈现的 JavaScript 文件中导入的模块获取 .js 文件扩展名？
不多，看这个github issue。您可以编写自己的转换并使用ttypescript之类的东西而不是常规编译器。
我发现唯一有效的解决方案是在 TypeScript 文件本身中指定“./file.js”语法，这是不正确的。
不，这并没有错，这是 TypeScript 团队的一些成员推荐的，而有些人实际上正在使用. 它是有效的，因为 TypeScript 仍然会查找并编译.ts存在的文件，而不是.js文件。
另请参阅此问题。
另一个潜在的解决方案是使用导入映射和导入映射生成器将无扩展导入映射到浏览器中的 URL。然而，它仍然是“正在进行的规范”并且尚未在所有浏览器中实现。
添加回答
举报
0/150
提交
取消