ES6的import/export需要使用“.js”文件扩展名吗？

Question

我安装了Chrome beta - 版本 60.0.3112.24（官方构建）beta（64位）。

在chrome://flags/中，我启用了“实验性网络平台功能”（参见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 的 bug 还是 ES6 在这种情况下需要扩展名？

同时，Webpack 在没有扩展名的情况下也可以成功构建！

- kofifus

---

是的，因为浏览器无法“猜测”服务器上存在哪些文件。它需要具有完整路径。Node会检查几种不同的文件模式，因为这很便宜，但在浏览器中这是不可接受的。 - Evert

Answer 1

不，模块并不关心扩展名。它只需要一个解析到源文件的名称。

在你的情况下，http://localhost/bla/src/drawImage 不是一个文件，而 http://localhost/bla/src/drawImage.js 是文件，所以报错了。你可以在所有导入语句中添加 .js 或者配置你的服务器忽略扩展名，例如 Webpack 做的那样。浏览器不会这样做，因为它不能随意重写 URL。

- Bergi

---

一般而言，这句话不正确："模块不关心扩展名"。Webpack 可能能够在没有 ".js" 的情况下解析该文件，但是目前浏览器无法做到这一点。 - Luke

@Luke 浏览器解析URL路径，但它们并不在扩展名方面进行任何魔法，因为它们不知道您的Web服务器上存在哪些资源。它们只是获取已解析的URL。如果您的服务器实际上在没有扩展名的URL上拥有一个模块，那么它也可以正常工作。 - Bergi

@gilamran 答案的第一段甚至适用于nodejs。模块不关心是否有扩展名。名称只需要能够被环境解析 - 当然，node会以不同于“相对规范”的方式解析“裸规范”。 - Bergi

这个答案是错误的。查看这个。或者阅读那个答案中给出的文档。正如它所说： 7. 如果pjson?.type存在且为“module”，则 7.1 如果url以“.js”结尾，则 7.1.1 返回“module”。 7.2 抛出不支持的文件扩展名错误。 - Muhammed Aydogan

@MuhammedAydogan 您提供的答案是关于Node.js的。而我回答的问题是关于浏览器中的ES6模块。 - Bergi

Answer 2

扩展名是文件名的一部分，您必须将其放入其中。

作为证明，请尝试以下操作：

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

重新加载，你会看到js或test扩展名完全是任意的，只要你在export中指定它。

显然，在测试结束后请恢复正确/更好的js扩展名。

- pid

---

谢谢！我有点困惑，因为似乎导入不需要扩展名？而且Webpack在没有扩展名的情况下也可以正常工作！ - kofifus

我从未尝试过那些实验性的特性，但在node.js中，您可以使用commonJS机制。我遇到过类似的问题，解决方法是避免让加载器猜测扩展名。此外，如果有两个文件都可能是可行的，比如data.js和data.json。我认为更好的方法是明确指出，但这只是我的意见。 - pid

@pid 是的，最好明确一些，完全同意。如果你的环境允许其他东西，那很好，但是没有理由让模块或模块系统去猜测。 - jimmont

Answer 3

ES6的import/export需要使用“.js”扩展名。

1. 相对路径如“./startup.js”或“../config.mjs”，它们是相对于导入文件所在位置的路径。对于这些路径，文件扩展名总是必需的。
2. 这种行为与在浏览器环境中import的行为相匹配，假设通常配置的服务器。

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

- 谭礼渊

---

ES6的import/export不需要“.js”扩展名是不正确的。请查看被接受的答案或您的第一个要点。 - Zsolt Meszaros

为什么在关于浏览器模块使用的问题中，你会链接到Node.js文档？ - Bergi