ビルドモダンなWebアプリケーションです.プロジェクトとの準備、仕事の準備.第1部

この一連の記事では、アプリケーションを構築し、コンポーネントの小さなライブラリを作成するの完全なサイクルを通過します
私は最初のJavaScriptプロジェクトを作成し、世界にそれを表示するジュニアフロントエンド開発者のための記事のこのシリーズを書いている🙂 このプロジェクトのために、私は最も現代のプロジェクトで見つけることができる基本的なスタックを選びました.あなたが退屈していないように、あなたは常に自分のものを追加することができますので、私はあなた自身の実装を書いて、記事を読んでいる間にあなたの仕事の結果をGithubに公開することをお勧めします.確かに、1ダースのテクノロジ、ライブラリ、フレームワーク、試してみたいツールがあり、そのようなペットプロジェクトの開発は、新しい何かを使用する大きなオプションです👍

プロジェクトへの知人

我々が実装するプロジェクトの主な考えは、TypeScript、ドキュメントと反応して、Storybookでそれを視覚化して、NPMのパッケージとしてそれを出版するコンポーネントのライブラリを書くことです.また、プリンタを設定し、Jestのテストを追加し、Travis CIを使用してテストプロセスを自動化します.おそらく、何か他の作業中に、コメントを書くとあなたのソリューションを提案することを躊躇しないで追加されます😉
この記事はいくつかの部分に分けられており、プロジェクトの各段階を詳細に検討することができます.

仕事の始まり

まず、プロジェクトのGithubにリポジトリを作成する必要があります.

これは、新しいリポジトリ作成ウィンドウがどのように見えるかです.名前とリポジトリを簡単に説明する必要があります.私のすべてのペットプロジェクトのために、私は常に公共倉庫を選びます.また、私はすぐにMITライセンスを追加しました-あなたが見ることができるライセンスについての詳細を学ぶことに興味があるならば、これはオープンソースプロジェクトのためのライセンスの最も簡単で最も一般的なバージョンですthis site Githubによって作成されます.
では、新しいリポジトリをクローン化しましょう.githubはsshやhttpsを使ってクローンを提供します.今、私は2番目のメソッドを使用します.

git clone https://github.com/Alexandrshy/react-ant.git

成功したアンパックに関するメッセージが表示されたら、クローニングは成功しました.
また、次の試みで行われない場合、ログインをキャッシュする必要がありますgit fetch , git clone , git push ユーザ名とパスワードを入力する必要がありますmore about this )

git config --global credential.helper osxkeychain

の作成に移動しましょうpackage.json . これを行うには、次のコマンドを実行します.

npm init -y

今すぐリポジトリで、あなたはpackage.json いくつかのフィールドが埋められたファイルです.

{
  "name": "react-ant",
  "version": "1.0.0",
  "description": "A set of light React components 🐜",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Alexandrshy/react-ant.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/Alexandrshy/react-ant/issues"
  },
  "homepage": "https://github.com/Alexandrshy/react-ant#readme"
}

小さな変更を行います.

  "keywords": [
    "react",
    "css",
    "UI"
  ],
  "author": {
    "name": "Alex",
    "email": "[email protected]",
    "url": "https://github.com/Alexandrshy"
  },
  "license": "MIT",

私は、すべてがここで明確であると思います、そして、より詳細な構成のために、あなたは必要かもしれませんthis documentation .
我々は、に戻りますpackage.json 将来の設定.しかし、現在、それは最初のコミットをする時間です.

git status
git add package.json
git commit -m "Init npm package"
git push

変更内容をチェックし、変更履歴をインデックスにしたpackage.json , シンプルで明確なコミットメッセージをコミットし、リモートリポジトリに変更を出す.さあpackage.json そして、新しいコミットに関する情報は我々の倉庫に現れました.Gitで動作するようにIDEやGUIを使用することができますが、コンソール内のすべてを行うのはより快適です🤠

プリンタ

コードをきれいにするために(これはいくつかの人々がプロジェクトに取り組んでいる場合は特に重要です)あなたは間違いを分析し、識別するためのツールが必要です.私のプロジェクトでは、eslintを使ってJavaScriptコードをチェックします.それは簡単にインストールし、柔軟にカスタマイズ可能です.
インストールします.

npm i -D eslint

設定ファイルを設定します

./node_modules/.bin/eslint --init

手動で設定したり、既製のルールを使用して設定できます.スタイルガイドフォームAirbnb . 次の設定を使用します

? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? React
? Does your project use TypeScript? Yes
? Where does your code run? Browser
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Airbnb (https://github.com/airbnb/javascript)
? What format do you want your config file to be in? JavaScript

私たちはすぐにこの項目をダイアログボックスで選択しましたCannot find module 'typescript' . そして、まだスクリプトをインストールしていないので、論理的です.

npm i typescript
npm i -D @typescript-eslint/parser

インストール後、eslintrc設定ファイルが表示されます.それは既に構成されている場合は、開発中に追加したり、いくつかのルールを変更する場合、それはあなたの援助に来る.
eslintをテストするには、作成しましょうindex.ts ファイルを次のコードを保存します.

var a
console
    .log('a = ' + a)


    a = 100

テストを実行します.

./node_modules/.bin/eslint index.ts

グレート、5行のコードには7つのエラーと1つの警告👍 すぐにこれらのエラーを自動的に修正することを提案します.

./node_modules/.bin/eslint index.ts --fix

そして、コンソールを使うことについての1つの警告だけを持っているコードを得ます.ログ

let a;
console
  .log(`a = ${a}`);


a = 100; 

として、自動修正作業を参照すると、エラーが修正されているが、コードはまだかなり醜い見えます.フォーマットのために、コード、最高のツール、私の意見では、そうですPrettier . プロジェクトに追加しましょう.

npm i -D prettier-eslint
npm i -D prettier-eslint-cli

メインパッケージとCLIをインストールしてファイルをフォーマットしました.使いやすいように、NPMスクリプトを作成しましょう.

"scripts": {
    "format": "prettier-eslint '**/*.{js,ts,tsx}' --write"
},

私は--write すべてのフォーマットされたファイルを上書きするオプション.結果を確認します.

npm run format

index.ts

let a;
console.log(`a = ${a}`);

a = 100;

万事うまくいく.また、キーボードショートカットまたは変更を保存するときにファイルをフォーマットするためにIDEのプラグインをインストールすることもできます.それではeslint用のスクリプトを追加しましょう.

"scripts": {
    "eslint": "./node_modules/.bin/eslint '**/*.{js,ts,tsx}'",
    "eslint:fix": "npm run eslint -- --fix",
    "format": "prettier-eslint '**/*.{js,ts,tsx}' --write"
},

新しいプロジェクトを開始するときの理想的なオプションは、すべてのプリンタを一度に設定することです.これは、既製のプロジェクトでそれらを実装しようとすると、エラーの数が多いことがわかります.
変更を保存する

git add .
git commit -m "Added ESLint and Prettier"
git push

前処理フック

私たちはeslingを構成し、手動で実行するスクリプトを作成しますが、コミットメントする前に自動的にこれを行うのが良いでしょう.このため、gitフックを使用することができます.Husky パッケージを実行する前にスクリプトを実行することができますgit commit , and Lint-staged パッケージでは、特定のフィルタでインデックスファイルのみをチェックできます.

npm i -D husky lint-staged

パッケージに戻る.JSONと次のコードを追加します

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.(js|jsx|ts|tsx)": [
      "npm run eslint:fix",
      "npm run format",
      "git add"
    ]
  },

各コミットの前に、eslintを実行し、すべての修正されたJSファイルとTSファイルのチェックを行います.
実験しましょうindex.ts 再度ファイル

var a;
console
  .log(`a = ${a}`);


a = 100;

このファイルをコミットに追加します.

git add index.ts
git commit -m "Testing pre-commit hook"

あなたが現在チェックするならばindex.ts ファイルが表示されたことがわかります🙂 変更を保存する前に、ファイルがチェックされ、必要に応じてフォーマットされます.これにより、リポジトリに該当するファイルの正当性を確認できます.

結論

すべての変更を保存しなければなりません.とその前にindex.ts ファイルは、我々は将来的にそれを必要としません.ファイルの作成.gitignore ここで、私たちは、このファイルを必要としません.

git add .
git commit -m "Added ESLint and Prettier"
git push

あなたは仕事の全体の結果を見ることができますrepository . プロジェクトの現在の状態は、マスターブランチです.個々の記事については、別のブランチを作成します.
私たちは、ここで止まります、あなたの注意のためにすべてをありがとう🖖

リンク

npm documentation
ESLint official website
Prettier-eslint
Prettier-eslint-cli
Prettier extension for VSCode
Husky
Lint-staged