機械系大学生の修行ログ

sh-lu0's Tech Blog

アイドルが力をくれる

Babel用の設定ファイルを作成

手順

  1. npm initでプロジェクト初期化
  2. ライブラリをインストール
  3. Babel設定ファイル「.babelrc」を作成
  4. JSファイルを変換

プロジェクト初期化

$mkdir babeltest
$ cd babeltest/
$ npm init

ライブラリをインストール

「Babel CLI」と「ES2015」をプロジェクトにインストール

$ npm install --save-dev babel-cli
$ npm install --save-dev babel-preset-es2015

Babel設定ファイル「.babelrc」を作成

  • プロジェクトフォルダに「.babelrc」ファイルを作成
  • 以下の内容を追加
{"presets": ["es2015"]}

JSファイルを変換

$ babel ファイル名.js -o ファイル名.out.js 

package.jsonにコマンドを登録

先ほどの変換処理をbuild時に行うように以下を追加

  "scripts": {
    "start": "node hello.js",
    "build": "babel hello.js -o hello.out.js"
  },

ビルドして実行

$ npm run build

> babeltest@1.0.0 build /Users/username/Projects/babeltest
> babel hello.js -o hello.out.js
$ npm run start

> babeltest@1.0.0 start /Users/usernamei/Projects/babeltest
> node hello.js

監視モードを追加 プログラムを書き換えるたびに変換してくれる

  "scripts": {
    "start": "node hello.js",
    "build": "babel hello.js -o hello.out.js",
    "watch": "babel hello.js -w -o hello.out.js"
  },

プログラムの開発を始めるときに使う

$ npm run watch