設定 babel browserify watchify babelify presets es2015

このエントリーをはてなブックマークに追加

ES6 でクラス構文、及びモジュールを扱うための import 構文を書き、ブラウザで使用可能な ES6 に Babel で変換し、さらにモジュールの依存関係を Browserify で解消する。という一連の作業を npm scripts で実行する方法について書いています。

Babel, Browserify, Watchify, Babelify の関係

  • Babel は ES6(ES2015)→ES5 に変換するツール。(恐らく Babelify も内部では Babelを使用している。) 自分は class 構文、及び import, export 構文を書くために必要。
  • Browserify はモジュール機能を使うために必要。(require , export 構文を用いて読み込む JS ファイルの依存関係を解決するシステム。ES6 のimport, export 構文は ES6 に変換されると、require, export 構文になる。) transform オプション(-t)に babelify を指定することで(-t babelify) まず bable で変換した後にモジュールの処理がされる。
  • Babelify は Browserify のオプションとして指定することで(-t babelify)Babel で変換してくれる。(どのようなルールで変換するか、プリセットの設定が必須)
  • Watchify は Browserify の watch 版。つまり、ファイル更新がされたときだけ実行される。さらに、差分だけをビルドするので、ファイル更新を Browserify でウォッチするよりも、早い。 またこれは Browserify と同じ作者が作成しており、ウォッチ用途にはこちらが推薦されている。
  • Babel は実行時に presets オプションが必須。同様に Babelify にも presets が必須。.babelcr ファイルもしくは package.json に記録することが可能。
  • Browserify, Watchify は –transform (-t)オプションで Babelify を指定することで Babel の処理を間に入れることが出来る。Babel と同様に Package.json で指定可能。

npm scripts でタスクを実行する

npm scripts (package.json 内の script フィールドに記述する) でタスクを実行する。ここには CLI (コマンドラインインターフェイス、Mac ならターミナル等) で npm を実行するコマンドと同じものを基本的に書けば良い。(基本的に、といったのは、ここで実行するコマンドはシェルに依存するので、mac や win など OS に異なる場合には、コマンドも異なるため。その差を埋める方法については後述)

Grunt や Gulp といったタスクランナーを使わずに npm scripts で コマンドラインを実行する利点は、第一にタスクランナー専用のプラグインよりも、CLI から実行可能な npm の方が多く、第二にそれぞれのタスクランナー専用の設定ファイルを書く必要がないという点がある。(参照：原文、翻訳) (ただし Grunt や Gulp で運営されるプロジェクトも多くあるため、これらのタスクランナーの知識は不必要ということでははない。)

実感として、初歩的なビルド、コンパイルであれば CLI での実行は簡単で、公式ドキュメントを参照すれば十分に理解できる。ただし、複雑なタスクの実行するには npm scripts への理解が必要になる。それでも公式マニュアルに情報が多いため、対応が楽だと感じている。

npm 及び package.json について

npm 及び package.json については次の記事を参照。(npm とは何か / Package と module の違い)

次のコードは package.json の中に書かれるもののサンプルで、”scripts” 内に npm scripts を書く。ここには基本的に CLI で実行するコードを書く。package.json は json なので次のルールを守って書く。

  • {“プロパティ1″:”値1″,”プロパティ2″:”値2”} と JS オブジェクトに似た全体像になる
  • {“プロパティ”:{“子プロティ1″:”値1″,”子プロティ2″:”値2”}} と階層化する際には、値にさらにオブジェクトを持つ。
  • 単に値が複数ある場合には配列を使う。{“プロパティ1”:[“値1″,”値2”]}
  • 全ての値は””で囲う。”は使用できない。そのため””内で””を使用するためには「\”」とエスケープする。
  • &を使うと、並列に実行される
  • && を使うと、実行後に実行される
  • npm scripts 内で、さらに run npm コマンド名を実行することも出来る。
{
  "name": "browserify-test",
  "version": "1.0.0",
  "main": "main.js",
  "dependencies": {
    "jquery": "^3.1.1"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.22.0",
    "browserify": "^14.1.0",
    "gulp": "^3.9.1",
    "node-sass": "^4.5.0",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.9.0"
  },
  "scripts": {
    "start": "npm run watch:script & npm run watch:sass",
    "watch:script": "watchify main.js -v -t babelify -d -o app.js",
    "build": "browserify main.js  -t [ babelify --presets [ es2015 ] ] -o app.js",
    "watch:sass": "node-sass --include-path src/sass --watch src/sass/screen.sass src/css/screen.css"
  }
}

実際の npm scripts

オプションを npm scripts 内に記述する

次のような npm scripts がある場合、コマンドラインで npm run build  や npm run watch:script と実行する。

-t [ babelify –presets [ es2015 ] ] はオプションで、babelify を使って ES6→Es5 に変換し、そのさいのプリセットは es2015 で実行することを指定している。(詳細は後述)

  • -0 –output の省略形。出力先のファイルの指定をするオプション
  • -v コンパイルした際に通知が入る。これを指定しないと、コンパイルしても何も教えてくれない。
  • -d –debug の省略形。ソースマップを出力する。
 "scripts": {
    "build": "browserify main.js  -t [ babelify --presets [ es2015 ] ] -o app.js",
    "watch:script": "watchify main.js -v -t [ babelify --presets [ es2015 ] ] -d -o app.js"
  }

オプションを Package.json 内に記述する

オプションはPackage.json 内に記述することも出来る。

まず Browserify の設定は Package.json に以下のように記述できることが Browserify ドキュメントに書いてある。つまり”browserify”: {“transform”: [“babelify”]}とすれば Babeliy を使うことを指定できる。ではその際のプリセットはどうすればいいか？

"scripts": {
    "watch:script": "watchify main.js -v -t babelify -d -o app.js",
    "build": "browserify main.js -o app.js"
  },
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015"
          ]
        }
      ]
    ]
  }

Babel の設定ファイル .babelrc

Babel の設定ファイルは .babelrc というファイルで、自動的に探して参照してくれる。しかし、同じ内容を package.json の中に書くことが出来るとマニュアルに書いてある。”babel”という項目の中に、設定を書く。

Babelify が使うプリセットの指定

Babelify が使うプリセットの指定は、.babelrc ファイルに書くように Browserify と Babelify の組み合わせで使うためのガイドラインに書いてある。さらに.babelrc は package.jsonの中に書くことが出来るわけだから、package.json 内に{“babel”:{“preset”:[ここにプリセットを書く]}とすればよい。

結果として次の様に書くことが出来る。browserify には transform に指定に babelify を指定し、babel のプリセットに関しては、babel 内に書けば良い。

  "scripts": {
    "watch:script": "watchify main.js -v -d -o app.js",
    "build": "browserify main.js -o app.js"
  },
  "babel": {
    "presets": [
      "es2015"
    ]
  },
  "browserify": {
    "transform": [
      "babelify"
    ]
  }

watchify の設定ファイル

watchify のオプションは browserify と同じだと書いてある。つまり結果として .babelrc を参照するが、なければ package.json 内を参照する。参照先はbrowserify と同じなのだと思われる。

highlighter_668843

npm scripts の完成形参照先

最終的には次のような npm scripts になると思われる。build:js と watch: js を御覧ください。私は現時点では「| exorcist」等理解できないものがあるので、これについても調べておって記事を書く。

npm-scripts で Web フロントエンド開発を管理する

次回

さしあたって JavaScript 周りのコンパイル、ビルドはできるようになったので、次はブラウザシンク、ロード、また CSS 関係のコンパイルを調べる。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です