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

未加载的依赖项

“开发人员工具”窗口显示mymodule.js已正确加载，但其依赖关系不正确，路径不正确。文件mymodule.js在开头有这三行：

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正在加载资源，否则如果它取决于服务器拥有root的位置，那就变得棘手了。我在这里做错了什么？

Answer 1

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

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

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

ES6模块的路径解析失败

未加载的依赖项

1 个答案: