ES6 导入/导出是否需要“.js”扩展名？

IT技术 javascript es6-modules
2021-01-29 03:11:25

我安装了 chrome beta - Version 60.0.3112.24 (Official Build) beta (64-bit)

在 chrome://flags/ 中，我启用了“实验性 Web 平台功能”（参见https://jakearchibald.com/2017/es-modules-in-browsers）

然后我尝试： 

<script type="module" src='bla/src/index.js'></script>

其中 index.js 有这样一行： 

export { default as drawImage } from './drawImage';

这指的是现有文件 drawImage.js

我在控制台中得到的是错误 

GET http://localhost/bla/src/drawImage

如果我更改导出并添加“.js”扩展名，它工作正常。

这是一个 chrome 错误还是 ES6 在这种情况下要求扩展？

webpack 也可以在没有扩展的情况下很好地构建它！

3个回答

扩展名是文件名的一部分。你必须把它放进去。

作为证明试试这个：

  • 将文件重命名为 drawImage.test
  • 编辑index.js以包含'./drawImage.test'

重新加载，您将看到扩展名js或test完全任意，只要您在export.

显然，测试后恢复到正确/更好的js扩展。

谢谢 ！我很困惑，因为似乎导入不需要扩展？webpack 也可以在没有扩展的情况下正常工作！
2021-03-25 03:11:25
@pid 是的，最好是明确的，完全同意。如果您的环境允许其他东西，那很好，但是module或module系统没有理由去猜测
2021-03-28 03:11:25
我从未尝试过那些实验性功能，但在 node.js 中您使用了该commonJS机制。我遇到过类似的问题，解决方案是避免让加载程序猜测扩展名。此外，如果您有两个文件，则它们都可能可行，例如data.js和data.json. 我认为最好是明确的，但这只是我的意见。
2021-04-13 03:11:25

不，module不关心扩展。它只需要是解析为源文件的名称。

在您的情况下，http://localhost/bla/src/drawImageis not a file while http://localhost/bla/src/drawImage.jsis，所以这就是错误的来源。例如，您可以.js在所有导入语句中添加，或配置您的服务器以忽略扩展名。Webpack 也是如此。浏览器不会，因为它不允许随意重写 url。

@gilamran 答案的哪一部分不正确？我很乐意澄清。
2021-03-15 03:11:25
作为一般声明，这是不正确的：“module不关心扩展”。Webpack 或许可以在没有 的情况下解析文件.js，但浏览器目前还不能。
2021-03-16 03:11:25
@gilamran 答案的第一段甚至适用于 nodejs。该module不关心是否有扩展。该名称只需要可由环境解析 - 当然，节点确实解析“裸说明符”与“相对说明符”不同。
2021-03-25 03:11:25
我要收回它，这在nodejs环境中是不正确的
2021-04-12 03:11:25
@Luke 浏览器解析 url 的路径，但它们对扩展没有任何作用，因为它们不知道您的网络服务器上存在哪些资源。他们只是获取解析的 url。如果您的服务器实际上在无扩展名 url 上有一个module，它也可以正常工作。
2021-04-13 03:11:25

ES6 导入/导出需要“.js”扩展名。节点文档中有明确说明：

  1. 相对说明符，如“./startup.js”或“../config.mjs”。它们指的是相对于导入文件位置的路径。这些文件扩展名始终是必需的。
  2. 此行为与导入在浏览器环境中的行为方式相匹配，假设服务器是典型配置的。

https://nodejs.org/api/esm.html#esm_import_expressions

“ES6 导入/导出需要“.js”扩展名”是不正确的。请参阅已接受的答案或您的第一点。
2021-04-07 03:11:25
其它你可能感兴趣的问题
上一篇Socket.IO 客户端 .js 文件在哪里？ 下一篇javascript推送返回数字而不是对象