ES6模块的路径解析失败 [英] ES6 modules' path resolution failure
问题描述
我试图在Chrome 60中使用新的ES6功能(通过启用实验性Web平台)。这是我的项目结构:
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个实验< / title>
< script type =modulesrc =../../ src / mymodule.js>< / script>
< / head>
< body>
< / body>
< / html>
我设置了 Http-Server :
http-server / Users / myuser / myproject
为了让我有一台运行服务器的服务器(为了避免与使用 file:///
protocol)。当我运行Chrome并输入地址栏时: localhost://pages/example/example1.html
,我得到这个错误:
[错误] GET http:// localhost:8080 / src / dep1
[错误] GET http:// localhost:8080 / src / dep2
[Error] GET http:// localhost:8080 / src / dep3
未加载的依赖关系
开发者工具窗口显示 mymodule.js
已正确加载,但其依赖关系不正确,路径不正确。 $ import *作为./dep1中的dep1;
导入*为./dep2中的dep2;
导入*为./dep3中的dep3;
请记住 我认为 正如您在日志中看到的,相对路径已正确解析,预期的一个。问题是你的文件被称为 或者,您可以配置您的服务器以自动解决这些问题。 I am trying to use the new ES6 features in Chrome 60 (by enabling Experimental Web Platform). This is the structure of my project: This is my page I set up Http-Server: So that I have a server running and serving stuff (in order to avoid CORS issues related to using the
Developer Tools window shows that Remember that I think that As you can see in the log, the relative path is resolved correctly, the folder is the expected one. The problem is that your files are called Alternatively you can configure your server to resolve these automatically. 这篇关于ES6模块的路径解析失败的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋! dep1.js
, dep2.js
和 dep3.js
与 mymodule.js $ c位于同一位置$ c $。
mymodule.js
正在加载资源,否则如果它取决于哪里服务器正在变得棘手。我在这里做错了什么? dep1.js
不是 dep1
(etc)。添加文件扩展名:
import * as dep1 from./dep1.js;
导入*为./dep2.js中的dep2;
导入*为./dep3.js中的dep3;
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 /Users/myuser/myproject
file:///
protocol). When I run Chrome and type in the address bar: localhost://pages/example/example1.html
, I get this error:[Error] GET http://localhost:8080/src/dep1
[Error] GET http://localhost:8080/src/dep2
[Error] GET http://localhost:8080/src/dep3
Dependencies not loaded
mymodule.js
is correctly loaded, but its dependencies not, the path is not correct. File mymodule.js
has these 3 lines at the beginning:import * as dep1 from "./dep1";
import * as dep2 from "./dep2";
import * as dep3 from "./dep3";
dep1.js
, dep2.js
and dep3.js
are in the same location as mymodule.js
.mymodule.js
is loading resources fine, otherwise if it depends on where the server is having the root this becomes tricky. What am I doing wrong here?dep1.js
not dep1
(etc). Add the file extension:import * as dep1 from "./dep1.js";
import * as dep2 from "./dep2.js";
import * as dep3 from "./dep3.js";