BABEL を使ってみました

Using Babel を参考に進めてみます。軽く使えればよかったので、 Gulp とかのツールは使わずに、 Babel built-ins CLI を使うことにしました。

環境

npm 5.6.0
Babel 6.26.0

Babel のインストール

次のコマンドでインストールしました。

$ npm install --save-dev babel-cli
npm WARN ajv-keywords@3.1.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN dir@1.0.0 No description
npm WARN dir@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ babel-cli@6.26.0
added 84 packages in 28.671s

インストールすると package.json ファイルに babel-cli が含まれるようです。

$ cat package.json
{
  "name": "dir",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "eslint": "^4.18.1",
    "eslint-config-standard": "^11.0.0",
    "eslint-plugin-import": "^2.9.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.6.0",
    "eslint-plugin-standard": "^3.0.1"
  }
}

使い方

npm scripts で使うといいよ、とのことです。ので、 package.json の scripts を次のようにしました。

$ cat package.json
{
  "name": "dir",
  "version": "1.0.0",
  "description": "eslint",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src -d lib"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "eslint": "^4.18.1",
    "eslint-config-standard": "^11.0.0",
    "eslint-plugin-import": "^2.9.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.6.0",
    "eslint-plugin-standard": "^3.0.1"
  }
}

scripts に記述しておくと、 npm run build のように実行することができるようです。

そして、 Babel のコマンドに渡す引数は次のように記載されています。

Compile Directories

Compile the entire src directory and output it to the lib directory. You may use –out-dir or -d. This doesn’t overwrite any other files or directories in lib.
npx babel src --out-dir lib
Compile the entire src directory and output it to the one concatenated file.
npx babel src --out-file script-compiled.js
CLI · Babel

src はソースディレクトリー、 lib は出力ディレクトリーのようです。出力ファイル名を指定すると、 1 つにまとめたファイルを作成してくれるようです。

実行

実行してみます。

$ npm run build

> dir@1.0.0 build /home/user/dir
> babel src -d lib

src doesn't exist
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! dir@1.0.0 build: `babel src -d lib`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the dir@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2018-02-28T13_11_19_575Z-debug.log

エラーになりました。 src ディレクトリーがなかったみたいでした。

src ディレクトリーと、次のファイルを作成しました。

$ ls src
yourfile.js
$ cat src/yourfile.js
(() => {
  console.log('message.')
})()

実行してみます。

$ npm run build

> dir@1.0.0 build /home/user/dir
> babel src -d lib

src/yourfile.js -> lib/yourfile.js

トランスパイルできたみたいです。

ファイルの中を見てみます。

$ ls lib
yourfile.js
$ cat lib/yourfile.js
(() => {
  console.log('message.');
})();

あれ、セミコロンがついただけでした。アローファンクションもトランスパイルできるかと思ってました。が、設定によるものかもしれません。

環境設定ファイルの作成

まず、プリセットというものをインストールするようです。

環境に合わせて必要な Babel プラグインを自動的に決定してくれる Env プリセットというものを使ってみます。

Babel preset that automatically determines the Babel plugins you need based on your supported environments. Uses compat-table

Env preset · Babel

この引用によると、環境設定ファイルに稼働環境を記述することで、 Env プリセットが良しなにトランスパイルしてくれるようです。

次のコマンドでインストールしました。

$ npm install babel-preset-env --save-dev
npm WARN ajv-keywords@3.1.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN dir@1.0.0 No description
npm WARN dir@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ babel-preset-env@1.6.1
added 51 packages in 14.553s

インストールできたようです。

次に、 Babel の設定ファイルを次のように作成しました。

$ cat .babelrc
{
  "presets": ["env"]
}

改めて実行

改めて実行してみます。

$ npm run build

> dir@1.0.0 build /home/user/dir
> babel src -d lib

src/yourfile.js -> lib/yourfile.js

作成されたファイルを確認してみます。

$ cat lib/yourfile.js
'use strict';

(function () {
  console.log('message.');
})();

アローファンクションが普通のファンクションにトランスパイルされています。そして、 'use strict'; が勝手につくんですね。

終わり

プリセットのあたり、もう少し勉強しないといけないかもしれません。今回はテストの環境で使えれば良かったのですが、厳密に対応しようと思うと面倒そうです。 Babel に依存したくない、みたいな記事も目にしましたので、その気持ちがなんとなくわかったような気もします。

環境

Babel のインストール

使い方

実行

環境設定ファイルの作成

改めて実行

終わり

参考