こちらの記事は以下の書籍を参考に執筆しました
javascriptに追加された機能の中で大きな位置を占めているのはモジュールである。
モジュールに関してトランスパイルだけでは不十分である。
#####トランスパイル
プログラミング言語のソースコードを別のプログラミング言語のソースコードに変換する。
モジュールの最大の特徴はコードを複数のファイルに分割できる。
つまり、それらを1つのファイルにバンドルする必要がある。
#モジュールとは
プログラミング言語ではモジュール化されたコードがサポートされており、
Rubyではgem、Pythonではegg、Javaではパッケージと呼ばれている。
ES2015でモジュールが導入されるまでこの概念をサポートしなかったため、
javascriptでモジュールを使用するソリューションがコミュニティで作成され、
最も普遍的なものとなったのがNode.jsである。
#Node.jsのモジュールの仕組み
Node.jsでのモジュールのインポートとエクスポートの方法は独特である。
Node.jsのモジュールではプログラムを複数のモジュールに分割できる。
それらのモジュールにはプログラムがカプセル化され、必要なAPIだけが公開される。
モジュールが公開するには明示的にエクスポートされたものだけなので何もラッピングする必要がない。
加えてモジュールが利用できるのはインポートされた場所だけなのでグローバル名前空間には影響しない。
#Browserify
Browserifyは、開発中はNode.jsと同じ方法でモジュールを定義し、
開発が終わるとそれらのモジュールを1つのファイルにバンドルできるようにするツールである。
Browserifyにはトランスフォームの概念があり、Babelのbabelifyというトランスフォームを利用すれば
Browserifyと連携させる事ができ、ES2015のモジュールを利用できるようになる。
#BrowserifyとBabelのセットアップ
##Browserifyのインストール
以下のようにBrowserifyをグローバルインストールを実行。
$ npm install browserify --global
##babelifyを使ってプロジェクトをセットアップ
プロジェクトフォルダを作成し、以下のようにファイルを作成する。
babelify_example
|--dist
|--src
| |--app.js
| |--index.js
└--.babelrc
その後、プロジェクトのルートフォルダへ移動して
以下のコマンドを入力して、NPMプロジェクトとして初期化、
Babelのプリセット/プラグインとbabelifyをインストール。
$ npm init -y
$ npm install @babel/core --save-dev
$ npm install @babel/preset-env --save-dev
$ npm install @babel/plugin-proposal-decorators --save-dev
$ npm install babelify --save-dev
次にBabelの構成を.babelrcファイルに追加する。
{
"presets": ["@babel/preset-env"],
"plugins": [
["@babel/plugin-proposal-decorators",{"legacy": true}]
],
"sourceMaps":"inline"
}
Browserifyとbabelifyを使用する準備が終わったところで簡単なモジュールを記載してテストします。
app.jsとindex.jsに以下のコードを入力。
const MyModule={
check();{
console.log('Yahoo! module are working!');
}
}
expect default MyModule;
import MyModule from './app';
MyModule.check();
その後、のシェルコマンドでバンドルします。
$ browserify src/index.js --transform babelify --outfile dist/bunndle.js --debug
するとdistフォルダにbundle.jsが作成されているのが確認できる。
先のコマンドについて説明すると
| 引数 | 説明 |
|---|---|
| src/index.js | アプリケーションのエントリポイントである。 |
| --transform babelify | コードをバインドする前にbabelifyを使ってコードをトランスパイルする |
| --outfile dist/bunndle.js | 出力ファイル先の指定 |
| --debug | ソースマップを含める |
###エントリポイント
他のモジュールをインポートするルートJavaScriptファイルのこと。
今回はindex.jsにimportで他のモジュールをインポートしているため、src/index.jsを指定する。
browserifyに指定できる引数リストの確認は次のコマンドを実行する。
$ browserify help
###nodeコマンドで実行する
トランスパイルされたbundle.jsをNode.jsで実行するには以下のコマンドを入力します。
$ node dist/bundle.js
すると以下の様に出力される
Yahoo! module are working!
###ブラウザで実行する
bundle.jsをブラウザで実行してみるために
ルートフォルダで以下のコードを作成する。
<!DOCTYPE html>
<html>
<head>
<title>Babelify example</title>
</head>
<body>
<h1>Hello,ES6</h1>
<script src="dist/bundle.js"></script>
</body>
</html>
ブラウザで表示してみるとHello,ES6と表示され
console画面にはYahoo! module are working!と表示される。
###ここまでのまとめ
-
checkメソッドを使ってapp.jsのメッセージを記録するモジュールを作成 - このモジュールを
index.jsでインポートし、checkメソッドを呼び出す - Browserifyとbabelrcを利用してjavascriptのトランスファイルとバンドルを実効
- バンドルされたコードをHTMLページにインクルードして、うまくいくことを確認
ソースコードを変更したらその都度再コンパイル(browserifyコマンドを実行)することを忘れないように。
browserifyコマンドをpacage.jsonにNPMスクリプトといて追加すれば、簡単にコンパイルできるようになる。
#まとめ
ES2015のモジュールをバンドルするためにBrowserifyをセットアップする方法について説明した。