web-dev-qa-db-ja.com

ES6のインポート/エクスポートには「.js」拡張子が必要ですか？

インストールしましたchrome beta-バージョン60.0.3112.24（公式ビルド）beta（64ビット）

Chrome：// flags /で「実験的な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バグですか、それともこの場合ES6は拡張機能を要求しますか？

また、webpackは拡張機能なしで問題なくビルドします！

javascriptes6-modules
12
kofifus

いいえ、モジュールは拡張機能を気にしません。ソースファイルに解決される名前である必要があります。

あなたの場合、http://localhost/bla/src/drawImageはファイルではありませんが、http://localhost/bla/src/drawImage.jsであるため、エラーが発生します。たとえば、拡張子を無視するようにサーバーを構成できます。 Webpackも同じことをします。

6
Bergi

拡張子はファイル名の一部です。あなたはそれを入れなければなりません。

証拠としてこれを試してください：

  • ファイルの名前をdrawImage.testに変更します
  • index.jsを編集して'./drawImage.test'を含めます

リロードすると、jsで指定する限り、拡張testまたはexportが完全に任意であることがわかります。

明らかに、テスト後、正しい/より良いjs拡張子に戻ります。

7
pid