LoginSignup
5
1

More than 5 years have passed since last update.

babel7でのstage-xの定義を知る

Last updated at Posted at 2018-09-24

stage-0系のpresetであるbabel-preset-stage-0をBabel6からBabel7に上げようとして次のエラーに遭遇した。
Removing Babel's Stage Presets

As of v7.0.0-beta.55, we've removed Babel's Stage presets.
Please consider reading our blog post on this decision at
https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets
for more details. TL;DR is that it's more beneficial in the
  long run to explicitly add which proposals to use.

For a more automatic migration, we have updated babel-upgrade,
https://github.com/babel/babel-upgrade to do this for you with
"npx babel-upgrade".

ざっくりというとコミュニティとか団体とか時代の変化とかでstage-0とかstage-1とかどの機能の範囲まで指しているかわからないよね、だからちゃんと機能別にプラグインで入れてねってことらしい。
以下、stage別にどのプラグインが対応しているかの対応表

{
  "plugins": [
    // Stage 0
    "@babel/plugin-proposal-function-bind",

    // Stage 1
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-logical-assignment-operators",
    ["@babel/plugin-proposal-optional-chaining", { "loose": false }],
    ["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }],
    ["@babel/plugin-proposal-nullish-coalescing-operator", { "loose": false }],
    "@babel/plugin-proposal-do-expressions",

    // Stage 2
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",

    // Stage 3
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    ["@babel/plugin-proposal-class-properties", { "loose": false }],
    "@babel/plugin-proposal-json-strings"
  ]
}

ちなみに以下Babel6→Babel7にあげたときの対応表
各種presetとpluginsがbabel本体のリポジトリに取り込まれている

・"babel-core": "^6.26.0" → "@babel/core": "^7.1.0"
・"babel-loader": "^7.1.2" → "babel-loader": "^8.0.2"
・"babel-plugin-transform-decorators-legacy": "^1.3.4" → "@babel/plugin-proposal-decorators": "^7.1.0",
・"babel-plugin-transform-react-jsx": "^6.24.1" → "@babel/plugin-transform-react-jsx": "^7.0.0"
・"babel-polyfill": "^6.26.0" → "@babel/polyfill": "^7.0.0",
・"babel-preset-env": "^1.6.1" → "@babel/preset-env": "^7.1.0"
・"babel-preset-react": "^6.24.1" → "@babel/preset-react": "^7.0.0"
・"babel-preset-stage-0": "^6.24.1" → 消去

babel関連パッケージをbabel7にあげてくれるツール使うと楽にアップグレードできる
babel-upgrade

5
1
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
5
1