Alibaba 技術記事の共有: Alibaba Cloud ワイヤレスおよびフロントエンド チームが webpack_html/css_WEB-ITnose に基づいてフロントエンド エンジニアリングを実装する方法

Background

フロントエンドは初期の残酷な成長を経験しました (写真の切り取り、単純な特殊効果の作成) - ブラウザーとの互換性のために登場したさまざまなクラス ライブラリ (JQUERY、YUI など) - mv* (full Warmと欲情して、コードが多すぎるので、コード構造をどのように整理するかを考えます（バックボーン、angularjsなど） - エンジニアリング（プロジェクトのスキャフォールディングとパッケージ化とデプロイメントにgrunt、gulp、yeomanを使用） ただし、の構成。これらには一定の基準が必要であり、フルエンド、フルスタック、エンジニアリング環境では、できるだけ多くのビジネス シナリオをサポートできるツール セットが必要です。このようなフロントエンド自動化ツールの主な機能は、プロジェクトのスキャフォールディング、ローカル サーバー (リアルタイム監視、変更はすぐに反映されます)、モック データのローカル視覚化、およびこのツールの使用方法については、以下で詳しく説明します。

インストール。 dbl ツール

sudo npm install dbl -gdbl -V

プロジェクトのスキャフォールディング

mkdir demo && cd demodbl init

コマンドを実行すると、dbl がプロジェクト構造を初期化します。 :

|-demo   |-- src       |-- index.html       |-- css       |-- js   |-- make-webpack.config.js   |-- package.json   |-- aliasMap.json   ...

使い方とツールの利点

私​​たちのプロジェクトのスキャフォールディングは webpack に依存しています (これに慣れていない場合は、自分で Google で調べてください)。利点は次のとおりです:

• grunt や gulp と比較すると、構成は次のとおりです。さらに、grunt と gulp はパッケージ化ツールとしてのみ使用されます。dbl を使用すると、これらの面倒な設定の問題を考慮する必要がなくなります。 、すべてが設定されており、ノードを書くのと同じように js を書くことができます。
• モジュール開発では、完全なモジュールには html、css、および js を含める必要があります。従来のツールでは、モジュールの css を保守するのは困難です。 js を同期して、dbl を開発プロセス中に直接使用できます:

/**这是文件 component/list.js**/require('component/list.less')

このツールは自動的に css にコンパイルし、html ページにスタイル タグを生成し、css を挿入します。 HTML にはスタイル タグの数に制限があり、あまりにも多くのタグをサポートすることはできないと言われています。さらに、オンラインにするときにこの方法を使用すると、CDN キャッシュを有効に活用できません。ただし、デプロイするときは心配する必要はありません。 , これらのスタイルを抽出し、ページ レベルに基づいて CSS ファイルにマージします。

リソースには angularjs + requirejs を使用します。パッケージ化されたページに基づいて grunt-requirejs を使用します。一緒に。そうすることで、ブラウザーのキャッシュがパフォーマンスに与える影響を無視することになります。 dbl に関しては、2 つのページが共同してモジュールを参照する場合、このモジュールは common.js にパッケージ化されます。
less と sass をサポートします (make-webpack.config.js 設定に自分で追加する必要がある場合、多くのユーザーがインストール中に問題が発生することを考慮して)。この構成可能なアプローチにより、拡張が大幅に可能になります。
ローカルサーバー。変更は自動的かつほぼ即座に有効になります。
ローカルのモックデータ。モック データは、別のノード サービスをデータ プロバイダーとして有効にすることによって実現されます。 ~~~js dbl server -p 3001 ~~~ このコマンドを実行すると、モック サービスが自動的に開始されます。デフォルトのポートは 8001 です。サーバーとモックは 2 つの独立したサービスであることに注意してください。モック サービスは、インターフェイスを視覚的に編集し、フロントエンドとバックエンドの連携を容易にするインターフェイス ドキュメントを自動的に生成できます。そして、プロジェクトが存在する限り、理論的にはこのドキュメントは最新でなければなりません。 doc ファイル システムに記録するよりもはるかに便利です。 http://localhost:8001 からアクセスできます。インターフェイスは次のようになります。
dbldeploy コマンドは、リソースをパッケージ化して圧縮し、現在のディレクトリにビルド フォルダーを生成します。この時点で、このディレクトリを cdn にアップロードできます。