予期しないトークンのエクスポートを取得する

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

export class MyClass {
  constructor() {
    console.log("es6");
  }
}

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

つまり、環境（node.jsなど）はES6モジュールの構文をサポートする必要があります。

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

解決：

• babelnpmパッケージを使用してES6をcommonjsターゲットにトランスパイルします

または

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

CommonJS構文の例は（flaviocopes.com/commonjs/から）です。

• exports.uppercase = str => str.toUpperCase()
• exports.a = 1

このエラーが発生した場合は、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 );

私の2セント

書き出す

ES6

myClass.js

export class MyClass1 {
}
export class MyClass2 {
}

other.js

import { MyClass1, MyClass2 } from './myClass';

CommonJSの代替

myClass.js

class MyClass1 {
}
class MyClass2 {
}
module.exports = { MyClass1, MyClass2 }
// or
// exports = { MyClass1, MyClass2 };

other.js

const { MyClass1, MyClass2 } = require('./myClass');

デフォルトをエクスポート

ES6

myClass.js

export default class MyClass {
}

other.js

import MyClass from './myClass';

CommonJSの代替

myClass.js

module.exports = class MyClass1 {
}

other.js

const MyClass = require('./myClass');

お役に立てれば

ES6を使用するには babel-preset-env

そしてあなたの中で.babelrc：

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

@ghanbariコメントのおかげで回答が更新され、Babel 7が適用されます。

デフォルトのJavaScriptモジュールエクスポートをそのまま使用できるので、現時点ではBabelを使用する必要はありません（JSは非常に強力になりました）。完全なチュートリアルを確認する

Message.js

module.exports = 'Hello world';

app.js

var msg = require('./Messages.js');

console.log(msg); // Hello World

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

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

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

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

エントリーポイントファイルをこんな風にして修正しました。

// index.js
require = require('esm')(module)
module.exports = require('./app.js')

そして、私がインポートしたファイルapp.jsはimports/exports 動作するようになりましたnode index.js

注：をapp.js使用する場合export default、これrequire('./app.js').defaultはエントリポイントファイルを使用する場合になります。

ES6構文を使用してもノードでは機能しません。残念ながら、エクスポートやインポートなどの構文をコンパイラーに認識させるには、明らかにbabelが必要です。

npm install babel-cli --save

次に、.babelrcファイルを作成する必要があります。babelrcファイルで、ES5にコンパイルするときにプリセットとしてインストールしたes2015プリセットを使用するようにbabelを設定します。

アプリのルートで、.babelrcファイルを作成します。$ npm install babel-preset-es2015 --save

アプリのルートで、.babelrcファイルを作成します。

{  "presets": ["es2015"] }

それがうまくいくことを願っています... :)