基本的に怠Diary

学習ログを残したい

Babel入門した〜その1〜

Reactやったるで〜


でもこいつどうやって動かすんだろう。


そんなときブラウザで動くサイトを見つけました。



codepen.io



わーい!





ん? Babel・・・?



ぼくこれしってる! なんか・・・JavaScriptのサーバサイドのふれーむわーくだ!

つまりよくわからん。



というわけでこいつの使い方をほどほどに理解するのがゴール



1.まず動くものを(ry

Facebookつながりだね!

とはいえ情報が足りない。React Babelでググるとなんか環境構築的なのがいくつかでてきたのでそれを参考にする。


CLIいれときゃ問題ないやろ(適当

babeljs.io

英語・・・あっあっ


英語読めなくてもなんとかなるよとは言えないので不安な人は頑張って翻訳しよう!


私は別サイト見たりした。




ぱっけーじじぇーそんをつくるよ!
こいつはnpm installするときとかに便利なやつだよ。

てかpackage.jsonの使い方は沢山書いてあるけど

こいつとは!こういうやつだ! って説明全然でてこない。。。


環境のお品書きみたいなものなのだろうか。

npm君にこういうの欲しくてこういうことはじめにやっときたいからよろしく!

みたいな感じで渡すメモという認識。

JS詳しい人に殺されそうな説明だ。


間違ってたらごめんちょ。詳しく知りたい人はこれ見たほうがいいな。

npm package.json 日本語版 取扱説明書





さて、続き。

とりあえずディレクトリ作ってそこに移動しよう!

mkdir babel-test && babel-test

package.jsonをぱぱっとつくるすごいコマンド!

npm init -y


babel-cliをインストール!
後変換するReactとECMAScript2015のプラグインインスコ

npm install --save-dev babel-cli
npm install --save-dev babel-preset-react babel-preset-es2015

--save-devはpackage.jsonになんか書き込んでくれるやつだよ!

catなりvimなりmicroなりで確認すればわかると思うけど

.
.
"devDependencies": {
    "babel-cli": "^6.18.0"
  }
.
.

みたいなのが追加されてる。



んでpackage.json

   {
  "name": "babel-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "babel src -d lib"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.18.0"
  }
}

+のとこ追加してやる。


そして

npm run build

でbuildのコマンドを実行!!!
babel src -d lib
やってく・・・れ?






> babel src -d lib

src doesn't exist




えっ


あわああわわわわなんでなんでなんで




と一日中慌ててたのは流石に面白かった。

英語読めないなら読めないって認めて1単語ずつ翻訳しろよ。



後で気が付きましたがちゃんと書いてあるんですよね。

npm君「srcがねーよ!!!!!」

いやこれ中学生でもわかる英語やろ。。。

こんなアホなとこでハマるの私だけやろなぁ。



というわけで

mkdir src 
npm run build






で?

なんかここからがbabel君のしごとらしいけど



えっと srcの下にreactのソースをJSに変換してlibにいれてくれるんやろ?モッピー知ってるよ


lib/test.js

var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

チェケ☆

npm build run

npm君「は?(笑)」ERR!


私「」


今回はすぐにわかった。てか書いてあった。


.babelrc

{
  "presets": ["es2015", "react"],
  "plugins": ["transform-react-jsx"]
}


下がReactのプラグイン使いますよってことなのは予想できる。

上って何
使う言語・・・?ES2015とReact使うよ的な





は?






presetの意味は前もって決めるとかそんな感じらしい。

やはり使う言語を前もって決めるってことなのか?




ググってもよくわからない・・・!


英語大切だなやっぱ。



とりあえずできるとこまで


再び

npm build run

src/test.js -> lib/test.js


おお 確認確認

'use strict';

var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(React.createElement(
  'h1',
  null,
  'Hello, world!'
), document.getElementById('root'));





お、おう。