Typescript 导入编译为 javascript 时缺少 .js 扩展名

Question

Typescript 导入编译为 javascript 时缺少 .js 扩展名

Ast*_*h32 8 javascript typescript ecmascript-6

我决定将我的 js 项目迁移到 ts 中，但是我面临以下问题：ts 文件中的所有导入在编译的 js 文件中都缺少 .js 扩展名。这又会Loading failed for the module with source \xe2\x80\x9chttp://localhost:5500/build/test/first\xe2\x80\x9d.在我的浏览器控制台上引发以下错误：\n。这是代码

\n\n

/src/index.html

\n\n

<!DOCTYPE html>\n<html lang="en">\n<head>\n<meta charset="UTF-8">\n<meta name="viewport" content="width=device-width, initial-scale=1.0">\n<title>Document</title>\n</head>\n<body>\n</body>\n<script src="/build/test/last.js" type="module"></script>\n</html>\n

Run Code Online (Sandbox Code Playgroud)\n\n

/src/test/first.ts

\n\n

export class First {\n    name: string;\n\n    constructor(name: string) {\n        this.name = name\n    }\n}\n

Run Code Online (Sandbox Code Playgroud)\n\n

/src/test/last.ts

\n\n

import {First} from "./first"\nclass Last {\n\n    constructor() {\n        let name = new First("this is my name").name;\n        console.log(name)\n    }\n}\n\nnew Last();\n

Run Code Online (Sandbox Code Playgroud)\n\n

/build/test/first.js

\n\n

export class First {\n    constructor(name) {\n        this.name = name;\n    }\n}\n

Run Code Online (Sandbox Code Playgroud)\n\n

/build/test/last.js

\n\n

import { First } from "./first";\nclass Last {\n    constructor() {\n        let name = new First("this is my name").name;\n        console.log(name);\n    }\n}\n

Run Code Online (Sandbox Code Playgroud)\n\n

请注意，在 last.js 中，导入缺少 .js 扩展名，如果我手动添加缺少的扩展名，一切都会按预期工作。最后这是我的 ts 配置

\n\n

{\n    "compilerOptions": {\n        "target": "ESNext",\n        "lib": ["DOM","ES2017", "DOM.Iterable", "ScriptHost"],\n        "watch": true,\n        "rootDir": "./src", \n        "outDir": "./build",\n        "sourceMap": true,\n        "removeComments": true,\n        "noEmitOnError": true,\n        "strict": true,\n    }\n}\n

Run Code Online (Sandbox Code Playgroud)\n\n

我是否遗漏了一些没有在导入中添加正确扩展名的东西？如果是这样，请告诉我我做错了什么。谢谢。

\n

Answer 1

Jör*_*tag -6

我是否遗漏了一些没有在导入中添加正确扩展名的东西？

为什么 TypeScript 会随机改变你的导入？您告诉它导入名为的模块，./first并且它正确地将其编译为名为的模块的导入./first。

如果你想导入不同的模块，你需要告诉 TypeScript 导入不同的模块。

因此，如果您不想导入名为的模块./first，而是想要导入名为的模块./first.js，则需要告诉 TypeScript 导入名为的模块./first.js，而不是名为的模块./first：

import {First} from "./first.js"

Run Code Online (Sandbox Code Playgroud)

OP 的问题是合理的，不值得-1。他们从两个链接的 TS 模块（其中隐含导入中的 .ts 扩展名）开始，并将它们编译为两个 JS 模块。TS 编译器应该保留生成的 JS 模块之间的链接，这要求它在导入中添加 .js 扩展名。 (8认同)
在我自己的项目中，我想导入一个名为“./config”的模块，所以显然，我导入的是“./config”而不是“./config.js”。事实上，在我的项目中，*没有*`./config.js`，所以这根本不起作用。 (2认同)

归档时间：	5 年，11 月前
查看次数：	3599 次
最近记录：	4 年，11 月前