以前のプロジェクトはgruntを使用して構築されており、その後、モジュラーを作成するためにrequirejsを使用しています。 requirejsの役人は、圧縮とマージのためにグラントプラグインを提供します。現在のプロジェクトはGulpに達しており、モジュール性でSEAJを使用しているため、当然、モジュールのマージと圧縮の問題も考えました。
その後、私がこの問題を最初に解決したとき、それはあまりスムーズではありませんでした。 NPMでのSEAJの合併と圧縮用の特に人気のあるGulpプラグインはありませんでした。また、Seajs Githubで多くの問題を読みましたが、それらのほとんどはすべてのモジュールファイルを合計ファイルにマージするだけです。これは、シングルページアプリケーションにとって間違いなく問題ではありません。ただし、マルチページアプリケーションの場合、モジュール性アイデアのオンデマンドロードのコアに明らかに違反するため、各ページが依存するモジュールに基づいてオンデマンドをマージできる方法です。
このオンデマンドマージの意味は、一方では、ページが依存するモジュールのみをマージし、他方では、マージに参加しないモジュールを除外できることです。これを検討する理由は、jQueryなどの一部のモジュールがすべてサードパーティに依存するライブラリであり、大きなファイルがある可能性があるためです。最も重要なことは、コードがほとんど変更されないことです。したがって、これらのモジュールがページのJSにマージされていない場合、ブラウザキャッシュをよりよく利用するのに役立ちます。この記事では、Gulpに基づいて構築された中小規模のプロジェクトでSEAJが圧縮をマージするシンプルで実行可能な方法を紹介します。
注：SEAJSマージの効果を説明するために、この記事では、マルチページアプリケーションで2つの独立したファイルをシミュレートするために使用される2ページの2つのページのデモデモを提供します。次のリンクから表示できます。
http://liuyunzhuge.github.io/blog/seajs/dist/html/login.html
http://liuyunzhuge.github.io/blog/seajs/dist/html/regist.html
login.htmlを例にとると、このページのソースファイルを表示すると、SAIJおよび関連する構成ファイルcommon.jsを参照することに加えて、App/LoginのみをページのメインJSと呼びます。このアプリ/ログインモジュールは、実際にはjs/app/login.jsに対応しています。
しかし、実際、このlogin.jsはより多くのモジュールJSに依存しており、Chromeのソースを介してこのページでロードされた詳細なJSリソースを表示できます。
login.jsがマージする前に、そのコードは次のようになりました。
ただし、最初の2つのスクリーンショットでは、mod/mod1.js、mod/mod2.js、deps/fastclick.jsの3つのファイルが表示されませんでした。 login.jsに加えて、lib/bootstrap.js、lib/jquery.js、lib/jquery.validate.jsも見ました。これがマージの効果です。一方で、JS/LIBフォルダーの下のモジュールは合併に参加しません。一方、一方、ページのメインJSが依存する他のモジュールは、ページのメインJSファイルにマージされます。
このデモに関連するコードは、次のリンクから表示できます。
https://github.com/liuyunzhuge/blog/tree/master/seajs
1.アイデアをマージします
実際、この方法は比較的単純です。最後に紹介します。
1）まず、SEAJSモジュールを整理したフォルダー構造について話させてください。これは次のようなものです。
この構造は、requirejsから借りて、ファイル組織を平らにしようとします。各フォルダーの関数は次のとおりです。
1）JS/APPは、各ページのメインJS、基本的に1つのページと1つのJSのロジックを保存します
2）JS/DEPSは、メインJSに統合する必要があるサードパーティモジュールを保存します
3）JS/LIBは、合併に参加する必要のないサードパーティモジュールを保存します
4）JS/modストア各プロジェクトで自分で書かれたいくつかのJSモジュール
5）common.jsはSAIJS構成ファイルです。
2） Common.jsでは、JS/LIBの下のすべてのモジュールがエイリアスオプションに構成されています。これらのJSはマージに参加せず、ブラウザキャッシュで使用する必要があるためです。エイリアスは、JS/LIBの下でファイルを変更またはアップグレードするときに、これらのファイルのロードアドレスを更新することを促進できます。
ベースはJSフォルダーに構成されています。モジュール開発では、他のモジュールを必要としたい場合、私の習慣は、相対的な識別なしにMOD/MOD1などのモジュール識別子を直接記述することです。定義されているモジュールが同じフォルダーに存在するモジュールが存在する場合でも、これがベースディレクトリをJSフォルダーに設定する理由でもあります。これは、サイトのルートディレクトリに少し似ています。
3）アイデアのマージ：主に、Gulp-Seajs-ransportとGulp-Seajs-Concatの2つのGulpプラグインを使用します。 GitHubではあまり人気がありませんが、私の問題をうまく解決しており、非常に簡単に使用できます。
（その他のコンテンツについては、関連するgulpfile.jsファイルを見つけるために、この記事の冒頭で提供されているソースコードリンクを確認する必要があります）
Gulp-Seajs-Transportは、Seajsモジュールファイルを匿名モジュールから名前付きモジュールに変えるのに役立ちます。たとえば、JS/mod/mod1.jsは、構築する前にこのように見えます。
しかし、輸送処理の後、それは次のようになります：
これは、SEAJSマージワークのより重要なポイントです。それはrequesjsとは異なり、直接concatするだけです。最初にトランスポートタスクによって処理され、匿名モジュールを名前付きモジュールに変え、Defineの2番目のパラメーターを使用して、requirejsと同様に、このモジュールのすべての依存関係を記述する必要があります。輸送を完了した後にのみ、マージに乳首を使用することができます。理由については、https：//github.com/seajs/seajs/issues/426を参照してください。
Gulp-Seajs-Concatがマージされると、非常に簡単です。ベースオプションを伝えるだけです。このベースオプションは、JS/common.jsのベースオプションと一致しています。 Gulp-Seajs-Concatは、ベースおよびトランスポート後のモジュールに基づいて依存する他のモジュールファイルを見つけることができるためです。
4）ページでメインJSを使用する場合は、この方法を使用する必要があります。
使用のパラメーター名は、マージされたメインJSのメインモジュールIDと一致する必要があります。たとえば、JS/App/login.jsマージの後、次のようになります。
対応する最初のモジュールは、マージされたファイルのメインモジュールです。赤いボックスの内容は、メインモジュールのIDです。 Seajsがモジュールを使用する場合、パラメーター名はこのIDと同じでなければなりません。それ以外の場合、SAIJがこのファイルを正常にロードしても、モジュール内のコードを実行しません。 Seajsにはルールがあるため、IDとパスマッチング原則、つまり、Seajsがファイルに複数のモジュールを含めるために使用する場合、このファイルのメインモジュールは、使用のパラメーター名に従って見つかります。彼らが正確に一致するときにのみ、彼らは見つけることができます。
5）圧縮難読化：gulp-uglifyを使用してください。
しかし、マングルに注意を払うには、要件エクスポートモジュールを除外する必要があります。そうしないと、予期しない問題が発生します。
2。この記事の概要
この記事の内容は非常に簡単ですが、私が最初にGulpとSeajsにカットしたとき、この記事の問題を解決するのに多くの時間がかかりました。その進捗は、デモの準備をしていた当時の私の状況よりもはるかにスムーズでしたが...何があっても、この記事の内容が多かれ少なかれ友人に役立つことを願っています。