Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
133
Help us understand the problem. What is going on with this article?
@kamijin_fanta

babel6での変更点 Gulp・Webpackの設定

More than 5 years have passed since last update.

主な変更点

babel6になりパッケージの分離が行われました。

Setting up Babel 6

  • ES6,React変換等が別パッケージに移動されました。
    • Plugin・Presetsとして提供
  • "babel"パッケージは何も仕事をしなくなりました

各プリセット

パッケージ名 ドキュメント
babel-preset-es2015 ES2015 preset
babel-preset-stage-0 Stage 0 preset
babel-preset-stage-1 Stage 1 preset
babel-preset-stage-2 Stage 2 preset
babel-preset-stage-3 Stage 3 preset
babel-preset-react React preset

使用の際は、自分でインストールする必要があります。

preset-es2015を使用したい
$ npm install babel-preset-es2015

CUIのインストール

# npm install --global babel-cli

.babelrc

変換を行う際のバージョン指定をこちらで行うのが便利です。package.jsonと同じ場所に設置してください。

$ npm install babel-preset-es2015
.babelrc
{
    "presets": ["es2015"]
}

Require Hook

使用するとES6などのファイルをrequire出来るようになるものです。

以前のコード
require("babel/register");  // Bad Code!!
バージョン指定有り
require("babel-core/register")({
    "presets": ["es2015"]
});
.babelrcのバージョン指定を使用する例
require("babel-core/register");

Polyfill

以前のコード
require("babel/polyfill");  // Bad Code!!
babel6以降でのコード
require("babel-polyfill");

使用する際には、パッケージのインストールが必要です。

インストール
$ npm install --save-dev babel-polyfill

Webpack

babel-loaderを使用する際の設定です。babel-loaderは6.0.0以降にアップデートしてください。

以前の設定
loaders: [
    {
        test: /\.(js)$/,
        exclude: /node_modules/,
        loader: 'babel?optional[]=runtime&stage=0'  // BAD SETTING!!
    }
]
バージョン指定を行う例
loaders: [
    {
        test: /\.(js)$/,
        exclude: /node_modules/,
        loader: 'babel?presets[]=es2015'

    }
]
.babelrcのバージョン指定を使用する例
loaders: [
    {
        test: /\.(js)$/,
        exclude: /node_modules/,
        loader: 'babel'
    }
]

Gulp

gulp-babelを6.0.0以降にアップデートしてないと、"presetsって何!?"って怒られます。

バージョン指定を行う例
.pipe(babel({
    presets: ['es2015']
}))
.babelrcのバージョン指定を使用する例
.pipe(babel())

CommonJS

export default したモジュールを require で呼び出す際の方法が変更されました。

lib.js
export default "str";
befor.js
var str = require("./lib.js").default;  // defaultの指定が必要になった

BabelのIssueにも上がっていますが、プラグイン自分で作れば?って感じです https://github.com/babel/babel/issues/2212

@59naga さんから頂いたコメントのプラグインを使用するとなんとかなるみたいです babel6にmodule.exportsを追加するだけのプラグインを作った

暫くの間動かないコード掲載していて申し訳ないです…

133
Help us understand the problem. What is going on with this article?
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
sakura_internet
さくらレンタルサーバ、さくらのVPS、 さくらのクラウド、さくらの専用サーバなどのインターネットサービス・ITプラットフォームを提供しています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
133
Help us understand the problem. What is going on with this article?