“导入”语句在呈现的 HTML 中的脚本中不起作用

Question

我正在开发一个快速应用程序，我正在尝试执行以下操作，但我一遍又一遍地遇到相同的错误 - “GET http://localhost:3000/javascript/module2 net::ERR_ABORTED 404 (Not Found)”

有人可以向我指出我犯了什么错误并指出我正确的方向吗？下面是我的代码 -

模块1.js

import theFunc from "./module2";
console.log("In module 1");
theFunc();

模块2.js

export default function theFunc() {
console.log("from module 2");
}

索引.html

<html>
 <body>
   Should show the result in console.
  <script type="module" src="./javascript/module1.js"></script>
 </body>
</html>

提前致谢！:)

Answer 1

该消息指出了这个问题，但它仍然很容易被遗漏。

GET http://localhost:3000/javascript/module2 net::ERR_ABORTED 404

是问题，因为而不是

http://localhost:3000/javascript/module2

网址实际上是

http://localhost:3000/javascript/module2.js

带.js扩展名。

问题是

import theFunc from "./module2";

应该

import theFunc from "./module2.js";

Node 可以自动添加 .js ，因为它可以查看文件系统，如果没有与给定名称匹配的文件，它将再次尝试附加 .js 。从技术上讲，浏览器可以看到 404，然后在 URL 上附加“.js”，然后重试，但这意味着每次没有“.js”的导入都必须执行两倍的请求，这对性能来说是可怕的。 (3认同)
在互联网上很难找到这些信息。非常感谢，@loganfsmyth。 (2认同)

Answer 2

import和export语句属于ES6，因此你需要使用像Babel这样的转译器。第二个选项是使用requireES5 中的等效项：

首先将此脚本添加到 html 的头部：

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
</head>
<body>

更改这些行：

import theFunc from "./module2";

变成

 var theFunc = require("./module2");

还有这个：

export default function theFunc() {
console.log("from module 2");
}

变成：

function theFunc() {
console.log("from module 2");
}
module.exports = theFunc;