babelがnode_modulesを通してくれないときの対応

始めに

よくIE対応で一部のモジュールだけbabelを通すということをやると思います。

例えばSwiperのモジュールでbabelを通すとかです。
https://qiita.com/mah_lab/items/5bcd0edc0a68f882a2a7

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules\/(?!(dom7|swiper)\/).*/,
        loader: 'babel-loader'
      }
    ]
  }
};

この書き方はおそらくbabel6系までは動くのだと思いますが、babel7に上げたらなぜかnode_modulesにあるパッケージにbabelが通らなくなりました。色々調べて解決できたので、記事にしました。

babel7系でnode_modulesにbabelを通す方法

結論から言うと、僕の場合はbabelの設定ファイルを.babelrcからbabel.config.jsに変えたら動くようになりました。
どうやらbabel7系からデフォルトでnode_modulesは除外するようになったようで、webpack側で設定してもbabelの方で除外されてしまったようです。ちゃんとかくならbabelrcRootsというオプションに追加する必要がありますが、その設定は.babelrcでは書けないようで、babel.config.js側だとできるようです。
なので明示的に書くならbabel.config.jsにした後に、babelrcRootsを指定すると良さそうですが、僕の場合は別に書かなくてもnode_modulesのコードをトランスパイルしてくれました（もちろんwebpack側でexcludeしていたらやりませんが）。

終わりに

今までbabel7にしても普通に動いていたのでこの仕様には全く気づきませんでした。しかも厄介なことにいくら調べてもなかなか情報がでてこないのでかなり苦労しました。
もし他にも同じ問題を抱えている人がいましたら参考してもらえると幸いです。