babel v7でbabel-stage-presetが廃止になったから移行した話

導入

公式からbabel-stage-presetを廃止するというアナウンスがあった。

記事の内容を要約すると、

• 今までのstage0等プリセットは上手く動作していた(むしろしすぎていた？)
• stageXはあくまで**proposal**であり、まだ正式なJSの仕様ではない(そりゃそう)
• proposalな機能は、開発者がそれぞれの機能を理解した上で導入すべき(導入されない可能性もあるわけで)

みたいなことが書かれています。

Migration

記事には、babel-upgradeを走らせるだけだよ〜と書いてあります(試してません)。

今回は手動でマイグレーションします。

package.json

babel v6

babel-preset-stageXをインストールするだけだった。

  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
  }

babel v7

使いたい機能のプラグインをbabelライブラリから個別にインストールする必要がある。

  "devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0", 
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "babel-loader": "8.0.2",
  }

.babelrc

babel v6

presetsやenvにstageXを書くだけだった。

{
  "presets": [
    ["env", { "modules": false }],
    "stage-0"
  ],
  "env": {
    "test": {
      "presets": [
        ["env", { "targets": { "node": "current" }}],
        "stage-0"
      ]
    }
  }
}

babel v7

• プリセットは@babel/preset-envを使う
• pluginsに、使いたいproposalのプラグインを記述する

{
  "presets": [
    ["@babel/preset-env", { "modules": false }]
  ],
  "env": {
    "test": {
      "presets": [
        ["@babel/preset-env", { "targets": { "node": "current" }}]
      ]
    }
  },
  "plugins": [
    ["@babel/plugin-proposal-object-rest-spread", { "proposal": "minimal" }],
    ["@babel/plugin-proposal-class-properties", { "proposal": "minimal" }]
  ]
}

雑感

• アプリで使用しているproposalが明確になるので、個人的にはありかなーと思っている。
• npx babel-upgrade試してないけれど、手動マイグレーションは面倒かも。
• 便利だからといって無闇矢鱈にstageXの機能使うのはやめよう(戒め)

参考

https://github.com/babel/babel/issues/6808
https://babeljs.io/docs/en/babel-preset-env
https://babeljs.io/docs/en/next/babel-preset-stage-0