LoginSignup
2

More than 5 years have passed since last update.

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

Posted at

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

ES6記法で書く

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

rename

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

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

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

エラー

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

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

修正前

babelrc

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

修正後 :sparkles:

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

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
2