1

現在、Safari Developer Preview(ES2015を100%サポートすると主張しています)でES2015をテストしています。Safari DPでES2015モジュールをインポートするにはファイルの拡張子が必要です

私は、ES2015コード(transpilingには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>

+1

* ModuleSpecifier *は、環境によってモジュールをロードするために使用されます。言語が規定するものではないので、環境には '.js'拡張が必要な​​場合とそうでない場合があります。 – CodingIntrigue

+0

私はそれを知らなかった。私は開発中の良い練習(蒸散とバンドリングでさえ)として常に確実に '.js'拡張を置かなければならないと思います。 – Zorgatone

答えて

2

意外なことに、私のコードでは、import文での.js拡張子を含めずに動作しないでしょう。その標準的な行動ですか?私はあなたがそれを省略できると思った。

リソース指定子がサーバーに何を意味するのかを後で推測するのはブラウザの仕事ではありません。あなたは.jsの一致するファイルを配信することによって、.jsなしでGETに応答するようにサーバーを構成できますが、それはサーバー構成です。

この点で進化がありそうです。たとえば、今すぐthe specは、モジュールリソース指定子が/または./で始まることが必要です。これは、我々は独自のモジュールローダがimport "jquery"import "web/crypto"などの輸入指定子を、「裸」に特別な意味を与えることを許可することができ、将来的に...特にそのように...

です。今のところ、そのようなインポートは、相対URLとして扱われる代わりに失敗します。

+0

ブラウザをロードしようとするモジュールをインポートすると本当に思いましたgetリクエストの '.js'拡張。私のコードエディタのオートコンプリートは '.js'拡張子を持たないインポートを提案します。 私は本当にその部分を省略してはいけません。 – Zorgatone

+1

@Zorgatone:それはそのままでは、打ち切られたとしてもこれが永遠に必要でした。 :-)私は、「単純に保つ」ことから始まり、そこでそこから進化していくと思います。 –

+0

私は知っている:本当に!だから私は少し驚いて、それを試してみることに興奮している – Zorgatone

関連する問題