LoginSignup
27
19

More than 5 years have passed since last update.

Node.js(v8.5.0以降)でBabelやwebpackを利用せずにimport/exportを利用する

Posted at

はじめに

ECMAScript 2015で導入されたモジュール機構(import/export)は、トランスパイラーのBabelやモジュール・バンドラーのwebpackを導入することで利用できるので、既に利用している方も多いかと思います。しかしながら、それらのツールを導入するのは結構面倒くさいですし、うまく設定しないと予期せぬ変換が行われて思わぬトラブルに陥る可能性もあります。
そもそもimport/exportキーワードを利用したモジュール機構は、標準仕様で定められているものなので、そんな補助的なツールを使わずにNode.jsだけで利用できればいいのに。。。
そう思っていた方々に朗報です。
まだ実験的な取り組みなので今後変更があるかもしれませんが、Node.js(v8.5.0以降)には標準のモジュール機構が組み込まれおり、既に利用できるようになっているのです。
ただ、標準のモジュール機構を利用できるようにするには若干の作業が必要となるので、今回はその方法をご紹介したいと思います。

作業のポイント

作業のポイントといってもそれほど難しいものではなく、下記の2つを行うだけで試すことができます。

ポイント1:拡張子を”.mjs”にする

これはNode.jsがファイルを読み込む際に、既存のモジュール形式(CommonJS Modules)なのか、新しいモジュール形式(ES Modules)なのかを簡単に判断できるように必要な作業です。
プログラムのメイン(エントリー・ポイント)となるファイルを含め、ES Modulesの構文を使うファイルは一通り拡張子を変更しておきましょう。

calculator.mjs
export const add = (a, b) => a + b;
export const sub = (a, b) => a - b;
app.mjs
import { add, sub } from './calculator';

console.log(add(10, 20));
console.log(sub(100, 50));

ポイント2:実行時に”--experimental-modules”オプションを指定する

まだ、実験段階なので通常の実行方法ではES Modulesの機能が有効になりません。
そこで下記のようにnodeコマンド実行時に”--experimental-modules”オプションを指定して実行するようにします。

node --experimental-modules app.mjs

注意点

上記のように簡単な作業で新しいモジュール機構を試すことができますが、いくつか注意点があります。

注意点その1:CommonJS Modulesの名前付きimportは利用しない

いわゆる”{ }”を利用して個別の要素をimportする方法は、CommonJS Modulesに対して利用できないようです。したがって、CommonJS Modulesはデフォルトimportを利用するようにしましょう。

注意点その2:Node.js固有のグローバル変数が使えない

いわゆる__dirname__filenameなど、いくつかのグローバル変数が使えません。開発ツールの設定ファイルなどでよく見かけるので注意しましょう。代替手段として、メタ・データを利用した取得方法が現在検討されているみたいです。

まとめ

今回は、import/exportの利用方法について簡単にご紹介しました。
詳細について知りたい方は下記のドキュメントやブログ記事が参考になります。
特に2つのブログ記事については詳しく書かれており、私自身も大変勉強になりました。良い記事を書いていただきありがとうございます。

なお、Node.jsのES Modulesはあくまでも試験的な取り組みなので、現時点(2017年10月時点)では、本番システムに適用しない方がよいと思います。ただ、これまでNode.jsで利用できていたものが利用できなくなるので、その辺は今から準備しておいた方がよいでしょう。
早く補助的なツールを利用しなくて済むようになるといいですね。
それではごきげんよう!

27
19
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
27
19