es2015のコードがブラウザで動くようにいろいろしてみた

ブラウザ用にes6コード書くなら、どうやるのがいいんだろうか
— ゆず@HR7 (@yuzu_441) December 11, 2015

普段Node.jsのコードとかしか書いてないから
es2015のコードをブラウザでどう動かすのわからなくていろいろ調べたのと
Babelが6になってよくわかってなかったこと調べたメモ

Babel6

Babelが6になってパッケージが小分けされたみたい
es2015のコードを変換しようと思ったらbabel-preset-es2015ってのが必要みたい

今回直接関係ないけどreact使おうと思ったらbabel-preset-reactが必要

今まではひとまとめになってたけど、これからは必要なものだけインストールしようってことっぽい

さて本題のes2015のコードをブラウザで動くように変換する

実行確認にはすごい適当なコード使ってます

// js/Test.js
export default class Test {
  constructor() {}
  show() {
    console.log('ゆいかおり 3rdアルバム : Bright Canary 2015年11月4日発売');
  }
}

// js/app.js
import Test from "./Test"
const t = new Test();
t.show();

コンパイルした結果をブラウザで実行し
consoleに「ゆいかおり 3rdアルバム : Bright Canary 2015年11月4日発売」が表示されてたら成功

必要なもの *1

npm i -D browserify babelify babel-preset-es2015

変換

./node_modules/browserify/bin/cmd.js js/app.js -t [ babelify --presets [ es2015 ] ] --outfile dist/app.js

.babelrcに設定書くと

./node_modules/browserify/bin/cmd.js js/app.js -t babelify --outfile dist/app.js

で変換できた

※※※ 追記（2015/12/16） ※※※
.babelrcの設定書き忘れてた

// .babelrc
{
  "presets": ["es2015"]
}

こんな感じのjson形式の設定です

babelify使っただけで特に何かしなくてもes2015のコードをブラウザで動くように変換できました
あとはこれをnpm-scriptsで実行するなり、gulpで実行すれば楽に変換できるようになる

ここで「What’s your preferred JavaScript module loading tool?」という所を見た感じ
個人的にはbrowserifyでいいのではと思ってるけど
Webpackが流行ってるっぽいのでWebpackで作って上げるほうがいいのだろうか・・・

最近jQueryのコードいじってて、これを今後メンテするのやだなーとか考えてるんですが
世のエンジニアさんたちはどうやって会社で

「es2015使いましょう」とか

「jQueryやめてreact使いましょう」みたいな提案してるんでしょうか

角の立たない提案の仕方が知りたい・・・w

*1:「i」は「install」, 「-D」は「--save-dev」の短縮