Help us understand the problem. What is going on with this article?

とりあえず webpack 4 で Babel 6 か 7 を導入する

More than 1 year has passed since last update.

※ 2018/03/06 現在、正式版の最新が 6 で、ベータ版の最新が 7 です。

1. そもそも Babel とは何か

今のブラウザがサポートしていない最新の js のコードをサポートしている js のコードに変換するツール
→コードを便利に書ける
→嬉しい

2. 準備

参考「とりあえず webpack を使ってみる - Qiita

webpack は 4 の方が設定が簡単なので 4 で行きます。

package.json
...
  "scripts": {
    "dev": "webpack --mode development --module-bind 'js=babel-loader'",
    "build": "webpack --mode production --module-bind 'js=babel-loader'"
  },
...

3. インストール

3.1. Babel 6

ターミナル
npm install --save-dev babel-core babel-preset-env babel-loader

以下はどちらか 1 つ。

.babelrc
{
  "presets": ["env"]
}
package.json
...
  "babel": {
    "presets": ["env"]
  },
...

3.2. Babel 7

ターミナル
npm install --save-dev @babel/core @babel/preset-env babel-loader@8.0.0-beta.0

@babel/loader ではなく babel-loader@8.0.0-beta.0

以下はどちらか 1 つ。

.babelrc
{
  "presets": ["@babel/preset-env"]
}
package.json
...
  "babel": {
    "presets": ["@babel/preset-env"]
  },
...

参考「GitHub - babel/babel-loader at v8.0.0-beta.2

4. その他

4.1. Babel 関係のパッケージについて

  • babel-cli, babel-core
    • コマンドラインから使うか API を使うかでどちらか 1 つを選択
    • 今回は webpack で babel-loader から API を利用するので後者
    • 今回は関係ないけど、Babel 7 では @babel/cli を使うときに @babel/core も必要
  • babel-preset-env
    • babel-preset-es2015, babel-preset-es2016, babel-preset-es2017 が含まれる
    • 設定が色々便利
  • babel-polyfill, babel-plugin-transform-runtime
    • ポリフィル。本記事では説明を書かないけど、たぶん必要
    • どちらを使うか迷うぐらいなら後者の方が良いと思う
    • (babel-preset-env 2.0 でポリフィルできるようになるらしい)
  • その他
    • 他にも preset や便利なパッケージが沢山ある (babel-preset-react など)
    • ドキュメント参照→「4.3. ドキュメント

参考「Babel 7 リリースプレビュー - Qiita
参考「babel-polyfillとbabel-runtimeの使い分けに迷ったので調べた - Qiita
参考「babel-preset-env 2.0のuseBuiltInsを使ってpolyfillする - Qiita

4.2. babel-loader のバージョンについて

まぎらわしいですが、以下のような対応になっています。

  • babel 6 | babel-loader 7
  • babel 7 | babel-loader 8

4.3. ドキュメント

kerupani129
趣味でのんびりやってます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした