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

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.我有一个我想配置的 TypeScript 项目，因此它使用 ES2015 模块，而没有任何模块捆绑器，如 Browserify 或 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. 在 TypeScript 编译器文档中，有一个选项可以指定生成哪种类型的模块，例如 CommonJS、AMD、ES2015 等。我的选项设置为 ES2015。

The problem I have is that the rendered JavaScript imports modules using the "./file" syntax instead of "./file.js" syntax.我遇到的问题是渲染的 JavaScript 使用“./file”语法而不是“./file.js”语法导入模块。 JavaScript modules in the browser must end in .js, otherwise a 404 not found error is generated.浏览器中的 JavaScript 模块必须以 .js 结尾，否则会产生 404 not found 错误。

The only solution I've found that works is to specify the "./file.js" syntax inside the TypeScript files themselves, which is incorrect.我发现唯一有效的解决方案是在 TypeScript 文件本身中指定“./file.js”语法，这是不正确的。

What can I do to get the .js file extension for modules being imported in the rendered JavaScript files?我该怎么做才能为在呈现的 JavaScript 文件中导入的模块获取 .js 文件扩展名？

index.html索引.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索引.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动物.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狗.ts

import { Animal } from './animal'

export class Dog extends Animal {
  public bark(): void {
    console.log(`${this.name} is barking.`);
  }
}

package.json包.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

What can I do to get the .js file extension for modules being imported in the rendered JavaScript files?我该怎么做才能为在呈现的 JavaScript 文件中导入的模块获取 .js 文件扩展名？

Not much, see this github issue .不多，看这个github issue 。 You could write your own transform and use something like ttypescript instead of regular compiler.您可以编写自己的转换并使用ttypescript之类的东西而不是常规编译器。

The only solution I've found that works is to specify the "./file.js" syntax inside the TypeScript files themselves, which is incorrect.我发现唯一有效的解决方案是在 TypeScript 文件本身中指定“./file.js”语法，这是不正确的。

No it's not incorrect, it's what some members of TypeScript team had recommended and some people are actually using .不，这并没有错，这是 TypeScript 团队的一些成员推荐的，而有些人实际上正在使用. It works, in the sense that TypeScript will still look for and compile a .ts file if it exists, not .js file.它有效，因为 TypeScript 仍然会查找并编译.ts文件（如果存在），而不是.js文件。

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.另一个潜在的解决方案是使用导入映射和导入映射生成器将无扩展导入映射到浏览器中的 URL。 However, it's still "spec in progress" and is not yet implemented in all browsers .然而，它仍然是“正在进行的规范”并且尚未在所有浏览器中实现。

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-06-25 02:29:51

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-06-25 02:29:51

解决方案1
2 已采纳 2019-06-25 02:29:51