在 Safari DP 中导入 ES2015 模块需要文件扩展名答案

【问题标题】：Importing ES2015 module in Safari DP requires file extension在 Safari DP 中导入 ES2015 模块需要文件扩展名
【发布时间】：2017-01-17 14:52:14
【问题描述】：

我目前正在 Safari Developer Preview 上测试 ES2015 覆盖率（声称支持 100% ES2015，包括模块）。

我做了一个简单的测试，使用了我在使用 ES2015 代码进行开发时经常使用的相同语法（以及用于转译的 Babel.JS 和用于捆绑的 Browserify）。

如果不在 import 语句中包含 .js 扩展名，我的代码将无法正常工作。这是标准行为吗？我以为你可以省略它。

/* filename: scripts/alert.js */
export default class Alert {
    constructor(message) {
        this.message = message;
    }
    
    show() {
        alert(this.message);
    }
}

// Another file


/* filename: scripts/index.js */
import Alert from "./alert.js"; // this won't work if I change it to 'import Alert from "./alert";'

(new Alert("Hello, World!")).show();

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>ES2015 Modules</title>
</head>
<body>
    <h1>ES2015 Modules</h1>
    <script async="async" type="module" src"scripts/index.js">
    </script>
</body>
</html>

【问题讨论】：

环境使用 ModuleSpecifier 来加载模块。这不是语言规定的，因此环境可能需要也可能不需要.js 扩展。
我不知道。我想我必须始终将.js 扩展名作为开发过程中的一个好习惯（即使是编译和捆绑）

标签： javascript safari ecmascript-6 es6-module-loader es6-modules

【解决方案1】：

如果不在导入语句中包含 .js 扩展名，我的代码将无法正常工作。这是标准行为吗？我以为你可以省略它。

事后猜测资源说明符对服务器意味着什么不是浏览器的工作。您当然可以通过提供具有.js 的匹配文件来配置您的服务器以响应没有.js 的GET，但这是服务器配置。

这方面可能会有所发展。例如，现在the spec 要求模块资源说明符以/ 或./ 开头。这是专门为了……

...将来我们可以允许自定义模块加载器为“裸”导入说明符赋予特殊含义，例如import "jquery" 或import "web/crypto"。目前，任何此类导入都将失败，而不是被视为相对 URL。

【讨论】：

我真的以为当您导入一个模块时，浏览器会尝试在获取请求中使用 .js 扩展名加载它。我的代码编辑器自动完成建议没有 .js 扩展名的导入。那我真的不应该省略那部分，那么
@Zorgatone：这件事花了很长时间才变得如此确定。 :-) 我认为我们从“保持简单”开始，然后从那里发展。
我知道：真的！这就是为什么我有点惊讶并兴奋地尝试一下