質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

1244閲覧

Webpack で依存モジュールにも babel-loader を通す場合の指定方法

lazex

総合スコア604

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2019/06/13 14:57

webpack を使って babel-loader で ES5 に変換するとき、 loader のオプションはどう指定するのが良いのでしょうか?

例を探すと、 exclude に /node_modules/ を指定している例をよく見ますが、これでは依存モジュールは babel-loader を通さないことになるので ES5 に変換されません
npm でモジュール公開時に ES5 に変換済みのモジュールもありますが、私が使おうとしてるものでは ES5 に変換されてないものも多いです

exclude を /node_modules/(?!(YOUR_MODULE)/).*/ のようにして ES5 になっていないモジュールのみ除外して(変換対象に含めて)ビルドするという方法も見かけましたが、全モジュールをチェックするのは無理があるように思います
自分が使うために yarn add したモジュールはひとつでも、そのモジュールがたくさんのモジュールをインポートしています
自分がインストールしたモジュール名のみを exclude に含めないように設定しても、そのモジュールの依存モジュールのどれかが ES5 になっていないと、 ES2015+ のコードがビルド結果に含まれてしまいます

実際には自分が 10 近くのモジュールを入れて、 node_modules 以下には数百のモジュールがインストールされているので、手作業で確認して exclude に入れるかの判断は無理があるように思います

いっそのこと exclude は何も指定せず全体を babel-loader に通せば良い気もするのですが、それではとても遅いという情報もあり、どうするか悩んでます
ビルダーによってはモジュールも含めてバンドル後に一括で babel 通すものもありますし、全部変換するのがベストなのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問