web-dev-qa-db-ja.com

Chrome 61：予期しないトークンのインポート

実行中Chrome 61これは モジュールのロードをサポートすることを想定） with import。

確かに、ポールの デモ は私には有効です。ただし、自分で試してみると、「予期しないトークンのインポート」というJSエラーが発生します。 Chromeはimportで動きが鈍そうです：

test.html

<!doctype html> 
<html>
<body>
<script src="test.js"></script>
</body>
</html>

test.js：

import {hello} from './something.js'
console.log(hello())

something.js

export {hello}
function hello() {
    return "hello world"
}

なぜChromeは「インポート」を理解しない

javascriptgoogle-chromees6-modules
20
Marc

私にとって何がうまくいったのかを正確に知りたいと思う人にとっては、上からのいくつかの答えの組み合わせのようなものでした。また、URLバーにchrome：// flagsと入力して「import」を検索することにより、ChromeのES6インポート機能を有効にする必要がありました。

最初にHTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=Edge">
    <title>Testing JavaScript Stuff</title>
</head>
<body>
    <script type="module">
        import { circleArea, squareArea } from './CalcArea.js';

        console.log(circleArea(2));
        console.log(squareArea(2));
    </script>
</body>
</html>

ご覧のとおり、スクリプトモジュールに「モジュール」タイプを追加するだけで、以下でインポートを行います。私のテストでは、CalcArea.jsファイルは次のとおりです。

const circleArea = r => 3.14 * (r ** 2);

const squareArea = s => s * s;

export {circleArea, squareArea};
3
David Ayres

それは<script type=module src=test.js>。モジュールスクリプトでは、構文全体が微妙に変更されています（importおよびexportが許可され、厳格モードが必須です）。

18
Josh Lee

最後に...それを理解しました。 chrome://flagsimportを検索して、ES6インポート構文を有効にします。 Chromeを再起動します。幸せになる。

2
flcoder