Javascript ES模块导入不工作_Javascript

Javascript ES模块导入不工作

javascript

Javascript ES模块导入不工作,javascript,Javascript,我试图做一个简单的例子香草ES进口出口 index.js <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="module" src="main.js"></script> </head> <body> </body> </html> mathModule.js export co

我试图做一个简单的例子香草ES进口出口

index.js

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script type="module" src="main.js"></script>
</head>
<body>

</body>
</html>

mathModule.js

export const foo = Math.sqrt(2);

当我运行这个页面时，我得到一个错误

main.js:1 GET http://[page].net/test/mathModule 404 (Not Found)

编辑：项目结构

试验
- index.html
- main.js
- mathModule.js

导入

需要完全限定的URL。除非绝对URL上没有扩展名，否则不能关闭扩展名

因此，根据您的示例判断，请使用：

import {foo} from './mathModule.js';

正如所发现的，扩展需求似乎在不同的实现之间有所不同。Firefox正在自动添加

.js

，但Chrome和Safari需要实际地址

我正在看规范，似乎没有任何关于实现者是否应该自动附加扩展的规范

此外，正如所指出的：

要从中导入的模块。这通常是相对或绝对路径包含模块的.js文件的名称。某些捆绑者可能会允许或要求使用扩展；检查您的环境。只允许使用单引号和双引号字符串

最简单的方法是删除

export

和

import

表达式，因为您已经在html中包含了这两个文件

const foo=Math.sqrt（2）//mathModule.js
console.log（foo）//main.js

该URL是否存在？@SLaks它应该是mathModule.js，然后更改导入以匹配该URL。如果main.js导入依赖项本身，为什么要同时为这两个URL添加

？您还必须在

import

语句中添加“.js”扩展名。您在哪个浏览器中运行此操作？（Downvote不是我写的。我只是向上投票）不，给定的代码在我的本地主机上运行良好，没有扩展名。这很有效（我习惯从TypeScript导入没有扩展名的文件），谢谢@NimeshkaSrimal我几乎肯定是这样的，因为我刚刚创建了一个小项目来测试扩展是否重要。@zero298可能是这样的，但它在FF（61.0.1）中运行良好。所以我认为这是一个浏览器问题？@NimeshkaSrimal你说得对。我只是尝试在FF和它附加的扩展自动。我将在答案中添加这个警告。不确定你在看什么，但所有主要种植者的当前版本都支持模块。除此之外，简化只针对所提供的示例，而不是一般的解决方案。使用模块有很多好处。

import {foo} from './mathModule.js';