web-dev-qa-db-ja.com

ES6モジュールのトラブル

解決済み：サーバーのMIMEタイプを修正すると、問題が修正されました。しばらく前に自分でそれらをいじったことを忘れていました。 @ Sidney 、 @ estus 、 @ Josh Lee を助けてくれてありがとう。

現在のバージョンのChromeで動作するES6モジュールのMDNで参照されている working live-demo を見つけたら、モジュールを試してみたかったのです。残念ながら、ライブデモが正常に機能していても、実行に関連するモジュールを取得できません。両方のファイル（ index.html 、 tils.js ）をサーバー上のディレクトリにコピーして、ライブデモを正確に再作成しようとしましたが、それでもうまくいきません。 1行のコードでも実行します。何が足りないのですか？モジュールスクリプトがいつ実行されるのか、なぜ実行されないのかについて、誰かが私にヒントを教えてもらえますか？

tl; dr：ES6モジュールの動作例を見つけましたが、自分のローカルサーバーで再作成しようとしても動作しません。

[編集：]はい、コンソールは「すべて非表示」に設定されています。ただし、どちらのサイトにもfavicon.icoがないというエラーが表示されるため、私の問題とは何の関係もありません。

[編集：]記事 MDNによって参照され、ライブデモが含まれています。

[更新：]問題は、モジュールを取得するときにローカルサーバーによって指定された誤ったMIMEタイプにあるようです。

index.html/test.htm：

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
<script type="module">
  import {addTextToBody} from './utils.js';

  addTextToBody('Modules are pretty cool.');
</script>

utils.js：

export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

鉱山：Mine

ライブデモ：enter image description here

javascriptgoogle-chromemoduleecmascript-6
3
John Smith

ここでのエラーメッセージは

モジュールスクリプトのロードに失敗しました：サーバーは、JavaScript以外のMIMEタイプ「text/html」で応答しました。 HTML仕様に従って、モジュールスクリプトに対して厳密なMIMEタイプチェックが実施されます。

これはWeb開発の新しい要件であり、これまでのところ、ほとんど問題なく誤ったMIMEタイプを回避できました。

妥当なMIME処理を備えていることがわかっているローカル開発用の2つのクイックWebサーバーは次のとおりです。

  1. Pythonの：python3 -m http.server（ 1 を参照）。
  2. ノードのhttpサーバー：npm i -g http-server && http-server（ 2 を参照）。

あなたの場合、エラーメッセージは表示されていません。

すべて非表示[…]フィルターによって非表示にされた1つのアイテム

[すべて非表示]をクリックして[デフォルト]を選択することでこれを修正します（作業中にこれを[すべてのレベル]に設定することをお勧めします）。または、devtoolsをデフォルトの状態にリセットします。

  1. DevtoolsでF1を押します（またはメニュー> [設定]を選択します）。
  2. 一番下までスクロールして、[デフォルトに戻して再読み込み]をクリックします。
3
Josh Lee

このyamlを使用して問題を解決しました。

runtime: python38
service: yourservice

handlers:
  - url: /(.*\.(gif|png|jpg|less|json|woff|woff2|ttf|eot|scss|css|js|ico|svg)(|\.map))$
    static_files: dist/\1
    upload: dist/(.*)(|\.map)
  - url: /(.*)
    static_files: dist/index.html
    upload: dist/index.html
0
Nelson González