問題タブ [grunt-contrib-requirejs]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
requirejs - r.js で最適化されていないファイルを使用する
次のオプティマイザ設定を使用してデュランダル ビルドを最適化しています。
私の問題は、最適化から除外し、最適化されていないバージョンとして使用したい に があることですconfig.js
。requireConfig.paths
その理由は、最適化されたファイルを掘り下げることなく、ビルドの構成ファイルを変更できるようにしたいからです。
exclude
とを試しempty:
ましたが、最適化された js ファイルから構成を除外するだけです。「リモート」ファイルとして含めるにはどうすればよいですか?
config.js:
javascript - Durandal ビルドでファイルを最適化から除外する
私は Grunt を使用してDurandal スターター キットのプロパッケージをビルドしています。
1 つの小さな詳細を除いて、すべて正常に動作します。1 つのファイル (以下) をオプティマイザーから除外app-config
し、ビルドが完了したときに縮小されていないファイルとして保持したいと考えています。
他の SO スレッドの提案に基づいて、現在、を使用して除外していempty:
ます。これにより、期待どおりに最適化されたファイルから削除されます。ただし、ビルドされたプロジェクトを開くと、コンソールにエラーが表示されます。
Uncaught Error: main missing app-config
問題はアーモンド?を使用して完全なrequirejsに切り替えてみましたが、include: ['path/to/require']
成功しませんでした。
ローカルで再現したい場合は、上記のリンクからスターター キットをダウンロードするか、私の例に近いわずかに構成されたバージョンを使用できます。フォルダー内で実行するだけで、npm install
すべて設定されます。
reactjs - 縮小されたファイルで RequireJS で React-dom を使用する
スタンドアロン ライブラリとして機能する縮小ファイルで RequireJS を介して React + ReactDOM を使用しようとしています。
私はReactを使用できるようになりました(縮小されたファイルにバンドルされています)が、ReactDOMを使用しようとするとすべてが壊れます。これまでに見つかった考えられる原因は、「require-dom」をロードしようとしている間に縮小されたファイルからコードをロードする代わりに、ファイル「react-dom」をインポートします。(実際にはreact-domが含まれています)。
実際、必要なすべてのファイルをプリコンパイルするために grunt を使用しています。これが私のうなり声のrequirejs構成です:
Main.js は次のとおりです。
上記の構成ですべてのコードをコンパイルした後、次のように html ファイルに含めます。
Index.js は、次のような requirejs ファイルです。
上記のコードを実行したときに表示されるエラーは次のとおりです。
react-dom を削除すると、すべてがスムーズに読み込まれます。
React をシムとしてインポートすると、react-dom がグローバルな React 変数を検出するなど、これまでにいくつかのことを試しましたが、どちらも機能しませんでした。
事前に感謝します。
更新 2: react-dom lib と縮小されたスクリプトでしばらくデバッグした後、縮小されたスクリプトで "define('react-dom')" の呼び出しの前にメイン メソッドが実行されることがわかったので、問題は解決しました。 「「react-dom」を定義するコードが適切に実行されるまでメインスクリプトを待機させる方法」として。
javascript - requirejs バンドルと requirejs オプティマイザーを組み合わせる際のモジュール インジェクションの問題
私は現在、かなり大きな Angular JS アプリケーションのパフォーマンスを向上させようとしています。これは、javascript ファイルの 1 つの大きなチャンクから、遅延ロードされる可能性のある 3 ~ 4 つの小さなチャンクに移行することによって実現しています。
次の npm パッケージとバージョンを使用しています。
最初は、すべての必要な JavaScript ファイルを取得し、requirejs オプティマイザーを使用してそれらすべてを 1 つのファイルに含める 1 つの面倒なタスクがありました。そのmain.js
ため、特定のすべてのパッケージのすべてのパスとシムが定義された 1 つのメイン構成ファイルがありました (私は必要に応じてサンプル構成などを投稿できます)。
ここでのアイデアは、この 1 つの大きなファイルを持つことから移行し、アプリケーションを 3 つから 4 つの小さな JavaScript ファイルにモジュール化して、ロード時間を短縮することです (4 つの小さなファイルを並行してロードする方が、1 つの大きなファイルをロードするよりも高速であるため)。
そのために、grunt-requirejs の modules オプションと bundles オプションを使用して、すべてのモジュールとその内容を定義します。
プロジェクトの構造は次のとおりです。
grunt タスクは次のように定義されます。
requirejs:bundle 実行後の dist フォルダーは次のようになります。
したがって、app_mini
とtestservice
は に含まれapp.js
、angular
とjquery
は に含まれvendor.js
ます。
src フォルダー内の私app.js
のものは、多かれ少なかれ次のようになります。
長いファイルの内容で申し訳ありませんが、それなしで問題を説明することは不可能です:) したがって、問題は、オプティマイザーとアプリ自体の Requirejs 構成全体を配置するための中心的な場所が必要なことです。ただし、明らかに、オプティマイザのパスは gruntfile パスに対して相対的であり、実行中のアプリのパスは対応するファイルに対して相対的です。
バンドル構成は requirejs によって自動的に生成されるため (bundlesConfigOutFile のため)、そこで使用される名前については、モジュール オプションから取得されるため、実際には多くのことを行うことはできません。
生成されて app.js に含まれるバンドル構成は次のようになります。
まず、RequireJs が vendor.js をパスでロードしたいという問題がありました。scripts/scripts/vendor.js
それを修正するために、私は abaseUrl = '/'
をrequire.config
ofに含めましたapp
しかし、今、私は問題を抱えていますtestservice
.injectapp_mini
とangular
.
dist フォルダー内の最適化された app.js は次のようになります。おそらく問題を見つけることができます。