ES6 modules' path resolution failure

问题

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?

回答1:

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.

来源：https://stackoverflow.com/questions/45803208/es6-modules-path-resolution-failure

标签

javascript

html

ecmascript-6

es6-modules