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

时间:2017-06-11 08:32:15

标签: javascript es6-modules

我安装了chrome beta - 版本60.0.3112.24(官方版本)测试版(64位)

在chrome:// flags / I中启用了“实验性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 bug还是ES6在这种情况下要求扩展?

webpack也可以在没有扩展名的情况下构建它!

3 个答案:

答案 0 :(得分:7)

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

作为证据,试试这个:

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

重新加载,您会看到扩展名jstest完全无效,只要您在export中指定。

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

答案 1 :(得分:5)

不,模块不关心扩展。它只需要是一个解析为源文件的名称。

在您的情况下,http://localhost/bla/src/drawImage不是http://localhost/bla/src/drawImage.js时的文件,因此会出现错误。例如,您可以将服务器配置为忽略扩展名。 Webpack也是如此。

答案 2 :(得分:1)

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

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

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