web-dev-qa-db-ja.com

インポートがChromeで機能しない

Vanilla JavaScriptで単一ページのアプリを作成しています。異なるファイルにコードを整理してモジュール化したいので、あるファイルで定義された関数に別のファイルでアクセスできる必要があります。このためにES6ネイティブimportexportを使用しています。

file-1.js：

export function func1() {}
export function func2() {}

file-2.js：

import { func1, func2 } from './file-1';

index.html：

<script src="file-1.js"></script>

Index.htmlをChrome（バージョン65）で実行すると、次のエラーが表示されます：Uncaught SyntaxError: Unexpected token {。

私のコードの何が問題になっていますか？ Chrome 65はES6モジュールシステムを完全にサポートしています。

javascriptgoogle-chromeecmascript-6
14
maverick

これが実際の例です

file1.mjs

function log1() {
  console.log('log1');
}
function log2() {
  console.log('log2');
}
export { log1, log2 };

file2.mjs.mjs拡張機能を明示的に記述する必要があります

import { log1, log2 } from './file1.mjs';

log1();
log2();

index.htmlNotice属性type = "module"

<body>
    <script type="module" src="file2.mjs"></script>
</body>

次に、CORSブロックを取り除くための静的サーバーが必要です。

$ yarn global add serve
$ serve ./

最後にhttp://localhost:5000に移動すると動作します

更新： .mjsではなく.jsファイル拡張子を使用することをお勧めします

19
Vu Huu Cuong

Chrome（v70）には、importプロトコルを使用して提供されるローカルファイルでfile構文を操作するときに何らかの問題があります。一部の記事によると、fileプロトコルを使用して発生する可能性があるのはおそらくCORSブロッキングです。しかしChromeもこの場合コンソールにCORS警告を表示しません-これは奇妙です。したがって、HTTPプロトコルを介してファイルを提供するために何らかの種類のHTTPサーバーが必要です（Vuが回答）。Firefox v63（おそらく> v60）にはこれらの問題はなく、特別なサーバーなしでfile://プロトコルを使用してhtmlモジュールでjsを構成できます。

次のことも確認してください。

  • インポート時にファイルタイプ拡張子を使用します（import { func1, func2 } from './file-B.js';）。

  • hTML script要素でtype="module"を使用（<script type="module" src="file-A.js"></script>）

2
croraf