ES6 模块的路径解析失败

Question

我正在尝试使用 Chrome 60 中的新 ES6 功能（通过启用 Experimental Web Platform）。这是我项目的结构：

myproject
├── src
|   ├── mymodule.js
|   ├── dep1.js
|   ├── dep2.js
|   ├── dep3.js
├── pages
    ├── example
        ├── example1.html

这是我的页面example1.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>E6 6 experiments</title>
    <script type="module" src="../../src/mymodule.js"></script>
</head>
<body>
</body>
</html>

我设置了Http-Server:

http-server /Users/myuser/myproject

这样我就有了一个服务器运行并提供服务（为了避免与使用 file:/// 协议相关的 CORS 问题）。当我运行 Chrome 并在地址栏中输入：localhost://pages/example/example1.html 时，我收到此错误：

[Error] GET http://localhost:8080/src/dep1 
[Error] GET http://localhost:8080/src/dep2 
[Error] GET http://localhost:8080/src/dep3

依赖项未加载

Developer Tools window 显示 mymodule.js 已正确加载，但其依赖项未加载，路径不正确。文件 mymodule.js 开头有这 3 行：

import * as dep1 from "./dep1";
import * as dep2 from "./dep2";
import * as dep3 from "./dep3";

请记住，dep1.js、dep2.js 和 dep3.js 与 mymodule.js 位于同一位置。

我认为 mymodule.js 可以很好地加载资源，否则如果它取决于服务器拥有根的位置，这就变得棘手了。我在这里做错了什么？

Answer 1

正如您在日志中看到的，相对路径解析正确，文件夹是预期的。问题是您的文件被称为 dep1.js 而不是 dep1 （等等）。添加文件扩展名：

import * as dep1 from "./dep1.js";
import * as dep2 from "./dep2.js";
import * as dep3 from "./dep3.js";

或者，您可以将服务器配置为自动解析这些问题。

ES6 模块的路径解析失败

ES6 modules' path resolution failure

html

javascript

ecmascript-6

es6-modules

依赖项未加载