如何使用 Next.js、Typescript、TSLint 和 Jest 配置 React 项目？

2025-06-10

如何使用 Next.js、Typescript、TSLint 和 Jest 配置 React 项目？

CRA（Create-React-App）提供了一种轻松启动 React 项目的方法。但我们仍然可以做很多事情来让项目开发更容易。在本文中，我将向您展示我通常如何配置我的 React 项目，并解释这样做的好处。

在开始之前，有些人可能会想，为什么我们需要花这么多时间来配置项目。我们已经有大量的示例和样板。我们可以简单地克隆并立即开始编码。
我认为了解如何正确配置项目至少有两个好处。首先，我们可以选择所需的功能并随时替换它们。其次，如果我们想要升级其中任何一个库，都会更容易。React
、Next.js 和 Typescript 等框架和库不断发布新版本以提供许多很棒的功能。因此，如果可能的话，我总是尝试在项目中应用最新版本以享受新功能。如果我们熟悉如何配置项目，那么升级项目中的框架/库将更加容易。

在本文中，我将解释如何将这些优秀的框架/库应用到我们的项目中。以下是供参考的仓库 - react-config。您可以在每次 git 提交中检查更改。
反应配置

--

Next.js

啥Next.js？

Next.js 是一个 React 框架，支持 SSR（服务器端渲染）和许多强大的功能，如内置路由系统、CSS-in-JS 和 AMP 支持（加速移动页面）等。

如何开始使用Next.js？

（1）、创建文件夹并初始化项目：

mkdir your-project-name
cd your-project-name
npm init -y
git init
Enter fullscreen mode Exit fullscreen mode

（2）.创建.gitignore以下内容：

node_modules
.next
Enter fullscreen mode Exit fullscreen mode

（3）。安装：

npm install --save next react react-dom
Enter fullscreen mode Exit fullscreen mode

（4）.打开package.json并添加以下脚本：

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}
Enter fullscreen mode Exit fullscreen mode

（5）.创建./pages/index.js以下内容：

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage
Enter fullscreen mode Exit fullscreen mode

（6）.启动本地Web服务器：

npm run dev
Enter fullscreen mode Exit fullscreen mode

（7）、访问http://localhost:3000查看你的应用程序。

优点和缺点Next.js？

✅ SSR：
SSR 不仅可以改善 SEO，还为我们带来了很大的灵活性，可以在服务器上执行额外的操作，例如自定义响应头和代理第三方 API 以防止暴露令牌。✅
路由系统：
我喜欢 Next.js 按文件夹结构处理路由的方式。这使项目更容易理解。✅
AMP 支持：
Next.js 使实现 AMP 变得如此简单。如果你已经熟悉 React 并希望在你的网站上实现 AMP。我强烈建议你尝试使用 Next.js。❌
Node.js 支持：
如果我们想要支持 SSR，我们必须确保我们的代码可以在 Node.js 环境下正确执行。这可能会提高进入门槛。
但根据我的观点，如果我们想精通前端领域。我们总有一天必须熟悉 Node.js。❌
托管：
我们必须托管服务器，这通常会带来额外的费用。但如果你不需要服务器，你仍然可以在 Next.js 上导出静态 HTML -静态 HTML 导出。

--

打字稿

啥Typescript？

TypeScript 是 JavaScript 的类型超集，可以编译为纯 JavaScript。就像prop-types我们以前在 React 项目中使用的那样。但我们不仅可以对组件的 props 进行类型检查，还可以对所有 JavaScript 代码进行类型检查。

如何开始使用Typescript？

（1）。安装：

npm install --save-dev typescript @types/react @types/node
Enter fullscreen mode Exit fullscreen mode

tsconfig.json（2）.在项目根目录中创建一个空文件：

touch tsconfig.json
Enter fullscreen mode Exit fullscreen mode

（3）. 将.js文件改为.ts/.tsx.
（.tsx对于使用 JSX 的文件，.ts对于其余部分）

（4）运行next，Next.js 会自动更新tsconfig.json并生成我们需要的文件：

npm run dev
Enter fullscreen mode Exit fullscreen mode

🔸[附加]导入路径别名🔸

应用导入路径别名允许我们使用绝对路径导入文件。这样我们就不必担心当前文件在哪里，以及要导入的目标文件在哪里。这将使复制粘贴导入语法以及将文件移动到不同文件夹变得更加容易。

// Before
import App from '../components/App/App';

// After
import App from '@components/App/App';
Enter fullscreen mode Exit fullscreen mode

（1）。安装

npm install --save-dev babel-plugin-module-resolver
Enter fullscreen mode Exit fullscreen mode

（2）.创建.babelrc以下内容：

{
  "presets": [["next/babel"]],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./"],
        "alias": {
          "@components": "./components"
        }
      }
    ]
  ]
}
Enter fullscreen mode Exit fullscreen mode

（3）. 在 中添加以下内容tsconfig.json：

  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
      "@components/*": ["./components/*"]
    }
  },
Enter fullscreen mode Exit fullscreen mode

优点和缺点Typescript？

✅ 静态类型检查：
编译期间的类型检查可以帮助我们避免很多错误。✅ 智能感知和自动完成： 有了正确的类型定义，VScode 会告诉我们可以使用的正确属性，甚至会自动完成。❌ 类型定义： 我们需要学习如何正确地定义类型。而且，当我们想要更改某些内容时，我们不得不修改更多文件。
类型检查


智能感知

--

棉绒

啥Linter？

Linter 是一个帮助我们调试代码的工具。它会扫描代码中常见的问题和错误，然后提供行号和我们违反的规则等信息。
eslint

*更新于 2020/05/29：Tslint 已弃用，如果您要启动新项目，请改用 eslint。感谢@n00nietzsche的提及。要eslint在我们的项目中实现，只需使用 eslint，npx eslint --init然后按照步骤操作即可。https
://github.com/palantir/tslint/issues/4534

如何开始使用Linter？

（1）。安装：

npm install --save-dev tslint tslint-config-airbnb
Enter fullscreen mode Exit fullscreen mode

（2）.添加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"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

（3）. 添加以下脚本package.json：

  "scripts": {
    ...
    "tslint": "tslint -p . -c tslint.json"
  },
Enter fullscreen mode Exit fullscreen mode

（4）.运行tslint验证我们的代码

npm run tslint
Enter fullscreen mode Exit fullscreen mode

🔸[附加] tslint-react-hooks🔸

如果你在项目中使用了 React hook，这可以帮助我们避免使用过程中的一些错误。

（1）。安装：

npm install --save-dev tslint-react-hooks
Enter fullscreen mode Exit fullscreen mode

（2）. 更新tslint.json：

{
  "extends": ["tslint-config-airbnb", "tslint-react-hooks"],
  "rules": {
   ...
    "react-hooks-nesting": true
  }
}
Enter fullscreen mode Exit fullscreen mode

🔸[附加]更漂亮🔸

手动修复所有tslint错误可能很繁琐。所以我们可以使用 Prettier 来自动修复一些格式错误。

（1）。安装：

npm install --save-dev prettier
Enter fullscreen mode Exit fullscreen mode

（2）. 在 中添加以下内容package.json：

  "prettier": {
    "singleQuote": true,
    "trailingComma": "es5",
    "printWidth": 120
  },
Enter fullscreen mode Exit fullscreen mode

（3）.创建./.vscode/settings.json以下内容：

{
  "editor.formatOnSave": true
}
Enter fullscreen mode Exit fullscreen mode

🔸[附加] 哈士奇🔸

由于手动执行 linter 效率低且容易忘记，因此我们可以尝试husky使用 Git hook 来触发 linter。

（1）。安装：

npm install --save-dev husky
Enter fullscreen mode Exit fullscreen mode

（2）. 在 中添加以下内容package.json：

{
  ...
  "husky": {
    "hooks": {
      "pre-commit": "npm run tslint"
    }
  }
  ...
}
Enter fullscreen mode Exit fullscreen mode

（3）现在，当我们执行 git commit 时，它将触发tslint验证我们的代码。

优点和缺点Linter？

✅ 预防错误：
Linter 可以帮助我们预防一些常见错误。✅
可维护性：
Linter 强制我们使用正确的格式和命名，以生成可读且易于维护的代码。❌
配置合适的规则：
并非所有规则都适合所有人。我们需要花时间找到最适合我们和团队成员的设置。

--

笑话与酶

啥Jest & Enzyme？

Jest是一个 JavaScript 测试框架。Enzyme是一个用于 React 的 JavaScript 测试实用程序，可以更轻松地测试 React 组件的输出。
结合两者，我们将能够在项目中实施测试，以确保代码能够按预期运行。

如何开始使用Jest & Enzyme？

（1）。安装：

npm install --save-dev jest enzyme enzyme-adapter-react-16 babel-jest @types/jest @types/enzyme
Enter fullscreen mode Exit fullscreen mode

（2）.创建./config/setup.js以下内容：

const enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');

enzyme.configure({ adapter: new Adapter() });
Enter fullscreen mode Exit fullscreen mode

（3）.创建./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?$',
};
Enter fullscreen mode Exit fullscreen mode

（4）.创建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);
  });
});
Enter fullscreen mode Exit fullscreen mode

（5）. 添加以下脚本package.json：

  "scripts": {
    ...
    "test": "jest"
  },
Enter fullscreen mode Exit fullscreen mode

（6）运行单元测试

npm run test
Enter fullscreen mode Exit fullscreen mode

笑话

🔸[附加] 酶到 JSON🔸

格式化快照以使其更易读。

（1）安装enzyme-to-json：

npm install --save-dev enzyme-to-json
Enter fullscreen mode Exit fullscreen mode

（2）在 中添加以下内容jest.config.js：

module.exports = {
  ...
  snapshotSerializers: ['enzyme-to-json/serializer'],
};
Enter fullscreen mode Exit fullscreen mode

🔸[附加] jest-watch-typeahead🔸

当我们
在 jest 监视模式下过滤测试时显示匹配测试。
jest-watch-typeahead

（1）。安装：

npm install --save-dev jest-watch-typeahead
Enter fullscreen mode Exit fullscreen mode

（2）. 在 中添加以下内容jest.config.js：

module.exports = {
  ...
  watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
};
Enter fullscreen mode Exit fullscreen mode

🔸[附加] lint-staged🔸

对 git 暂存文件运行测试和 linter。

（1）。安装：

npm install --save-dev lint-staged
Enter fullscreen mode Exit fullscreen mode

(2). 在 中添加以下内容package.json：
ps. 这里我们也将prettier和添加tslint到lint-stagedpipeline中，并通过pre-commit hook触发。

{
  ...
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.+(ts|tsx)": [
      "prettier --write",
      "git add",
      "jest --findRelatedTests",
      "tslint"
    ]
  },
}
Enter fullscreen mode Exit fullscreen mode

优点和缺点Jest & Enzyme？

✅ 可靠性：
我们可以用Jest & Enzyme它来测试代码，直到各种场景都达到预期效果。这可以节省我们手动测试的时间，也更容易进行重构。✅
可维护性：
有了合适的测试用例，人们更容易理解每​​个函数和组件的用途。❌
可能过度使用：
有时我们可能会创建太多不必要的测试，使代码更难维护。

结论

有些人可能会感到不知所措，但这仅仅是个开始。完成所有这些配置后，我们仍然需要花费大量时间来熟悉上面提到的所有框架/库。
虽然一开始会很困难，但一旦我们熟悉了它们，它肯定会使编码变得更加容易，并且让我们能够编写出可维护的代码。
如果您对如何配置我们的项目有任何建议，我很乐意学习更多。请随时留下您的评论。感谢您的阅读。

--

参考

鏂囩珷鏉ユ簮锛�https://dev.to/oahehc/how-to-config-react-project-with-next-js-typescript-tslint-and-jest-11l0
Devto 翻译
PREV
如何使用纯 CSS 在您的网站上启用暗模式？
NEXT
只需 7 行 node.js 代码，即可使用 NocoDB 将任何数据库转换为类似 Airtable 的电子表格！NocoDB，Airtable 的开源替代方案，加入我们的社区，安装