まっさらなMacにBabelをインストール

環境

MacBook Pro ( macOS Mojave 10.14.5 -> Catalina 10.15.3 )

前提

以下はインストール済みの前提です。逆に、以下以外はインストールしてない。

Homebrew (インストール方法)

やってく

必要なもの

nodebrew
node.js & npm (セット)

node.js & npmをインストール

nodebrewをインストール

brew install nodebrew

MacにNode.jsをインストール - Qiita

こんなエラーが出た場合

Error: /usr/local/Cellar is not writable. You should change the
ownership and permissions of /usr/local/Cellar back to your
user account:
  sudo chown -R $(whoami) /usr/local/Cellar
Error: Cannot write to /usr/local/Cellar

brewをアップデートしましょう。僕の場合、しばらくmacOSをアップデートしてなかったので、ここでOSアップデート -> Command Line Toolsのインストール（ターミナルでxcode-select --installでOK） -> brewのアップデートが必要でした。

node.jsをインストール

先にインストールディレクトリ/.nodebrew/src (ディレクトリ )を作っておく必要がある

mkdir -p .nodebrew/src

安定版をインストール

nodebrew install-binary stable

パスを通す

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

ここに書いてある通りでOK。
MacにNode.jsをインストール - Qiita

これでnpmも一緒に入ってます。

参考
Node.js / npm をインストール (Mac環境) - Qiita
MacにNode.jsをインストール - Qiita
Node.jsのインストールに失敗する時の解決策（No such file or directory） - Qiita
Rails cが実行不可能、Permission denied @ rb_sysopen – /Users/…の対応策 – 私たちの未来への案内図

babelをインストール

の前に、作っておくべきファイルが３つ。

package.json
babel.config.json
.babelrc

package.json

npmでインストールしたパッケージ一覧が入るファイルです。内容はnpm install ~~するたびに自動で入っていきます。

{
    "devDependencies": {
    }
}

babel.config.json

babel.config.jsonは、環境ファイル（例えばクラスやアロー関数などの変換はプラグインを利用する必要があるので、その指定など。あと対応ブラウザとか。）を指定します。babelの実行時に毎回参照するイメージです。

{
    "presets": [
        [
            "@babel/env",
            {
                "targets": {
                    "edge": "17",
                    "firefox": "60",
                    "chrome": "67",
                    "safari": "11.1"
                },
                "useBuiltIns": "usage"
            }
        ]
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-transform-arrow-functions"
    ]
}

.bablelc

.bablelcは、よくわかんないけどなんかつくっとかないと動かない。2019/2/1現在の公式ドキュメントによればこれだけでOK。

{
    "presets": ["@babel/preset-env"]
}

インストール

いまつくった３つをインストールディレクトリにおいたら、以下のコマンドでインストール。

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-arrow-functions

@babel/core : コア。これだけだと使えない。
@babel/cli: コマンドラインインターフェイス。
@babel/preset-env: 基本の環境プリセット
@babel/plugin-proposal-class-properties: クラス構文の変換に必要。
@babel/plugin-transform-arrow-functions: アロー関数の変換に必要。

参考
Babel · The compiler for next generation JavaScript
今更のバベる。 Babel 7を試してみたメモ - かもメモ

できた

ということで、次はWebpackをいれる。