ES6のgulpfile.babel.jsがrollupのpresetとconflictしたときの対処法

3221 ワード
rollup.js JavaScript es6 gulp JavaScript テキストリンク

ES6でgulpfileを書くことにしました。

ES6記法で書く

・参考
webpack + babel-loaderでES6デビューしつつ、gulpもES6で書く - Qiita

rename

gulpfile.jsをgulp.babel.jsにrename。

モジュール読み込みをES6記法で修正

requireではなくimportで書いてみた。

エラー

import gulp from 'gulp';
^^^^^^
SyntaxError: Unexpected token import

しかしimport記法が認識されませんでした。

修正前

babelrc

{
  "presets": [ "es2015-rollup" ]
}

修正後

babelrc

{
  "presets": [ "es2015" ]
}

.babelrcのpresetをes2015に修正します。

gulp.babel.js

gulp.babel.js
{
  entry: './hoge.js',
  plugins: [
    babel({
      babelrc: false, //追加
      presets: ["es2015-rollup"], //追加
      runtimeHelpers: true 
    })
  ]
};

babelrcのpresetではなく、ここで指定したpresetを読むように定義します。

・参考
ES6 gulpfile.babel.js preset conflict with rollup · Issue #35 · rollup/rollup-plugin-babel