TL;DR
Babelでは以下のコードは、
global.foo = 42;
import bar from "bar";
以下のコードと同じ意味。
import bar from "bar";
global.foo = 42;
検証
本記事執筆時点での最新版であるbabel-cli@6.5.1
とbabel-preset-es2015@6.5.0
を検証に使う。
Babelはimport文に相当する処理を一番最初に持っていくのかを確認するために、以下のファイルをBabelで変換したコードがどうなるかを調べる。
test.js
global.foo = 42;
import bar from "bar";
次のコマンドを実行する。
npm install babel-cli@6.5.1 babel-preset-es2015@6.5.0
"$(npm bin)"/babel --presets es2015 test.js
結果はこうなる。
"use strict";
var _bar = require("bar");
var _bar2 = _interopRequireDefault(_bar);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
global.foo = 42;
確かにimport文に相当する機能を持つrequire("bar")
が一番最初に実行されるコードが出力されていることが分かる。
何故こうなるのか
import文はモジュールのロードを静的に行うためのものなので、他の処理よりも実行順が早くなる。
その仕様をES5の範囲で表現しようとするとBabelのような実装になる。
補足: 細かい話
Babelは、
global.foo = 42;
import bar from "bar";
と
import bar from "bar";
global.foo = 42;
で同じコードを出力するが、ES2015の仕様としてこの両者が本当に厳密に同じ意味を持つのかは、仕様書を斜め読みしたもののよく分からなかった。
なので念のため、この記事は全体的にES2015でなくBabelに限定した書き方にしている。