設定方法は次のプロジェクトに反応します.JS、タイプスクリプト、tslint、および冗談?
29298 ワード
CRA (Create-React-App) provides an easy way to start our React project. But there are still lots of things we can do to make the project more easy to develop. In this article, I will show you how I usually config my React project and explain what's the benefit of doing that.
我々が始める前に、一部の人々は、我々がなぜConfigプロジェクトでそんなに多くの時間を費やす必要があるかについて疑問に思っているかもしれません.我々はすでに例とボイラープレートのトンを持っている.我々は単にクローンとすぐにコーディングを開始することができます.
私は、適切にあなたのプロジェクトを設定する方法を理解するために少なくとも2つの利点があると信じています.まず、我々は必要な機能を選択することができますし、必要な任意の時間に置き換えます.第二に、これらのライブラリのいずれかをアップグレードする場合は、簡単になります.
次のようなフレームワークとライブラリが反応します.JSは、TypeScriptは、多くの素晴らしい機能を提供する新しいバージョンをリリースしてください.だから可能であれば、私は常に新しい機能を楽しむために私のプロジェクトの最新バージョンを適用しようとします.我々のプロジェクトの設定方法に精通している場合は、プロジェクトのフレームワーク/ライブラリをアップグレードすることが容易になります.
本稿では、これらの大きなフレームワーク/ライブラリをプロジェクトに適用する方法について説明します.レファレンス用のレポですreact-config . 各Gitコミットの変更を確認できます.
--
次。js
次は。JS ?
次.JSは、フレームワークのサポートSSR(サーバー側のレンダリング)と組み込みのルーティングシステム、CSSのCSSのような優れた機能の多く、アンプのサポート(加速されたモバイルページ)などの多くのです.
次に使用する方法。JS ?
( 1 )プロジェクトを作成します.
mkdir your-project-name
cd your-project-name
npm init -y
git init
.gitignore 次のコンテンツを使用します.node_modules
.next
npm install --save next react react-dom
package.json 次のスクリプトを追加します."scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
./pages/index.js 次のコンテンツを使用します.function HomePage() {
return <div>Welcome to Next.js!</div>
}
export default HomePage
npm run dev
次の長所と短所。JS ?
✅ SSR
SSRはSEOを向上させるだけではなく、カスタムレスポンスヘッダーやプロキシサードパーティAPIのようなサーバーで余分なものをするために多くの柔軟性をもたらします.
✅ 路線系統
私は次の方法が大好きです.JSはフォルダ構造でルーティングを扱います.これは、プロジェクトを理解しやすくなります.
✅ アンプのサポート
次.JSは、そう簡単にアンプを作ります.あなたが既に反応して、あなたのウェブサイトでアンプを実装したいならば.私は非常に次を使用してお勧めします.js
❌ ノード.JSサポート:
SSRをサポートしたいなら、ノードの下で適切にコードを実行できるようにする必要があります.js環境.これはエントリーバリアーを高めるかもしれません.
しかし、私たちの視点に基づいて、我々はフロントエンドフィールドにマスターしたい場合.必然的にノードに慣れなければならないでしょう.ある日.
❌ ホスティング
我々はサーバーをホストする必要があります、これは通常余分な手数料をもたらします.しかし、あなたがサーバーを必要としないならば、あなたは静的なHTMLを次にエクスポートすることができます.jsStatic HTML export .
--
タイプスクリプト
どのようなタイプですか？
TypeScriptは、JavaScriptの形式のスーパーセットです.まさに
prop-types 我々は、反応プロジェクトに申し込みました.しかし、私たちは、コンポーネント小道具だけでなく、すべてのJavaScriptコードでタイプチェックをすることができます.どのように入力スクリプトを使用する?
( 1 )インストール
npm install --save-dev typescript @types/react @types/node
tsconfig.json プロジェクトのルートのファイル:touch tsconfig.json
.js ファイル.ts/.tsx .(
.tsx JSXファイルを使用します..ts その他( 4 )ラン
next , 次.JSは自動的に更新されますtsconfig.json 必要なファイルを生成します.npm run dev
🔸[追加]インポートパス別名🔸
インポートパスを適用します.現在のファイルはどこにあるのか、どこにインポートしたいのかを心配する必要はありません.これはコピー＆ペーストのインポートの構文を作成し、ファイルを別のフォルダにはるかに簡単に移動します.
// Before
import App from '../components/App/App';
// After
import App from '@components/App/App';
npm install --save-dev babel-plugin-module-resolver
.babelrc 次のコンテンツを使用します.{
"presets": [["next/babel"]],
"plugins": [
[
"module-resolver",
{
"root": ["./"],
"alias": {
"@components": "./components"
}
}
]
]
}
tsconfig.json : "compilerOptions": {
...
"baseUrl": "./",
"paths": {
"@components/*": ["./components/*"]
}
},
TypesScriptの長所と短所？
✅ 静的チェック
コンパイル中の型チェックは多くの間違いを防ぐのに役立ちます.
✅ IntelliSenseとAutocomplete :
適切な型定義を使用すると、VSCodeは私たちに我々が使用できる正しい属性を教えても、私たちのために自動補完されます.
❌ 型定義:
適切に型を定義する方法を学ぶ必要があります.何かを変更したいときにファイルを変更する必要があります.
--
リンター
何がLinterですか？
Linterは、我々のコードをデバッグするのに役立つツールです.これは一般的な問題とエラーのコードをスキャンします.次に、行番号とルール違反のルールを提供します.
*更新プログラム2020/05/29 : TTLINTを廃止しました.もし新しいプロジェクトを起動しているなら、代わりにeslintを使うべきです.ありがとう
's mention. 実施する
eslint 我々のプロジェクトにnpx eslint --init その後、ステップに従ってください.https://github.com/palantir/tslint/issues/4534
どのようにLinterを使用して起動するには？
( 1 )インストール
npm install --save-dev tslint tslint-config-airbnb
tslint.json 次のコンテンツを使用します.{
"extends": ["tslint-config-airbnb", "tslint-react-hooks"],
"rules": {
"import-name": false,
"align": false,
"function-name": [
true,
{
"function-regex": "^[a-zA-Z$][\\w\\d]+$",
"method-regex": "^[a-z$][\\w\\d]+$",
"private-method-regex": "^[a-z$][\\w\\d]+$",
"protected-method-regex": "^[a-z$][\\w\\d]+$",
"static-method-regex": "^[a-z$][\\w\\d]+$"
}
],
"variable-name": {
"options": ["ban-keywords", "check-format", "allow-leading-underscore", "allow-pascal-case"]
}
}
}
package.json : "scripts": {
...
"tslint": "tslint -p . -c tslint.json"
},
tslint コードを確認するnpm run tslint
🔸［追加］Tslintはフックを反応させる🔸
あなたのプロジェクトに反応フックを使用している場合.これは私たちがそれを使用しているときにいくつかのミスを防ぐことができます.
( 1 )インストール
npm install --save-dev tslint-react-hooks
tslint.json :{
"extends": ["tslint-config-airbnb", "tslint-react-hooks"],
"rules": {
...
"react-hooks-nesting": true
}
}
🔸追加🔸
手動で修正
tslint エラーは退屈かもしれません.そこで、いくつかの形式のエラーを自動的に修正するのに役立つことができます.( 1 )インストール
npm install --save-dev prettier
package.json : "prettier": {
"singleQuote": true,
"trailingComma": "es5",
"printWidth": 120
},
./.vscode/settings.json 次のコンテンツを使用します.{
"editor.formatOnSave": true
}
🔸更なるハスキー🔸
手動でリンターを実行するので、効率的であり、忘れやすいです.だから我々は適用することができます
husky gitフックでリンタをトリガーする.( 1 )インストール
npm install --save-dev husky
package.json :{
...
"husky": {
"hooks": {
"pre-commit": "npm run tslint"
}
}
...
}
tslint コードを検証するにはLinterの長所と短所？
✅ エラーを防ぐ:
リンターは、いくつかの一般的な間違いを防ぐことができます.
✅ 保守性
Linterは適切な形式と命名を使用して読みやすいコードを生成し、コードを維持しやすくします.
❌ 適切なルール
すべてのルールは誰にとっても適していない.我々と私たちのチームメイトのための最良の設定を把握するために時間を費やす必要があります.
--
ジェスト＆酵素
どのようなジェスト＆酵素？
Jest JavaScriptのテストフレームワークです.Enzyme JavaScriptのテストユーティリティを使用すると、反応コンポーネントの出力をテストすることが容易になります.それらの両方を組み合わせて、我々は我々のコードを我々が予想したものとして動作することを確認するために我々のプロジェクトのテストを実装することができます.
どのようにJest＆酵素を使用して起動するには？
( 1 )インストール
npm install --save-dev jest enzyme enzyme-adapter-react-16 babel-jest @types/jest @types/enzyme
./config/setup.js 次のコンテンツを使用します.const enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');
enzyme.configure({ adapter: new Adapter() });
./jest.config.js 次のコンテンツを使用します.module.exports = {
roots: ['<rootDir>'],
moduleFileExtensions: ['js', 'ts', 'tsx', 'json'],
setupFiles: ['<rootDir>/config/setup.js'],
testPathIgnorePatterns: ['<rootDir>[/\\\\](build|docs|node_modules|.next)[/\\\\]'],
transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(ts|tsx)$'],
testEnvironment: 'jsdom',
testURL: 'http://localhost',
transform: {
'^.+\\.(ts|tsx)$': 'babel-jest',
},
testRegex: '/__tests__/.*\\.(test|spec)\\.tsx?$',
};
pages/__tests__/index.test.tsx 次のコンテンツを使用します.import React from 'react';
import { mount } from 'enzyme';
import Index from '../index';
describe('index page', () => {
it('should have App component', () => {
const subject = mount(<Index />);
expect(subject.find('App')).toHaveLength(1);
});
});
package.json : "scripts": {
...
"test": "jest"
},
npm run test
🔸JSONへの酵素🔸
スナップショットを読みやすくします.
インストール
enzyme-to-json :npm install --save-dev enzyme-to-json
jest.config.js :module.exports = {
...
snapshotSerializers: ['enzyme-to-json/serializer'],
};
🔸Jestウォッチタイプ🔸
フィルタリング中にマッチテストを表示します
Jest時計モードの下のテスト.
( 1 )インストール
npm install --save-dev jest-watch-typeahead
jest.config.js :module.exports = {
...
watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
};
🔸[追加]リント🔸
git stageファイルのテストとリントを実行します.
( 1 )インストール
npm install --save-dev lint-staged
package.json :PS .ここでも追加
prettier and tslint into lint-staged プリコミットフックによるパイプラインとトリガ.{
...
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.+(ts|tsx)": [
"prettier --write",
"git add",
"jest --findRelatedTests",
"tslint"
]
},
}
ジェス＆酵素の長所と短所？
✅ 信頼性:
私たちは
Jest & Enzyme すべての種類のシナリオが予想通りに動作するようにするまで、私たちのコードをテストします.これは手動でテストを行うために私たちの時間を節約することができますまた、リファクタリングを容易にします.✅ 保守性
適切なテストケースでは、人々は各機能とコンポーネントの目的を理解しやすくなります.
❌ を使用します.
時々、我々はあまりにも多くの不必要なテストを作成して、コードを維持するのがより難しくするかもしれません.
結論
一部の人々は圧倒されるかもしれません、そして、それはちょうど始まりです.すべての構成を終えた後に、私たちは、まだ上記のすべてのフレームワーク/ライブラリに慣れるために、何時間も費やさなければなりません.
それは最初に厳しいですが.しかし、一旦我々が彼らに慣れるならば.それは間違いなくコーディングをはるかに簡単になり、また、保全可能なコードを生成することができます.
あなたが我々がどのように我々のプロジェクトを設定することができるかについてのどんな提案があるならば.もっと学びたいです.お気軽にコメントを残してください.読書ありがとう.
--
リファレンス
Reference
この問題について(設定方法は次のプロジェクトに反応します.JS、タイプスクリプト、tslint、および冗談?), 我々は、より多くの情報をここで見つけました https://dev.to/oahehc/how-to-config-react-project-with-next-js-typescript-tslint-and-jest-11l0テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol