【保存版】Node.js 5, 6, 8, 10, 12, 14, 16, 17, 18でES6モジュールを使用する方法

2024-05-23

Node.js 5 と Babel での「予期しないトークン import」エラー：詳細解説と解決策

Node.js 5 で Babel を使用する場合、「予期しないトークン import」というエラーが発生することがあります。これは、import キーワードが Node.js 5 ではネイティブにサポートされていないためです。

エラーの原因

import キーワードは ECMAScript 6 (ES6) で導入された新しい機能です。Node.js 5 は ES6 をサポートしていないため、import キーワードを使用しようとすると、このエラーが発生します。

解決策

この問題を解決するには、以下のいずれかの方法を実行する必要があります。

Babel プリセットを使用する

Babel には、ES6 コードを ES5 に変換するプリセットが用意されています。このプリセットを使用すると、import キーワードを含むコードを Node.js 5 で実行できます。

以下の手順で、Babel プリセットを使用して問題を解決できます。

Babel と Babel プリセットをインストールします。

npm install babel babel-preset-es2015

.babelrc ファイルを作成し、以下の内容を追加します。

{
  "presets": ["es2015"]
}

コードをコンパイルします。

babel your-code.js -o compiled-code.js

Babel ポリフィルは、ES6 の機能を古いブラウザや JavaScript エンジンで実行できるようにするライブラリです。Babel ポリフィルを使用すると、import キーワードを含むコードを Node.js 5 で実行できます。

npm install babel babel-polyfill

コードの冒頭に以下のコードを追加します。

import 'babel-polyfill';

補足

Node.js 6 以降は ES6 をネイティブにサポートしているため、この問題は発生しません。
TypeScript を使用している場合は、TypeScript コンパイラを使用して ES6 コードを ES5 に変換することもできます。

import { add, multiply } from './math-utils.js';

const result = add(10, 20);
console.log(result); // 30

const product = multiply(5, 3);
console.log(product); // 15

このコードを実行するには、以下の手順が必要です。

export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

{
  "presets": ["es2015"]
}

babel index.js -o compiled-code.js

コンパイルされたコードを実行します。

node compiled-code.js

30
15

この例では、import キーワードを使用して math-utils.js モジュールから add と multiply 関数をインポートしています。その後、これらの関数を使用して、2 つの数値の合計と積を求めています。

Babel ポリフィルを使用する場合は、コードの冒頭に以下のコードを追加する必要があります。

import 'babel-polyfill';

このコードを追加すると、import キーワードを含むコードを Node.js 5 で実行できます。

補足

このサンプルコードはごく基本的な例です。import キーワードを使用して、さまざまな種類の ES6 モジュールを読み込むことができます。詳細については、Babel ドキュメントを参照してください。

Node.js 5 での「予期しないトークン import」エラーを解決するその他の方法

CommonJS は、Node.js でモジュールをロードするためのもう 1 つの方法です。import キーワードを使用する代わりに、require() 関数を使用してモジュールをロードできます。

以下のコードは、CommonJS を使用して math-utils.js モジュールから add と multiply 関数をロードする方法を示しています。

const mathUtils = require('./math-utils.js');

const result = mathUtils.add(10, 20);
console.log(result); // 30

const product = mathUtils.multiply(5, 3);
console.log(product); // 15