Node.jsでimport/exportを試してみた。

著者：高木信尚

公開日：2018/05/29

最終更新日：2018/05/29

カテゴリー：技術情報

タグ：ECMAScript／JavaScript／Node.js

高木です。おはようございます。

あいかわらずJavaScriptと格闘しています。
今回挑戦したのはimport/exportです。

以前にも書いたと思いますが、私はJavaScriptの実行環境としてNode.jsを使っています。
今回もNode.jsでimport/exportを試してみたわけですが、これが結構はまりました。

まず、Node.jsのバージョンですが、8.11.1を使っています。
最新版は8.11.2 LTSのようなので、ひとつ前のバージョンということになるかと思います。

とりあえず、ネット上で調べた情報を頼りに、以下のようなスクリプトを書いてみました。

// a.js
import B from './b.js';

var b = new B();
b.f();

// a.js

import B from './b.js';

var b = new B();

b.f();

// b,js
class B {
  f() {
    console.log('B');
  }
}

export default B;

// b,js

class B {

f() {

console.log('B');

}

export default B;

一見うまくいきそうなのですが、importのところで下記のようなエラーを吐いてうまく動いてくれません。

(function (exports, require, module, __filename, __dirname) {
import B from './b.js';

^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Function.Module.runMain (module.js:693:10)
    at startup (bootstrap_node.js:188:16)
    at bootstrap_node.js:609:3

(function (exports, require, module, __filename, __dirname) {

import B from './b.js';

^^^^^^

SyntaxError: Unexpected token import

at createScript (vm.js:80:10)

at Object.runInThisContext (vm.js:139:10)

at Module._compile (module.js:616:28)

at Object.Module._extensions..js (module.js:663:10)

at Module.load (module.js:565:32)

at tryModuleLoad (module.js:505:12)

at Function.Module._load (module.js:497:3)

at Function.Module.runMain (module.js:693:10)

at startup (bootstrap_node.js:188:16)

at bootstrap_node.js:609:3

いろいろ調べたところ、mozillaのドキュメントに

ユーザーが明示的にこの機能を有効にしなければなりません。

とありました。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import#%ブラウザ互換性

なるほど、何か実行オプションが必要なんだろうと思い、node -hで調べましたがよくわかりません。
結局たどり着いた答えは、Node.jsでimport/exportを使うには、次の2つが必要になるとのことです。

拡張子を.mjsにする。
nodeコマンドの実行オプションに–experimental-modulesを付ける。

これで、下記のような警告というかメッセージが出ますが、何とかうまくいきました。

(node:10000) ExperimentalWarning: The ESM module loader is exp
erimental.

1 2	(node:10000) ExperimentalWarning: The ESM module loader is exp erimental.

ところで、importする際には、ファイル名の拡張子は省略してもかまわないようですね。
一定のルールに基づいて補ってくれるようです。

experimentalだというので、import/exportを本当に使って大丈夫か少し不安になりました。
念のため、ECMAScriptの最新規格である2017年版を調べてみると、ちゃんとimport/exportの記述があります。
これで一安心です。
今使っているNode.jsではexperimentalかもしれませんが、近いうちに正式な機能となるはずです。

今回悩んだあたり、JavaScriptのベテランの方なら一蹴できるのかもしれませんが、初心者の私にとっては一歩一歩確かめながら進むしかありません。
またひとつ勉強になりました。