Zenn
💨

Babelとは

2022/05/10に公開
Node.js
Babel
環境構築
トランスパイラー
コンパイラー
tech

今回の内容

いつもLinuxの環境構築などでお世話になってるここのサイトから今日はBabelについて勉強したいと思います( ･ω･ )/

Babelってなんぞ

Babelとは
  • トランスパイラー(あるプログラミング言語で書かれたプログラムのソースコードを受け取り、別のプログラミング言語の同等のコードを生成)
  • ES2015以降のJSコードをそれよりもES5以前のものに書き換える
  • ブラウザによってES2015の構文が使えなかったりするので、書く時はES2015仕様、実行時にはES5以前のコード、という開発者得なアイテム


    某ブラウザ(Internet ○xplorer)対策で作られたんだろうか...？(°ρ°)
    と思ってしまう。笑
    ES2015でたくさん便利構文が追加されたので、その恩恵を受けながらブラウザの制限を気にせず書ける便利アイテムさん、頼もしいですね！(⑅•ᴗ•⑅)ｱﾘｶﾞﾀｲ
例)　アロー関数

ES2015

const message = "Hello World";
const alertFunction = () => {};

ES5

var message = "Hello envader";
var alertFunction = function() {};

使ってみる

ディレクトリの作成、Node.jsの初期化
mkdir sample
cd sample
npm init -y

★npmはNode.jsインストール時に一緒にインストールされます

Babelのインストール
npm install　--save-dev　babel-cli babel-preset-es2015

presetはBabelが変換処理をする際に使うプラグイン。
設定情報をもとにプラグインのリストをBabelに渡すので、設定情報を.babelrcに書く。

echo '{ "presets": ["es2015"] }' > .babelrc
コンパイルの実行
./node_modules/.bin/babel src/beforeCompile.js -o  dist/afterCompile.js

-oオプション(-out-file) = どこのファイルに出力するかを設定
distはwebpackでも出てきたなぁ(`·⊝·´)

以上、Babelの基本についてでした( ⁎ᵕᴗᵕ⁎ )❤︎

実際にターミナル操作をやってみたいな〜という方はここのサイトで実際にやってみるのがいいかと( •̀ω•́ )/
実際に仮想環境でコマンドをじゃんじゃん叩けるのでパソコンが壊れる心配がなくて良き★
コース全体はこんな感じ

Discussion