ES6 import/export 是否需要“.js”扩展名？

Question

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

在 chrome://flags/ 我启用了 'Experimental Web Platform features'（参见 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 也可以在没有扩展名的情况下构建它！

Answer 1

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

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

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

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

中指定它即可

显然，测试后恢复到 correct/better js 扩展。

Answer 2

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

在您的情况下，http://localhost/bla/src/drawImage 不是文件，而 http://localhost/bla/src/drawImage.js 是文件，所以这就是错误的来源。例如，您可以在所有导入语句中添加 .js，或者将服务器配置为忽略扩展名。 Webpack 做同样的事情。浏览器不行，因为不允许任意改写url。

Answer 3

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

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

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

ES6 import/export 是否需要“.js”扩展名？

Does ES6 import/export need ".js" extension?

javascript

es6-modules