フロントエンドエンジニアリングの分析
1.フロントエンドエンジニアリング？
1.1目標
フロントエンドの分野では、継続的な技術の進歩と経験の漸進的な蓄積によってもたらされるさまざまなソリューションを使用して、プロジェクトの開発、テスト、および保守段階で発生するさまざまな非効率的で厄介な問題を解決します。
1.2テクノロジー
エンジニアリングは一種の思考であり、テクノロジーは一種の実践です。テクノロジーは進化し続け、時代が進むにつれて変化します。さまざまな時期に、エンジニアリングのアイデアを実行するためのさまざまなテクノロジーがあります。
アイデアの実装は、行動や実践から切り離すことはできません。テクノロジーは時代遅れですが、実践は現在に基づいている必要があります。
1.3理由
フロントエンドエンジニアリングは効率を改善することです。この改善は、プロジェクトの開発、テスト、およびメンテナンスフェーズに反映されます。
2.フロントエンドに焦点を合わせる
フロントエンドに焦点を合わせる：標準化/モジュール化/コンポーネント化/自動化
2.1正規化
- バージョン管理と開発プロセスの仕様
-git：バージョン管理とコードウェアハウス
-gitflow：操作を簡素化するgit、動作を標準化するアクティビティモデルに基づく
- 仕様書（スクリプト、スタイル、ディレクトリ構造）
2.2モジュラー
一般的に、CSSモジュール化/ JSモジュール化があります。
通常、論理的に関連するコードは、同じモジュールと同じファイルに配置されます。このように、モジュールの内部ロジックの実装に注意を払い、さまざまな汚染やその他の問題を順不同で検討するだけでよく、モジュールは相互に呼び出すことができます。
CSS Modular Solution：核となるアイデアは、効果的なスタイルのルールを通じて競合を回避することです。
- スコープ：DOMノードにdata-v-version属性を追加
- JSのcss：スクリプトモジュールでスタイルを記述し、カプセル化されたスタイルモジュールでも直接呼び出すことができます
- cssモジュール：プリコンパイルでは、スタイルはスクリプトでは変数と呼ばれます
- BEM：Block_Element-Modifier、ルールに従って、手書きのcss、および対応するクラスをモジュールに追加（要素はBEM仕様に準拠し、プログラム可能なcssを使用できます）
jsモジュラーソリューション： commonJs、ESモジュールローダー仕様
2.3コンポーネント化
コンポーネント化とモジュール化の核となるアイデアは分割統治であり、実際の利点はチームのコラボレーション効率とプロジェクトの保守性の向上です。
コンポーネントとは何ですか？UIは主にコンポーネントとしてカプセル化されます。たとえば、ページヘッダーはヘッダーコンポーネントにカプセル化され、ロジックは主に関数がコンポーネントにカプセル化されます。
特定のロジックとUIによってコンポーネントとして作成された、非常にまとまりのある低結合のパッケージと呼ぶことができます。
- UIパッケージに焦点を当てたコンポーネントは普遍的ではありません
- 汎用性の高いロジックパッケージに焦点を当てたコンポーネント
- コンポーネントには、部分的なUIコンポーネントなどのコンポーネントを含めることができます。
2.4自動化
核となる考え方：機械によって自動的に実行できることは、実行されるように作られることは決してありません。自動化は、フロントエンドエンジニアリングの中核です。
- vue-cliなどの自動初期化
- Webpackなどの自動ビルド（パッケージ）
- カルマ、ジェットなどの自動テスト
- Jenkinsなどの自動デプロイメント
2.4.1自動テスト
2.4.2自動デプロイメント
2.4.3自動初期化
2.4.4自動化された構築
2.4.5例：360検索トピックページ開発ツール
CLIを使用して、プロジェクトの初期化とオンラインリリースに特化し、コンパイル前のニーズを満たすようにwebpackプロジェクトを構成します。静的リソースを会社のCDNにアップロードするwebpack4ベースのプラグインを開発します。
webpack4を使用してプロジェクトをビルドします。
module.exports = {
mode:'develpment',
entry:{
main:'./src/main.js'
},
output:{
path:path.resolve(_dirname, '../dist'),
filename:'[name].js'
},
module:{
rules:[]
},
plugins:[]
};
webpack4を使用したプロジェクト構築の提案：
- 異なる環境の構成を区別します。
-webpack.base.conf.js
-webpack.dev.conf.js
-webpack prod.conf.js - 統合ツールのプラグインアクセサリは、個別に配置されます。
-.babelrc
-.eslintrc
-.postcssrc - env構成
.browserslistrcファイルは個別に配置されます。
