メインコンテンツへ移動
黯羽軽揚毎日少しずつ

JS 自動化

無料2015-05-16#JS#前端工程化#前端可维护性#前端自动化工具

JS 自動化はフロントエンドエンジニアリングの縮図ではありませんか。自動化ツールを使用することで保守性も向上します。人間は機械よりもミスを犯しやすいですから

###はじめに

当時、筆記試験の勉強をしていた時に「フロントエンドエンジニアリング」について理解しました。要するに自動化ツールを使用して開発者が小さな詳細を完了させ、作業効率を向上させるというものです。しかし、当時は保守性まで考えていませんでした

プロジェクト構築 -> モジュール化開発 -> 再利用 -> テスト -> デバッグ -> 検証 -> リリース -> バージョン管理、この全プロセスの多くの环节を自動化ツールで解放し、プロジェクトの保守性を向上できます

一。自動化の長所と短所

js 開発における自動構築システムの長所と短所は以下の通り：

###1. 長所

  • 自動ソースコード制御により、デバッグ用コードと将来リリース用コードを明確に区別でき、開発段階ではオンライン製品への影響を考慮する必要がありません

  • 静的コード分析を自動完了できます（JSLint、JSHint）

  • リリース前に多种類の加工が可能です（ファイル結合、コード圧縮）

  • 自動化テストにより、すぐにエラーを発見できます

  • 反復作業の再実行が容易です（例：ファイルの再結合、コード圧縮）

###2. 短所

  • 一部の開発者は使い慣れていません。コード変更後に再構築する必要があるため、従来のファイル保存、ページ更新とは異なります

  • オンラインにデプロイされた製品コードと開発段階のコードが異なるため、bug の追跡が困難です

  • 経験不足の開発者はこのような自動構築システムを使用できない可能性があります

二。ファイルディレクトリ構造

一般に異なるプロジェクトは異なるディレクトリ構造を必要としますが、以下に示すいくつかの原則は広く適用可能です：

  1. 1 つのオブジェクトに対応する 1 つのファイル

複数の開発者による変更の衝突を回避します。ファイルが少ないほど衝突の確率が高くなります。1 つのオブジェクトに対応する 1 つのファイルでこのリスクを最小化できます

  1. 関連ファイルをフォルダでグループ化

これによりコード管理が容易になり、機能に基づいて対応するコードを特定しやすくなります

  1. サードパーティコードの分離

サードパーティライブラリは CDN で導入するのが最適です。これによりサードパーティコードに対する余計なソースコード制御が不要になります

  1. 構築成果物の分離

構築の成果物は別のフォルダに配置し、ソースコード制��を行わないようにします。意図しない反復構築による時間消費を回避します

  1. テストコードを近くに配置

テストコードは見つけやすい場所に配置します。例えばソースコードと一緒に配置するか、test/ディレクトリ内のソースコードパスに類似した位置に配置します

三。自動化のステップ

###1. 自動構築ツールの使用

  • Ant：Java ベース

  • Buildy：NodeJS ベース

  • Gmake：UNIX ファン向け

  • Jammit：Ruby ベース

  • Jasy：Python ベース

  • Rake：Ruby ベース

  • Sprockets：Rack ベース

###2. 自動コードチェックツールの使用

  • JSLint：ダグラスが作成した優れたツール

  • JSHint：上記とほぼ同じですが、設定オプションがより多いです

###3. 自動ファイル結合/加工ツールの使用

ファイルの結合、バージョン番号の挿入などは、最初のステップで使用した自動構築ツールで処理できます

###4. コード瘦身/圧縮ツールの使用

瘦身と圧縮の違いは、瘦身がコード構文の最適化针对でソースコードを短くするのに対し、圧縮はプレーンテキストのソースコードファイルをより小さい別のファイルに変換することです。圧縮後は解凍しない限り編集できません

瘦身ツールは多く、著者はいくつか推奨しています：

  • YUI Compressor：Yahoo! のもの、Java ベース、変数名の短縮、空白文字の削除、コメントの削除が可能で、CSS の瘦身も可能です

  • Closure Complier：Google のもの、Java ベース、深層最適化が可能です（未使用メソッドの削除、1 回のみ使用されるメソッドをクロージャに投入）、YUI よりも瘦身効果が優れています

  • UglifyJS：NodeJS ベース、var 文の結合も可能です

###5. 自動ドキュメント生成ツールの使用

  • JSDoc：Java ベース

  • YUI Doc：js で記述

  • その他：Docco、Dojo Documentation Tools、JoDoc、Natural Docs、NDoc、PDoc

###6. 自動テストツールの使用

  • YUI Test Selenium Driver：（著者は常に Yahoo! のものを先に配置するのが好きです、良い従業員ですね）YUI のユニットテストフレームワーク

  • Yeti：各ブラウザを使用した js テスト

  • PhantomJS：WebKit ブラウザ環境を提供し、QUnit や Jasmine と連携可能

  • JsTestDriver：Google のユニットテストフレームワーク、自動ブラウザテストをサポート

  • Jasmine：行動駆動の js テストフレームワーク

  • QUnit：JQuery のユニットテストフレームワーク

  • Selenium：機能テストフレームワーク、ブラウザテストをサポート

###7. すべての自動化ツールを統合

少なくとも 3 つのバージョンを構築すべきです：

  • 開発版

できるだけ高速であることが要求されます。そうでないと開発者の全力発揮に影響します

具体的なタスク：ファイル清理 -> 構築環境の初期化 -> コードチェック -> ファイル結合

注意：自動テスト环节は含めないでください。時間がかかるため、開発版構築はできるだけ高速であることが要求されます

  • 統合版

エラーの排查に使用し、定期的に実行してエラーをチェックし報告すべきです

具体的なタスク：コード瘦身 -> テスト -> ドキュメント生成

注意：ドキュメント生成环节はオプションです。含めるとエラーチェックに影響する可能性があるためです（エラーはドキュメント生成环节から発生する可能性があります）

  • リリース版

0 エラーを保証し、安定した信頼性の高い製品です

具体的なタスク：ファイル加工（バージョン、著作権情報などの追加）

注意：デプロイなどのリリースタスクを含めることを検討できます。または統合結果を直接加工してデプロイすることも選択できますが、統合結果に問題がないことを保証する必要があります

###8.CI システムの使用

CI（Continuous Integration）システムは統合版のエラー排查を強化するために使用されます。継続的統合は定期的に自動実行され、コードをチェックしてエラーを報告し、場合によってはエラーに関連する具体的な開発者に連絡します

###参考資料

  • 『Maintainable JavaScript』

###あとがき

これで本全体が終了しました。この本は淘宝 UED ブログで推奨されたもので、まあまあ良く、特に難解な英文もありませんでした。

200 ページの本を断続的に約 3 週間かけて読み終えました。遅すぎ也不算ですが、もちろん、この期間中に『JavaScript 语言精粹』、『The Book of CSS3』も読み終え、SASS 入門を学び、10 篇のブログ記事を書きました

コメント

コメントはまだありません

コメントを書く