web-dev-qa-db-ja.com

予期しないトークンのエクスポート

プロジェクトでES6コードを実行しようとしていますが、予期しないトークンのエクスポートエラーが発生しています。

export class MyClass {
  constructor() {
    console.log("es6");
  }
}
javascriptecmascript-6webpackbabel
117
Jason

ES6モジュールの構文を使用しています。

これはあなたの環境（例えばnode.js）がES6モジュール構文をサポートしなければならないことを意味します。

NodeJSは、ES6モジュール構文（exportキーワード）ではなく、CommonJSモジュール構文（module.exports）を使用します。

溶液：

  • ES6をbabelターゲットに変換するには、commonjs npmパッケージを使用します。

または

  • CommonJS構文でリファクタリングします。
152
Phil Ricketts

このエラーが発生した場合は、JavaScriptファイルをHTMLページに含めた方法に関連している可能性もあります。モジュールをロードするときは、それらのファイルを明示的に宣言する必要があります。ここに例があります：

//module.js:
function foo(){
   return "foo";
}

var bar = "bar";

export { foo, bar };

このようなスクリプトを含めると、

<script src="module.js"></script>

エラーが発生します。

不明なSyntaxError：予期しないトークンのエクスポート

Type属性を "module"に設定してファイルをインクルードする必要があります。

<script type="module" src="module.js"></script>

そしてそれは期待通りに動作し、あなたは他のモジュールにあなたのモジュールをインポートする準備ができています：

import { foo, bar } from  "./module.js";

console.log( foo() );
console.log( bar );
62
Wilt

ES6を使用するにはbabel-preset-envを追加してください

そしてあなたの.babelrcに：

{
  "presets": ["env"]
}
8
Jalal

ノードjsはES6ターゲットを直接理解しないため、ES6をcommonjsターゲットに変換するbabelパッケージ@babel/coreおよび@babel/presetをインストールします。

npm install --save-dev @babel/core @babel/preset-env

次に、プロジェクトのルートディレクトリに.babelrcという名前の構成ファイルを1つ作成し、そこにこのコードを追加する必要があります

{ "presets": ["@babel/preset-env"] }

0
YouBee