Question

我有一个要配置的TypeScript项目，因此它使用ES2015模块，而没有像Browserify或Webpack这样的模块捆绑器。

In the TypeScript compiler documentation，有一个选项可以指定生成哪种类型的模块，例如CommonJS，AMD，ES2015等。我将选项设置为ES2015。

我遇到的问题是，呈现的JavaScript使用“ ./file”语法而不是“ ./file.js”语法导入模块。浏览器中的JavaScript模块必须以.js结尾，否则将生成404 not found错误。

我发现唯一可行的解决方案是在TypeScript文件本身内部指定“ ./file.js”语法，这是不正确的。

对于在呈现的JavaScript文件中导入的模块，我该如何获取.js文件扩展名？

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"
  ]
}

Answer 1

对于在呈现的JavaScript文件中导入的模块，我该如何获取.js文件扩展名？

不多，请参阅this github issue。您可以编写自己的转换，并使用类似ttypescript的格式来代替常规编译器。

我发现唯一可行的解决方案是在TypeScript文件本身内部指定“ ./file.js”语法，这是不正确的。

否，这不是不正确的，这是TypeScript团队had recommended和some people are actually using的某些成员所为。从某种意义上说，它是有效的，因为TypeScript仍会查找并编译.ts文件（如果不存在）.js文件。

另请参阅this issue。

另一个潜在的解决方案是使用import maps和import map generator将无扩展名的导入映射到浏览器中的URL。但是，它仍在“进行中”并且是not yet implemented in all browsers。

在没有模块加载器的情况下在TypeScript中使用ES2015模块

1 个答案: