初心者がBabelでハマったこと

#目次

1. 環境
2. Windowsではじめたら「.babelrc」ファイルが作れない
3. Babeったら「Error: Plugin/Preset files are not allowed to export objects, only functions」
4. 困った時のヒント

環境

ハマった時の環境です

package.json

  "devDependencies": {
    "@babel/core": "^7.1.2",
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^10.0.0",
    "browserify": "^16.2.3"
  }

Windowsではじめたら「.babelrc」ファイルが作れない

Windowsでは新規ファイル作成から「.babelrc」ファイルを作ろうとすると「ファイル名を入力してください」というエラーになります。

以下の方法で「.」から始まるファイルが作れます
###コマンドを利用する

echo { "presets": ["@babel/preset-env"] } > .babelrc

###エディタを利用する（サクラエディタなど）
ファイルを保存するときにファイル名「.babelrc」で保存するだけです。

Babeったら「Error: Plugin/Preset files are not allowed to export objects, only functions」

エラーが発生している状態の設定ファイル

.babelrc

{ "presets": ["es2015"] }

Babeってみる

node_modules\.bin\browserify -t babelify test.js --outfile test_out.js

エラーになりました。
Error: Plugin/Preset files are not allowed to export objects, only functions.

調べてみるとパッケージが足らないようなので、インストールします。

npm i @babel/preset-env

設定を書き換えます。

.babelrc

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

再度Babeってみる

node_modules\.bin\browserify -t babelify test.js --outfile test_out.js

成功！
ちなみに「.babelrc」ファイルがなくても、コマンドにPresetsを指定することでBabeることができます。

node_modules\.bin\browserify -t [ babelify --presets [ @babel/preset-env] ] test.js --outfile test_out.js

困った時のヒント

node_modules\babelify配下に「README.md」というファイルがあって
ファイルの中に使い方がきちんと書いてあります。
ネットで検索しても見つからないよ～というときは初心にかえって、マニュアルやReadMeを参考にするのも大切ですね。

README.md（一部抜粋）

$ browserify -t [ babelify --presets [ @babel/preset-env @babel/preset-react ] ]