RollupのBabel設定が通らない場合に


WebpackよりだいぶシンプルなRollupですが、公式サイトに書いてある通りに設定したはずなのにうまくいかない、という事態になっています。

公式サイトの通り…でも動かない

Rollupの結果をBabelに通すrollup-plugin-babelの公式サイトには、Babel 6での.babelrcの設定例が載っています(README)。

.babelrc
{
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ]
  ],
  "plugins": [
    "external-helpers"
  ]
}

しかしながら、この通りに書いたはずなのに、[!] (babel plugin) Error: It looks like your Babel configuration specifies a module transformer. Please disable it. See https://github.com/rollup/rollup-plugin-babel#configuring-babel for more information とエラーを食らってしまいます1

別な手法を発見…babelrc-rollup

もちろん、babel-preset-es2015-rollupを使えば動くことは動くのですが、「es2015は古いのでenvを使ってね(意訳)」みたいなメッセージが出てしまいます。

なんとかならないのかとIssueを眺めていたところ、eventualbuddha/babelrc-rollupというものを見つけました。これは自前で.babelrcを読み込んで、Rollupの動作に邪魔な変換を外す、というようなことを行っているとのことです。

rollup.config.js
import babel from 'rollup-plugin-babel';
import babelrc from 'babelrc-rollup';

export default {
  plugins: [
    babel(babelrc())
  ]
}

babelrc-rollupで生成したパラメータをrollup-plugin-babelに投入することで、適切な設定を行えるようにしています。


  1. というより、このエラーのリンクから上のREADMEにたどり着いて、そしてその通りの設定をしたにも関わらずまたエラーが出る、という無限ループに陥っていました。