javascript - 如何使用 TypeScript 编译器 (TSC) 解析 Node.js ES6 (ESM) 模块。 TSC 不发出正确的文件扩展名

Question

我正在尝试将我的 TypeScript 项目转换为 JavaScript，但是，似乎有些不对劲。我将项目配置为通过 "module":"ES6" 解析为 ES6 模块(又名 ESM)设置，但不能解决问题。

这就是我的 tsconfig.json 配置如下:

  {
    "compilerOptions": {
      "module": "es6",
      "target": "es6",
      "lib": ["es6"],
      "sourceMap": true,
    }
  }

使用一对模块的测试用例:

我使用两个模块编写了一个简单的测试用例 senario。

1. 第一个模块 — module1.ts — 只导出一个常量，如下所示:

   • >

       export const testText = "It works!"; 
     

2. 第二个模块 — main.ts — 只导入第一个模块的导出:

   • >

       import { testText } from 'module1';
       alert(testText);
     

第二个模块(或ma​​in.js)的输出文件嵌入到我的 index.html 文档，并且我已将类型属性添加为 type="module"到 <script ...>标签，如下图:

    <script src="main.js" type="module"></script>

当我使用 Firefox(dom.moduleScripts.enabled 在 about:config 中设置)或 Chrome Canary(设置了实验性 Web 平台标志)时，它不会工作。

Typescript 编译器似乎转译了 TS import { testText } from 'module1'; -statement 到 JS 语句 import { testText } from 'module1'; . (注:两者完全一样)

正确的 ES6 导入语句应该是: import { testText } from 'module1.js';(注意 .js 文件扩展名)如果我手动将文件扩展名添加到生成的代码中，它就可以工作。

是我做错了什么还是 Typescript "module": "es6" 做错了？设置不能正常工作？有没有一种方法可以将 .js 文件扩展名添加到生成的导入语句中来配置 tsc？

Answer 1

这是一个 confusing design choice in TypeScript .

在短期内，您可以通过指定输出文件来解决它:

在 main.ts 中指定 .js 扩展名和路径:

import { testText } from './module1.js';
alert(testText);

这将正确获取 module.ts，但输出包含 .js 扩展名。

请注意，您还需要在本地文件前加上 ./ 前缀，因为“裸”模块名称保留供将来使用。