LoginSignup
9

More than 5 years have passed since last update.

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

Posted at

導入

公式から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

presetsenvstageXを書くだけだった。

{
  "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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9