フロントエンドのコンポーネント化の落とし穴について不満を言う_html/css_WEB-ITnose

この記事が共有するのは成功体験ではなく、失敗の教訓です~

ピットを設定する

コンポーネント化と以前のコンポーネント化を研究する必要がある理由についてコンポーネント化に関するコメント 実装方法については、この記事「ハンドルバーを使用してバックエンドのコンポーネント化を実装する」を参照してください。当初、以前の考えによれば、コンポーネント化を実装するには 3 つの方法があるべきだと考えていました。1 つはバックエンド テンプレートで、もう 1 つは Reactjs コンポーネントや Angular 命令などを含むブラウザ側で実装する方法です。 css ファイルを管理する (コンポーネント化を完全に実装すると主張するプラグインがあり、調査後に分析します); 最後の方法は、ビルド ツールを使用してコンポーネント化を実装することです。

フロントエンドとバックエンドの言語、テンプレート、フレームワークに依存せず、コードを構築するときにコンポーネントを直接パッケージ化できるような構築ツールを見つけることができれば完璧でしょうか?そう思うなら、おめでとうございます。私と一緒に穴を破る旅に乗り出しましょう。

ピットに入ります

ゴールをクリアしたら、道具を探し始めます。理想的には、コンポーネント化を直接実装するツール プラグインを用意することです。それが不可能な場合は、自分で実装を多少変更してもかまいません。現在人気の高いエンジニアリング ツールを見てみましょう:

webpack

まず第一に、私はこの最新かつ最も注目されているツールを研究しました。公式 Web サイトにアクセスするとすぐに、このツールに惹かれました。とても高そうに見えるクールな CSS3 キューブ。公式サイトの内容は英語ですが、特に問題はありません。メニューにチュートリアルの一覧が表示されているのがとてもうれしく、チュートリアルがたくさんあるので良いソフトは違うなと思いました。まったく学習用のチュートリアルではなく、初心者をうまく学習させることができない記事ばかりで、分類もありませんでした。例に従って使用したところ、これは単なるモジュールパッケージ化ツールであることがわかりました。どのページでも1つのjsと1つのcssのみを参照できるようにする必要があります。また、サードパーティの依存関係の処理もひどいです。 1 つにまとめるか、1 つずつ設定して手動で追加します。HTML で保持され、ソース コードの内容が侵入的に変更されます。機能は非常にシンプルですが、実装プロセスは非常に複雑で、金玉が痛くなった後、突然の心の痛みを伴うので、あきらめました。何か問題がある場合は、経験豊富な Webpack プレイヤーがコメントしてください。

fis3

実はfisは発売当初から注目していて、当時はプラグインが充実していないように感じていました。プロジェクトで使用されているため、あきらめました。今回のfis指導動画とfis3を見て少し興奮しました。活力に満ちている一方で、製品のコンポーネント化における百度の経験を紹介しています。

物事は本当に完璧ですか?まず最初に、fis3 は比較的成熟した構築ツールであることを認めなければなりませんが、コードをリリースするときにリリース ディレクトリをクリアできず、リリースできるのはすぐに罠だったということです。 400 を超えるプラグインの中で、「恥ずかしい」の一言で表現できるものは見つかりませんでした。超高層ビルにいるような気分ですが、エレベーターはなく、登らなければなりません。注意深く調査した結果、そのコンポーネント化もバックエンド言語に依存していることがわかり、作業の半分は本当に完了しました。 Angular と Angular2 に関しては、フロントエンド テンプレートに依存する例は私が探している答えではありません。

ただし、そのディレクトリ区分には参照の意味がある場合があります。

Now piged

gulp

gulp は grunt と同様の機能を備えており、その豊富な拡張性により、最も強力なフロントエンド構築ツールになることができます。 Gulp の方が効率的であるため、ここでは gulp についてのみ説明します。適切なプラグインを探し続けたところ、コンポーネントのネストされた参照と依存リソースの自動マージという重要な機能を実装する必要があることが判明しました。 HTML コードを動的に処理してリソースを識別し、それらを統合します。この関数は少し馴染みがありますか? はい、これはバックエンド テンプレート エンジンを使用する前に書いたものです。これを考えると、落とし穴が明らかになります。ビルド ツールを使用してコードに侵入し、テンプレート エンジンが行うべき作業を完了しようとしていますが、同時にテンプレート エンジンのようにデータを入力することはできません。これはバドミントンのラケットで卓球をするのと同じで、ラケットのブランドが良くないのでうまくプレーできないといつも感じます。

穴から抜け出してください

振り返ってみて、ビルド ツールの機能が何であるか見てみましょう。 fis3 は 3 つの主要な関数を定義します

• リソースの場所: 開発で使用されるリソースのオンライン パスを取得します。
• コンテンツの埋め込み: 1 つのファイルのコンテンツ (テキスト) または Base64 エンコード (画像) を別のファイルに埋め込みます。 >
依存関係ステートメント: テキスト ファイル内の他のリソースへの依存関係をマークします。 - このタスクが完全に完了していないのは残念ですが、実際には、これらの関数はすべてソースを変更する必要があります。コードの基礎であるため、この程度の結合は非常に不親切です。コードの混乱を引き起こす一方で、ビルド ツールを置き換えることができなくなります。 gulp/grunt のような自動ビルド ツールを見ると、ソース コードの変更を必要とせずに、圧縮、コンパイル、単体テスト、lint などの反復的なタスクを自動化できます。この分離されたアプローチの方が汎用性が高く、保守が容易だと思います。つまり、依存関係の宣言を自動的に処理する fis3 プラグインを作成すれば、ビルド ツールを使用してコンポーネント化を実装できるはずです。フロントエンドとバックエンドが分離され、動作、構造、スタイルが分離されているときに、今日このようなことを行うだけでは、明らかに最良かつ最もフレンドリーな実装方法ではありません~

ブログ: http ://yalishizhude.github.io

著者: アリストテレス