Webpackでnpmリポジトリを参照する際に、Babelの有無を自動設定したい

Question

前提・実現したいこと

Webpack+npm+Babelでビルドするシステムを構築する際に、一般に/node_modules/以下はBabelの対象から外します。

ただ、npmに上がっているものでも最近はES6としても使えるものが増えてきたので、package.jsonからmoduleで読み取るものはES6としてBabelに通す、mainにあるものはES5としてBabelに回さない、ということをしたいのですが、そのような設定は可能でしょうか。

試したこと

個別に指定すれば、node_modules以下の一部をBabelに通すことはできています。今回の質問は、あくまで自動で設定を切り替えられるかです。

なお、Babelの設定は.babelrcでなくてwebpack.config.jsなどでJavaScriptを動かす形でも問題ありません。

補足情報（FW/ツールのバージョンなど）

• Babel 6.26.0
• Webpack 3.12.0

（これより新しいバージョンならできる、という情報も歓迎します）

Answer 1

ただ、npmに上がっているものでも最近はES6としても使えるものが増えてきたので、package.jsonからmoduleで読み取るものはES6としてBabelに通す、mainにあるものはES5としてBabelに回さない、ということをしたいのですが、そのような設定は可能でしょうか。

ユースケースが思いつきませんでした。

一般に/node_modules/以下はBabelの対象から外します。

自分もそう思います。
node_modules 以下を Babel に通す前提は変えられないのでしょうか。
node_modules 以下のパッケージを ES5 へトランスパイルされた物を使いたという認識でよいのであれば webpack.config の resolve.mainFields フィールドを ['browser', 'main', 'module'] にはされましたか。

使いたい npm パッケージの package.json に main フィールド がない、または自前の .babelrc でトランスパイルしたいなどの意図でしたらこの回答は的はずれなので無視してください。

https://webpack.js.org/configuration/resolve/#resolve-mainfields

Comments

[maisumakun]

Tree Shakingなどを行いたい関係上、「ES6モジュールがあればそちらを優先してimportしたい」という状況です。