在浏览器中解析打字稿模块会产生404 [英] Resolving typescript modules in the browser yields a 404
问题描述
我正在寻找一个使用 typescript 创建的Web应用程序的小示例.我在导入模块时遇到问题.
I am looking to put together a small example of for a web app that is created using typescript. I have an issue with importing a module.
我只想知道为什么这是错误的，以及我必须对其进行排序的选项.
I just want information on why this is wrong and what options I have to sort it.
问题是尝试导入hello时index.js文件中的404.
The problem is a 404 for the in the index.js file when trying to import the hello.
这是代码:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p>Check the console log...</p>
</body>
<script type="module" src="/dist/index.js"></script>
</html>
index.ts
import { HelloWorld } from "./hello";
var helloWorld = new HelloWorld();
helloWorld.sayHello();
hello.ts
export class HelloWorld {
constructor() {
}
sayHello() {
console.log("Hello, world!");
}
}
tsconfig.json
{
"compilerOptions": {
"target": "ES2015",
"module": "ES2015",
"lib": ["es2015", "dom"],
"moduleResolution": "node",
"allowJs": true,
"checkJs": true,
"sourceMap": true,
"outDir": "./dist",
"strict": true,
"esModuleInterop": true,
"experimentalDecorators": true,
"forceConsistentCasingInFileNames": true
}
}
以上使用 tsc 编译应用程序的输出如下:
The output of the above using tsc to compile the app is as follows:
dist
hello.js
hello.js.map
index.js
index.js.map
这些如下:
export class HelloWorld {
constructor() {
}
sayHello() {
console.log("Hello, world!");
}
}
//# sourceMappingURL=hello.js.map
index.js
import { HelloWorld } from "./hello";
var helloWorld = new HelloWorld();
helloWorld.sayHello();
//# sourceMappingURL=index.js.map
现在，如果我将 index.ts 更改为完整的 hello.js 而不是 hello ，那么它将起作用.感觉不对-因为在编写代码时没有 index.js .
Now if I change the index.ts to the full hello.js instead of hello then this will work. This feels wrong - as there is no index.js whilst I am coding this.
解决此问题的正确方法是在兼容Chrome的 ES2015 浏览器中运行?
What is the correct way of resolving this to run in an ES2015 compatible browser such as Chrome?
我是否必须使用诸如 requirejs 之类的东西?
Do I have to use something such as requirejs?
推荐答案
您可以在打字稿中使用从'./hello.js'导入h.
另请阅读此线程 https://github.com/microsoft/TypeScript/issues/16577
You can use import h from './hello.js' in your typescript.
Also read this thread https://github.com/microsoft/TypeScript/issues/16577
这篇关于在浏览器中解析打字稿模块会产生404的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
