2022 年秋季版创建最新的 React/Typescript 开发环境

介绍

CRA（Create React APP）经常被用作React开发环境，但是由于要检查很多模块的一致性，CRA更新和更新之间有相当多的间隔。

此外，更新使用的模块可能会受到错误的困扰。

我是从零开始搭建一个 React 开发环境，但经过反复试验，我确定了以下方法。

您可以在相对较短的时间内创建一个环境，并且您可以使用所有最新的模块。

维特

使用 nodejs 的 JavaScript 项目需要一个称为捆绑的过程，该过程使用 Webpack 等将项目中的 JavaScript 模块组合成单个文件。

这样做是为了避免浏览器不支持 ES 模块，并且从一个 HTML 文件下载大量 js 文件需要访问相同数量的文件，这将需要很长时间才能执行。。

换句话说，专注于效率。

但随着项目规模的增长，捆绑时间增加，即使使用热重载，也需要一定的时间才能渲染，开发效率下降。

维特提前在“node_modules/.vite”中创建几个bundle文件，使用对已经丢失IE的现代浏览器的ES模块的支持，通过并行下载多个文件来加速。。

开始一个项目很容易。在终端中输入“npm create vite@latest”，然后按回车键。

你会被问到一个问题，所以我会回答它。

npm create vite@latest

// プロジェクト名を入力しエンターキー
? Project name: › vite-project

// 使用するフレームワークを矢印キーで選択しエンターキー
? Select a framework: › - Use arrow-keys. Return to submit.
❯   Vanilla
Vue
React
Preact
Lit
Svelte

// JavaScript/TypeScriptの選択
? Select a variant: › - Use arrow-keys. Return to submit.
JavaScript
❯   TypeScript

// 以上でプロジェクト完了
Done. Now run:

现在项目已经完成，让我们检查一下操作。在终端中键入以下命令，然后按 enter。

// プロジェクトフォルダへ移動
cd vite-project
// 必要なパッケージをインストール
npm install
// デバッグ開始
npm run dev

VITE v3.1.6  ready in 439 ms

➜  Local:   [http://127.0.0.1:5173/](http://127.0.0.1:5173/)
➜  Network: use --host to expose

打开浏览器并点击http://127.0.0.1:5173」へアクセス。これだけでReactアプリが出来ます。

2022年秋版　最新React/Typescript開発環境の作成

ESlint

安装根据设置规则指出并纠正代码输入错误的“Eslint”。

安装 ESlint

在终端中输入以下内容并按回车：

 npm install -D eslint

ESlint 安装现已完成。

创建 ESlint 配置文件

在终端中输入“npx eslint --init”，然后按回车键。

你会被问到一个问题，我会一一回答。

 npx eslint --init

// ESlintをどのように使いますか？
You can also run this command directly using 'npm init @eslint/config'.
? How would you like to use ESLint? …
To check syntax only
> To check syntax and find problems
To check syntax, find problems, and enforce code style

// どのタイプのモジュールを使いますか？
? What type of modules does your project use? …
> JavaScript modules (import/export)
CommonJS (require/exports)
None of these

// どのフレームワークを使いますか？
? Which framework does your project use? …
> React
Vue.js
None of these

// プロジェクトでTypeScriptを使いますか？
Does your project use TypeScript? › No / Yes

// どの環境で動作させますか？
? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
  Node

// どのフォーマットで設定ファイルを保存しますか？
? What format do you want your config file to be in? …
JSON
> JavaScript
YAML

// 以下のパッケージをインストールしますか？
eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now? › No / >Yes

// パッケージマネージャーを選択してください。
? Which package manager do you want to use? …
> npm
yarn
pnpm

这将安装具有依赖项的包并在您的项目文件夹中创建一个“.eslint.cjs”文件。

检查当前规则

检查当前配置文件中应用了哪些规则。

npx eslint --print-config .eslintrc.cjs > 出力ファイル名.txt

如果你添加了一个插件什么的，你可以通过将它添加到“extends”然后再次输出并查看差异来检查添加了哪些规则。

安装airbnb配置文件

ESlint 根据规则和您错过编码规则的部分指出代码中的错误。我认为使用我们伟大的前辈留下的规则很好。

首先，有名的爱彼迎是。
2022年秋版　最新React/Typescript開発環境の作成

这是要安装的内容。

在终端中输入以下内容并按回车：

npx install-peerdeps --dev eslint-config-airbnb

由于项目是 TypeScript，我们还要为 TypeScript 安装 airbnb。

npm install -D eslint-config-airbnb-typescript

更改配置文件 (.eslintrc.cjs)。下面是修正版。您在配置文件中的扩展中看到的是一堆规则。如果有相同的设置，会被后面加载的那个覆盖。

读取extends中的规则后，会读取该配置文件中的“rules:”。

将“项目：'./tsconfig.json'”添加到 parserOptions。

extends: [
  'airbnb',
  'airbnb-typescript',
  'airbnb/hooks'
  'plugin:react/recommended',
  'plugin:@typescript-eslint/recommended'
],
parserOptions: {
  ecmaVersion: 'latest',
  sourceType: 'module',
  project: './tsconfig.json'
}

最后，将 ESlint 配置文件添加到“./tsconfig.json”的“include:”中。

 "include": ["src", ".eslintrc.cjs"],

更漂亮

Prettier 是一个格式化工具。

将制表符转换为空格
确定标签宽度
统一双引号和单引号
句末有或没有分号

等等，保存的时候可以格式化。有些功能和 ESlint 是重复的，所以用插件来调整。

在终端中输入以下内容，然后按 Enter。

npm install -D prettier eslint-config-prettier eslint-plugin-prettier

更漂亮的配置文件

Prettier 的配置文件是

在 package.json 中写入“prettier”键。
采用 JSON 或 YAML 格式，文件名为“prettierrc”。
.prettierrc.json .prettierrc.yml .prettierrc.yaml .prettierrc.json5 之一。
任何 .prettierrc.js .prettierrc.cjs prettier.config.js prettier.config.cjs 使用 module.export。
.prettierrc.toml

使用任一

我的设置是

.prettierrc 中的 JSON 格式。

{
  "trailingComma": "es5",
  "printWidth": 100,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

配置选项在以下页面上。

另外，请参考以下页面使用 ESlint 进行调整。

在“.eslintrc.cjs”中

将“插件：漂亮/推荐”添加到扩展
为插件添加“更漂亮”。

维泰斯特

vites 是 vite 项目的测试环境。我觉得它比 Jest 快得多。

要安装，请在终端中输入以下命令，然后按 Enter。

npm install -D vitest

config文件可以写在vite config文件中，也可以单独写。

这次，从 vitest 页面上的示例项目中复制配置文件。

2022年秋版　最新React/Typescript開発環境の作成

链接项目的配置文件在这里。

将此覆盖到您当前的“vite.config.ts”。

将其添加到“package.json”中的“scripts”中，以便该命令可以启动测试。

"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "test": "vitest"
  },

tsconfig.json

如果你做到这一点，eslint 会指出这一点。

.eslint.cjs
vite.config.ts

到 tsconfig.json 的“包含”。

测试库

该项目是反应。所以要测试一个 React 组件，我们需要渲染它。

所以我使用“测试库/反应”。另外，另外

用于绘图的“jsdom”
“testing-library/user-event”用于用户操作，例如单击
断言扩展 'testing-library/jest-dom'

也会安装。

在终端中输入以下内容并按回车：

npm install --D @testing-library/react jsdom @testing-library/user-event @testing-library/jest-dom

如何成功使用 vitest 和 jest-dom

诀窍是每次创建测试文件时导入由 jest-dom 扩展的断言。

参照此处创建“src/setupTest.ts”，并编写以下内容。

import matchers from '@testing-library/jest-dom/matchers';
import { expect } from 'vitest';

expect.extend(matchers);

笔记

复制到 vite.config.ts
设置文件：['./src/setup.ts']
↓
设置文件：['./src/setupTest.ts']

不要忘记将其更改为

这样就完成了测试环境的创建。

更方便

“常见的 React 测试库错误”

参考

安装

在终端中输入以下内容并按回车：

npm install -D eslint-plugin-testing-library eslint-plugin-jest-dom

修改 .eslintrc.cjs

请参考以上两个插件的页面进行修改。

这是最终的“.eslintrc.cjs”。

从 17 开始不再需要“import React from 'react'”，但是由于 eslint 生气了，我加了一条规则。

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    'plugin:testing-library/react',
    'plugin:jest-dom/recommended',
  ],
  overrides: [],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: './tsconfig.json',
  },
  plugins: ['react', '@typescript-eslint', 'prettier', 'testing-library', 'jest-dom'],
  rules: {
   'react/react-in-jsx-scope': 'off',
 },
};

顺便说一句，“tsconfig.json”。

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src", ".eslintrc.cjs", "vite.config.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

测试一下。

如开头所示，在我创建的环境中，按钮说“count is 0”，点击按钮增加数字。

为这个页面写一个测试。

查看页面时是否有任何按钮显示“计数为 0”？
用户单击按钮。

计数后按钮是否显示“count is 1”？

尝试

创建一个“src/App.test.tsx”文件。

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import App from './App';

test('should first', async () => {
  // Appコンポーネントを描画
  render(<App />);

　// テキスト「count is」を持っているボタンを検索
  let button = screen.getByRole('button', { name: /count is/i });
　// 検索したボタンのテキストが「count is 0」を確認
  expect(button).toHaveTextContent('count is 0');

　// イベントを発火するユーザをセット
  const user = userEvent.setup();
  // 上記の検索したボタンをクリック
  await user.click(button);
　
　// 再描画されたボタンを取得 取得には正規表現も使えます。
  button = await screen.findByRole('button', { name: /count is d/ });
　// 取得したボタンのテキストを確認
  expect(button).toHaveTextContent('count is 1');
});

测试通过。

2022年秋版　最新React/Typescript開発環境の作成

现在您可以创建一个 React/TypeScript 开发环境。

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308628608.html