ES6模块的路径解析失败 [英] ES6 modules' path resolution failure

查看:228
本文介绍了ES6模块的路径解析失败的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图在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;

请记住 dep1.js dep2.js dep3.js mymodule.js

我认为 mymodule.js 正在加载资源,否则如果它取决于哪里服务器正在变得棘手。我在这里做错了什么?

解决方案

正如您在日志中看到的,相对路径已正确解析,预期的一个。问题是你的文件被称为 dep1.js 不是 dep1 (etc)。添加文件扩展名:

  import * as dep1 from./dep1.js; 
导入*为./dep2.js中的dep2;
导入*为./dep3.js中的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:

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

This is my page 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>

I set up Http-Server:

http-server /Users/myuser/myproject

So that I have a server running and serving stuff (in order to avoid CORS issues related to using the 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

Developer Tools window shows that 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";

Remember that dep1.js, dep2.js and dep3.js are in the same location as mymodule.js.

I think that 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?

解决方案

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 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";

Alternatively you can configure your server to resolve these automatically.

这篇关于ES6模块的路径解析失败的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆