介绍
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アプリが出来ます。
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 根据规则和您错过编码规则的部分指出代码中的错误。我认为使用我们伟大的前辈留下的规则很好。
首先，有名的 爱彼迎 是。
这是要安装的内容。
在终端中输入以下内容并按回车：
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 页面上的示例项目中复制配置文件。
链接项目的配置文件在这里。
将此覆盖到您当前的“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 测试库错误”
参考
eslint 插件测试库 eslint-plugin-jest-dom安装
在终端中输入以下内容并按回车：
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 ' );
});
测试通过。
现在您可以创建一个 React/TypeScript 开发环境。
原创声明：本文系作者授权爱码网发表，未经许可，不得转载;
原文地址：https://www.likecs.com/show-308628608.html
查看更多关于2022 年秋季版创建最新的 React/Typescript 开发环境的详细内容...