フロントエンドエンジニアリングに関する注意事項

1 はじめに

職場では、次のような状況に遭遇することがよくあります。

• インデント、改行など、他の同僚のコードを引き継ぐのは非常に苦痛だと思いますか? かつて不快に感じたコード スタイル
• 同僚は、構文エラーが頻繁に報告されるコードについて言及しましたが、構文エラーはプロンプトなしで肉眼で 1 つずつ確認するしかありませんでした。
• 同僚はそれぞれ異なるスタイルでコミットを書いており、中には一言でコミットを書いている人もいますが、この変更のカテゴリーを説明していません。例: 機能の追加ですか? コードの最適化ですか？それともバグを修正しますか？それともWebpackの設定を変更しますか？またはツールチェーンなどを変更します。
• Monorepo ウェアハウスの場合、その中に多くのプロジェクトがあり、どのプロジェクトが変更されるかを気にせずにランダムにコミットを書いた場合、非常にクラッシュしますか?

コードの構文チェック、コードの書式設定、コミットコメントの仕様、コードのコンパイルなどについては、複雑で大変な作業です。人間を馬扱いしたくなければ、機械に任せるべきですよね。

フロントエンド分野は、かつてのような純粋な js や jquery の時代ではなく、フロントエンド分野でも可読性、保守性、堅牢性などを確保するためにモジュール化やエンジニアリングが追求されるようになりました。プログラムを終了します。

2.背景

フロントエンド エンジニアリングは数年前から発展しており、効率を改善するパッケージが雨後の筍のように大量に出現しました。ですから、フロントエンドの小さな人間として、私はそれを探求せずにはいられませんでした。結局のところ、誰もがクレイジーな残業をして馬乗りのように扱われることを望んでいませんし、私も朝のシフトを抜け出して、単純でシンプルな仕事を始めたいと思っています。幸せな生活。

この記事は、基本的なフロントエンド エンジニアリングを検討する実践的なプロセスを記録することを目的としています。後で読みやすいように、内容を軽くしてください (追記: この記事は、コード インスペクション、コードの美化、chatgpt の使用を含むコミット仕様に重点を置いています)

プロジェクトの基本技術選定はreact + tsとなっており、これをベースにフロントエンドエンジニアリングの基本構成を進めていきます。

3.Git フック: ハスキー

husky は、Git フックでコマンドを実行するためのツールで、コードのコミットやプッシュなどの特定のイベントで指定されたコマンドを自動的にトリガーできます。husky を使用すると、コードの送信前、送信後、プッシュ前などのシナリオでスクリプトを実行して、コード スタイルの検査、単体テスト、構築などを実行できます。

インストールは次のとおりです。

1. ハスキーのnpmパッケージをダウンロードする
2. ハスキーを初期化する
3. npm install の構成時に husky を自動的に初期化する

ショートカット コマンドを使用して、上記のインストール手順を完了します。

# npm
npx husky-init && npm install

# yarn
yarn dlx husky-init --yarn2 && yarn

#pnpm
pnpm dlx husky-init && pnpm install

4. ファイルフィルタリングツール: lint-staged

lint-staged は、git staged ファイル上で指定されたコマンドを実行するためのツールです。これは、コードを送信する前に、送信されるファイルに対してコード スタイルのチェック、書式設定、静的分析、その他の操作を実行して、コードを送信する前にコードの品質と一貫性を維持するのに役立ちます。

基本的な使い方は以下の通りです。

1. 依存関係をインストールする

# npm
npm install lint-staged --save-dev

#yarn 
yarn add lint-staged --dev

#pnpm
pnpm add lint-staged --save-dev

2. package.json ファイルを次のように変更します。

{
  "scripts": {
    "lint": "eslint src"
  },
  "lint-staged": {
    "src/**/*.{ts,tsx}": [
      "npm run lint", // 运行自定义的 lint 脚本
      "git add" // 添加修复后的文件到暂存区
    ]
  }
}

上記の設定は、src ディレクトリ内のサフィックス ts および tsx を持つすべてのファイルについて、送信前に npm run lint コマンドを実行して構文チェックを実行し、修復されたファイルがステージング領域に追加されることを意味します。

実際の開発中、lint-staged は通常、コミット前フックと連携してコミット前にアクションを実行するため、コミット前フックの内容を次のように置き換えます。

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

5.コミットコメント指定：commitlint

commitlint は、Git コミット メッセージを正規化するためのツールです。これは、チームが各コミット メッセージが統一仕様に準拠していることを確認し、コード ウェアハウスの可読性と保守性を向上させるのに役立ちます。

ここでは、husky で commitlint を使用する方法を直接示します。

1. 関連する依存関係をインストールする

# npm
  npm install @commitlint/cli @commitlint/config-conventional --save-dev

  # yarn
  yarn add @commitlint/cli @commitlint/config-conventional --dev

  # pnpm
  pnpm add @commitlint/cli @commitlint/config-conventional --save-dev

2. ハスキーを使用して commit-msg フックを追加する

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

3. package.json ファイル内の commitlint 情報では、commitlint によって提供される 11 種類の注釈が​​デフォルトで使用されます (追記: 以下の ui やバージョンなど、カスタマイズできます)

{
  "commitlint": {
    "extends": [
      "@commitlint/config-conventional"
    ],
    "rules": {
      "type-enum": [
        2,
        "always",
        [
          "build",
          "chore",
          "ci",
          "docs",
          "feat",
          "fix",
          "perf",
          "refactor",
          "revert",
          "style",
          "test",
          "ui",
          "version"
        ]
      ]
    }
  }
}

commitlint が提供する 11 種類のアノテーションについては、次のように説明します。

• build: コンパイル関連の変更: リリース バージョン、プロジェクト ビルド ツールの変更など (例: glup、rollup、webpack、vite、turbo およびその他のツール)
• 雑務: さまざまな変更 (例: ビルドプロセスの変更、依存ライブラリの追加など)
• ci: 継続的インテグレーション関連の変更 (例: github-action、gitlab-ci/cd など)
• docs: ドキュメントの変更
• 特技: 新機能
• 修正: バグを修正
• perf: 最適化 (例: パフォーマンス、エクスペリエンスの向上など)
• リファクタリング: コードのリファクタリング
• 元に戻す: ロールバックバージョン
• スタイル: コード形式の変更
• テスト: テストケースの変更

6. コード検査

コードインスペクションはeslint、typescript-eslintを使用します

eslint は、JavaScript コードのエラー、スタイル、品質の問題をチェックして修正するためのツールです。これにより、開発者やチームはコーディング プロセス中に一貫したコーディング標準に従うことができ、コードの可読性、保守性、品質が向上します。

typescript-eslint は、TypeScript コードを検査および修復するためのツールです。これは eslint に基づいており、TypeScript コード内のエラー、スタイル、品質の問題をチェックして修正するためのルールとプラグインのセットを提供します。

要約すると、次のパッケージを開発環境にインストールする必要があります。

1. エスリント
2. eslint-プラグイン-反応フック
3. eslint-プラグイン-反応-リフレッシュ
4. @typescript-eslint/parser
5. @typescript-eslint/eslint-plugin

# npm
npm install eslint eslint-plugin-react-hooks eslint-plugin-react-refresh @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

# yarn
yarn add eslint eslint-plugin-react-hooks eslint-plugin-react-refresh @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

# pnpm
pnpm add eslint eslint-plugin-react-hooks eslint-plugin-react-refresh @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

eslint を使用する基本的な手順は次のとおりです。

1. eslint をインストールする: プロジェクトのルート ディレクトリでコマンド npm install eslint --save-dev またはyarn add eslint --dev または pnpm add eslint --save-dev を実行して、eslint を開発依存関係としてプロジェクトにインストールします。
2. eslint 構成ファイルを初期化します。プロジェクトのルート ディレクトリでコマンド eslint --init を実行し、プロンプトに従って構成オプションを選択します。構成ファイル (通常は .eslintrc または .eslintrc.json) が自動的に生成されます。
3. ルールとプラグインの追加: 生成された構成ファイルでは、プロジェクトのニーズに応じてルールを追加または変更し、必要なプラグインを導入できます。
4. eslint を実行する: コマンド ラインで eslint yourfile.js または eslint . を実行します ( yourfile.js は、確認する必要があるファイル名またはディレクトリです)。eslint は設定ファイルに従ってコードをチェックし、エラーまたは警告情報を出力します。
5. 自動修復: eslint --fix yourfile.js または eslint --fix を実行して、修正可能な問題の一部を自動的に修正してみることができます。

typescript-eslint を使用する基本的な手順は次のとおりです。

1. typescript-esLint をインストールします。プロジェクトのルート ディレクトリで次のコマンドを実行します。

#npm 
npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

# yarn
yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

#pnpm
pnpm add @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

2. eslint および @typescript-eslint プラグインを構成します。生成された eslint 構成ファイルでは、パーサーを @typescript-eslint/parser として指定し、@typescript-eslint/eslint によって提供されるルールとプラグインを使用する必要があります。 -プラグイン

eslint 構成ファイルは次のとおりです (例として .eslintrc を使用します)。

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
    '@typescript-eslint/ban-ts-comment': 'off'
  }
}

以下は、lint ステージング構成と組み合わせたコード検査コマンドです。

{
  "scripts": {
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "lint:fix": "eslint . --ext ts,tsx --fix",
  },
  "lint-staged": {
    "*.(ts|tsx)": [
      "eslint --quiet"
    ]
  }
}

7. コードの美化: より美しく

Prettier は、統一されたスタイル仕様に準拠するようにコードの形式を自動的に調整できるコード形式設定ツールです。

基本的な使い方は以下の通りです。

1. 依存関係をインストールする

# npm 
npm install prettier --save-dev

# yarn
yarn add prettier --dev

#pnpm
pnpm add prettier --save-dev

2. prettier を構成するには、.prettierrc ファイルまたは package.json ファイルの prettier フィールドを使用できます。以下では、例として package.json を使用します。

{
  "prettier": {
    "trailingComma": "all",
    "arrowParens": "always",
    "printWidth": 120
  }
}

実際のアプリケーションでは、コミット前にコードが整形されます。以下は、コード インスペクション + コード整形コマンドと lint ステージング設定を組み合わせたものです。

{
  "prettier": {
    "trailingComma": "all",
    "arrowParens": "always",
    "printWidth": 120
  },
  "lint-staged": {
    "*.(ts|tsx)": [
      "eslint --quiet"
    ],
    "*.(ts|tsx|json|html)": [
      "prettier --write"
    ]
  }
}

8. 開発ツールの推奨

現在テクノロジーの世界でローコードが非常に活発であることについて!

ローコードとは何ですか? 一連のデジタル テクノロジー ツール プラットフォームは、グラフィカルなドラッグ アンド ドロップやパラメーター化された構成などのより効率的な方法に基づいて、迅速な構築、データ オーケストレーション、接続エコロジー、ミドルエンド サービスなどを実現できます。コードをほとんどまたはまったく使わずに、デジタル変革におけるシナリオ アプリケーションの革新を実現します。これは、デジタルトランスフォーメーションのプロセスにおけるコスト削減と効率向上のトレンドの産物であり、巨大な市場需要と従来の開発生産性によって引き起こされる需要と供給の矛盾を緩和または解決することができます。

ここでは、便利なローコード プラットフォームである JNPF 高速開発プラットフォームを紹介します。近年、市場パフォーマンスと製品競争力の面で優れており、最新の主流である前後分離フレームワーク (SpringBoot+Mybatis-plus+Ant-Design+Vue 3 )を採用しています。コード ジェネレーターは依存性が低く、柔軟な拡張機能を備えているため、柔軟な二次開発が可能です。

JNPFに代表されるエンタープライズレベルのローコードプラットフォームは、より技術要件の高いアプリケーション開発を支援するため、データベースモデリング、Web API構築、ページデザインに至るまで従来のソフトウェア開発とほとんど変わりなく、ローコード可視化モードのみを使用して、 「追加・削除・修正・確認」は繰り返しの作業なので、ローコードをまだ理解していないパートナーでも理解することができます。

アプリケーション: https://www.jnpfsoft.com/?csdn

これにより、開発者は開発プロセス中に簡単に開始でき、従来の開発モデルで蓄積された経験を最大限に活用できます。したがって、ローコード プラットフォームはプログラマーにとって非常に役立ちます。