我正在尝试使用 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:/// 协议(protocol)相关的 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 窗口显示 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 可以很好地加载资源，否则如果它取决于服务器拥有根目录的位置，这就变得棘手了。我在这里做错了什么？
最佳答案
在日志中可以看到，相对路径解析正确，文件夹是预期的。问题是您的文件名为 dep1.js 而不是 dep1(等等)。添加文件扩展名:
import * as dep1 from "./dep1.js";
import * as dep2 from "./dep2.js";
import * as dep3 from "./dep3.js";
或者，您可以将服务器配置为自动解决这些问题。
关于javascript - ES6 模块的路径解析失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45803208/