WebPackNot、資産パイプラインとWebpacker宝石の代替案

Webpackerと資産パイプラインが好きでない理由
正直なところ、私は古い2コアコンピュータ(はい、私は古い)を所有しなければならないし、WebPackerを使用して悪夢です、それは遅いです、私はJavaScriptがコンパイルされているのを見るためにそんなに長い間待つ必要があります、これは私が明らかにWebPacker GEMを使用して好きではない唯一の理由ではないが、Banilla Webpackを使用することはWebPackerを使用するよりもはるかに優れています.あなたはどのように火の粉が8時15分から3 sの下にWebPackerからVanilla Webpackに切り替えることによってビルド時間を落としたかを見ることができます、彼らはそれについての良い記事を書いた:https://firehydrant.io/blog/rails-without-webpacker
資産パイプラインは、私が人々の日常業務に直面している別の問題であり、もしあなたのコンパイルが何らかの理由で生産に失敗するならば、あなたはGithubレポで問題を解決しなければならなくて、いつまでも待つ必要があります.うまくいけば、貢献者からの誰かが返信するか、より詳細についてあなたに尋ねます、しかし、出荷製品が速くされなければならない世界で、あなたはあなたの問題を解決するために他の誰かの最も大きいのを待つ余裕がありません.
それで、あなたが私に尋ねるならば..なぜ私はこの宝石を作成?2つの理由から答えます.
1 -私はコントロール(Webpackerの宝石は遅く、複雑な私にとっては、資産パイプラインが奇妙に振舞ういくつかの回)と両方を使用して確率X 2の問題を1つまたは別のです.
2 -私はシンプルさが大好き、私は人々がそれがなければならないより複雑な宝石を作成する参照してください、私は私に興味を持っていない、私は単純なものを愛して、はい、それは単純な愚かな:)
私が基本的に欲しかったのは、私のすべての資産ファイルを1つの場所に置いておくことです、そして、私が私がカスタム構成を持っている必要があるならば、それは構成ファイルで正しくなければなりません.設定.あなたが必要とするすべてを構成することができるJSは、まだWebpackを理解するのに苦労する人々のために、私はウェブパックについてbeginners bookを書きました、そこで、私はウェブパックと設定ファイルを効果的に使うためにすべての基本を詳述しました.

どのようにWebPackRuleネイティブ宝石作品?
WebPackNative宝石は魔法ではありません!それはちょうどあなたのアプリ/フォルダの下にWebPackRenネイティブと呼ばれる使用可能な資産フォルダーをコピーし、このフォルダにはWebPackがあります.設定.JSファイルとパッケージ.すべてのモジュール依存がリストされているJSONファイル(一度インストールされたパッケージがインストールされ、パッケージロックと同様にフォルダが追加されます).「src」フォルダの下には、古典的なJavaScriptやスタイルシートやイメージフォルダがあります.
それだけですか.いいえ、以前の追加の構造は、主要な重要なものが必要ですが、そこにちょうどあなたのフロントエンドのコードを書くだけでなく、余分な構成を書く必要がある場合は、何も複雑な、単純な基本的なWebPackフォルダーです.
残っているのはJavaScriptとスタイルシートのタグを出力するためのいくつかのヘルパーです.これらはGemによってビュー/レイアウト/アプリケーションに追加されます.HTML .erbは以下の通り.

<%= webpack_stylesheet_url 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

<%= webpack_javascript_url 'application', 'data-turbolinks-track': 'reload' %>

画像については、WebPackRangeネイティブ/src/imagesの下に画像を置き、次のようにしてビューで使用します.

<%= webpack_image_url('image.jpg') %>

だから基本的に、WebPackRankネイティブの宝石は、あなたの財産を置く簡単な基本的な構造を作成することです、それはいくつかのヘルパーを出力する必要なHTMLタグを出力すると、それは簡単です!

出力ファイル
あなたの開発の間(同様に生産)、あなたのすべての資産はあなたのアプリpublic/webpack_nativeフォルダーに行きます、そして、構成がデフォルトで「開発」モードに設定されるので、あなたがコード化されます、あなたが生産用法のためにそれを圧縮したいならば、ちょうど実行してください:

rails g webpack_native:prod

これは単に次のように実行するメソッドです.

cd app/webpack_native
npm run build --mode=production

あなたが好きなものを使用して、最後にそれだけでバニラのwebpack、最初の方法は、いくつかの入力を保存するヘルパージェネレータです.
WebPackRuleのネイティブ宝石の使用方法はここにあります.
指示に従ってください、それを使用して、違いを参照してください、私にあなたが好きかどうかについてのように知らせてください.
最後に、それはすべてのコミュニティに戻って、私たちはすべて私たちは自分のために動作を共有すると信じて、コミュニティに戻って、WebPackNativeは、我々は我々の開発をスピードアップするために構築された新しいツールですが、我々はそれについて興奮しているので、これは彼らが同様に恩恵を受けることができるものだと思う友人と共有します.