めも

2年生

Babelのインストールから実行まで

今までBabelのことスルーしていたのですが、少し勉強したのでメモです。

Babelと向き合うきっかけ
import Nightmare from 'nightmare';
const nightmare = Nightmare({ show: true });

nightmare
  .goto('https://duckduckgo.com')
  .type('#search_form_input_homepage', 'github nightmare')
  .click('#search_button_homepage')
  .wait('#r1-0 a.result__a')
  .evaluate(() => document.querySelector('#r1-0 a.result__a').href)
  .end()
  .then(console.log)
  .catch((error) => {
    console.error('Search failed:', error);
  });

面白そうなNode.jsのライブラリがあったので試してみたら1行目でエラーになった。

"SyntaxError: Unexpected token import"

公式のサンプルコードそのままなのに。。と思ったらimportをNode.jsで実行する際はES5の構文に変換してあげるといいみたい。
importじゃなくてrequireを使えばいいだけなのだけど、せっかくなのでBabelを使ってみる。
BabelはES6で書かれたコードをES5に変換してくれるトランスパイラ。
使いどころとしては、ES6に対応していないブラウザではES6でコード書いても正常に動かないので、ES5に変換する必要がある。(各ブラウザの対応状況ECMAScript 6 compatibility table)

Babelをインストールしてみる

下記コマンドでインストールする。
yarnはnpmと比べてダウンロードがかなり早いので気に入りました。

yarn add --dev babel-cli babel-preset-env

babelじゃなくてbabel-cliなんだなあ
このままBabelのコマンドを実行しても、何も変換されていないファイルが出力されてしまうのでもうひと手間加える。
Babelの設定ファイル(.babelrs)もしくはpackage.jsonにBabelの設定を記述。
presetsに使用するBabelプラグインを設定する。先にインストールしたbabel-preset-envがそれ。
これで実行環境にあわせて必要なBabelプラグインを選択してくれるらしい。Babelプラグイン・・

//package.jsonに書くならこんなかんじ
  "babel": {
    "presets": [
      "env"
    ]
  }
実行してみる
babel index.js --out-file compiled.js

変換対象のファイルと出力先ファイル名を指定する。
出力されたファイルを確認

'use strict';

var _nightmare = require('nightmare');

var _nightmare2 = _interopRequireDefault(_nightmare);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var nightmare = (0, _nightmare2.default)({ show: true });

nightmare.goto('https://duckduckgo.com').type('#search_form_input_homepage', 'github nightmare').click('#search_button_homepage').wait('#r1-0 a.result__a').evaluate(function () {
  return document.querySelector('#r1-0 a.result__a').href;
}).end().then(console.log).catch(function (error) {
  console.error('Search failed:', error);
});

importがrequireに、constがvarに変換されてる!謎のコードも増えている。。
webpackとかbrowserifyと組み合わせて使うともっといいみたいだけどそれはまたこんど!

メモのメモ
import、exportといったモジュール機構はv8.5.0以降のNode.jsにすでに組み込まれていてBabelを使用しなくても利用可能。
ただ何もしなくても使えるわけじゃなくて少々手を加える必要がある。
参考URL
https://qiita.com/Kaoru_Yamamoto/items/bcca9b63220e23b69399