手軽にes6を試す環境も作っておきたいと思った
はじめに
es6を試す環境もほしい。(今回はes2015とか細かい事は気にしない) とりあえず以下の様なことができてほしい
- es6で作成したコード片のtranspileの結果を手軽に確認できる
- es6で作成したコード片の実行が手軽にできる
ブラウザから試せるrepl
以下のようなブラウザから試せるreplもある
まぁ、今回は手元の環境で試せるようにしたい
手元の環境でes6を試す
es6で作成したコード片のtranspileの結果を手軽に確認できる
とりあえずes6のコードを書いてそれをcommonjsに変換する事ができるようにする。
色々細かく分かれているので以下を参考にしてほしいものを見繕うと良い。
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の設定を書く。