ゆずめも

私による私のためのメモ的なブログです。主に勉強した事について書いてます。

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

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

目次

  • Babel6
  • es2015 in Browser
    • browserify(babelify)

Babel6

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

babeljs.io

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

babeljs.io

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

es2015 in Browser

さて本題の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日発売」が表示されてたら成功

browserify (babelify)

必要なもの *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使っただけ

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

ponyfoo.com

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

最後に

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

「es2015使いましょう」とか

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

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

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