はじめに

es6を試す環境もほしい。(今回はes2015とか細かい事は気にしない) とりあえず以下の様なことができてほしい

es6で作成したコード片のtranspileの結果を手軽に確認できる
es6で作成したコード片の実行が手軽にできる

ブラウザから試せるrepl

以下のようなブラウザから試せるreplもある

まぁ、今回は手元の環境で試せるようにしたい

手元の環境でes6を試す

es6で作成したコード片のtranspileの結果を手軽に確認できる

とりあえずes6のコードを書いてそれをcommonjsに変換する事ができるようにする。

色々細かく分かれているので以下を参考にしてほしいものを見繕うと良い。

https://babeljs.io/docs/plugins/#presets

setup

npm install babel-cli babel-plugin-transform-es2015-modules-commonjs babel-polyfill babel-preset-es2015 babel-preset-stage-2
cat <<-EOS > .babelrc
{
  "presets": [
    "es2015",
    "stage-2"
  ],
  "plugins": [
    "transform-es2015-modules-commonjs"
  ]
}
EOS

以下の様にしてtranspileできる。

node_modules/.bin/babel hello.es6 > hello.js

hello.es6

class Hello {
  constructor(name){
    this.name = name;
  }
  say(){
    return `${this.name} hello`;
  }
}

console.log(new Hello("foo").say())

以下のようなjsが出力される

"use strict";

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Hello = (function () {
  function Hello(name) {
    _classCallCheck(this, Hello);

    this.name = name;
  }

  _createClass(Hello, [{
    key: "say",
    value: function say() {
      return this.name + " hello";
    }
  }]);

  return Hello;
})();

console.log(new Hello("foo").say());

es6で作成したコード片の実行が手軽にできる

babel-node を利用して直接実行できる。ただしproduction readyではない。

./node_modules/.bin/babel-node hello.es6
foo hello

emacsから使えるようにしたい

emacsから手軽に確認できるようにしたい。その辺りの設定をしてみる。

以下に依存している

quickrun
javascript-mode(js-mode)

; M-x list-packagesで quickrun install済みの事前提
; es6-modeというmodeを雑につくる

(define-derived-mode es6-mode
  javascript-mode "es6"
  "Major mode for javascript(es6).
\\{es6-mode-map}"
  (setq case-fold-search nil))

(add-to-list 'auto-mode-alist '("\\.es6$" . es6-mode))
(add-to-list 'quickrun-file-alist '("\\.es6" . "javascript/es6"))
(add-to-list 'quickrun/language-alist
             '("javascript/es6"
               (:command . "babel-node")
               (:compile-only . "babel %s")
               (:description . "Run es6 file")))

;; check
;; (quickrun/decide-file-type "hello.es6")
;; (quickrun/command-key "hello.es6")

M-x quickrunでbabel-nodeが実行される(実行結果確認)
M-x quickrun-compile-onlyでbabelが実行される(transpileの結果確認)

それぞれ好きなkey-bindingを設定しておいてある

appendix

quickrunの :command 部分などはcallableな値を設定する事も可能。実行時に呼んでくれる。個人的には以下の様に設定している。 babelなどをglobalにinstallしたくないという気分だったので。

; pickup-fileは個人的に定義した関数
(:command . (lambda () (pickup-file "node_modules/.bin/babel-node")))

todo: eslint

eslintの設定も必要。たぶんflymakeかflycheckの設定を書く。

podhmo's diary

手軽にes6を試す環境も作っておきたいと思った