一切从“手”开始：初探Create React App、Prettier、commitlint、自定义CRA

2023-10-23 06:39:15

作为一名前端开发人员，我们在创建新项目时，经常会遇到许多需要处理的琐碎事项，比如项目初始化、代码风格、提交信息规范等。这些任务虽然看似简单，但累积起来却会花费大量时间，而且如果不加以规范，还会影响项目质量和团队合作效率。

幸好，如今已经有很多工具可以帮助我们自动化这些任务，让我们把更多的时间和精力放在核心业务上。本文将介绍四种这样的工具：Create React App、Prettier、commitlint和自定义CRA。通过使用它们，我们可以从一开始就养成良好的编程习惯，并提高项目的整体质量。

Create React App：快速构建React项目

Create React App（CRA）是一个由Facebook开发的脚手架工具，可以帮助我们快速搭建React项目。它集成了Webpack、Babel、ESLint等多种工具，并提供了开箱即用的热更新功能。

使用CRA创建项目非常简单，只需在终端中执行以下命令即可：

npx create-react-app my-app

执行此命令后，CRA会自动创建一个新的React项目目录my-app。在这个目录下，已经包含了所有必要的代码和依赖项，我们可以直接开始开发。

Prettier：保持代码风格一致

Prettier是一个代码格式化工具，可以自动将我们的代码格式化为统一的风格。它支持多种编程语言，包括JavaScript、Python、Java等。

要使用Prettier，我们需要先安装它。我们可以使用以下命令在终端中安装全局的Prettier：

npm install --global prettier

安装完成后，我们可以在项目根目录下创建一个.prettierrc文件，并在其中配置Prettier的格式化规则。例如，我们可以将tabSize设置为2，并将useTabs设置为false，以使用空格而不是制表符来缩进代码：

{
  "tabWidth": 2,
  "useTabs": false
}

配置好Prettier后，我们就可以使用它来格式化代码了。我们可以使用以下命令在终端中格式化当前目录下的所有代码：

prettier --write .

Prettier会自动将所有代码格式化为我们指定的风格，并保存更改。

commitlint：规范提交信息

commitlint是一个提交信息校验工具，可以帮助我们规范提交信息。它可以检查提交信息的格式、内容，并阻止不符合规范的提交。

要使用commitlint，我们需要先安装它。我们可以使用以下命令在终端中安装全局的commitlint：

npm install --global commitlint

安装完成后，我们可以在项目根目录下创建一个.commitlintrc.js文件，并在其中配置commitlint的规则。例如，我们可以将type设置为可选，并将scope设置为必填项：

module.exports = {
  rules: {
    "type-enum": [2, "always", ["feat", "fix", "docs", "style", "refactor", "test", "chore"]],
    "scope-enum": [2, "always", ["component", "page", "util", "api"]],
  },
};

配置好commitlint后，我们就可以使用它来校验提交信息了。我们可以使用以下命令在终端中校验当前的提交信息：

commitlint --edit

commitlint会自动检查提交信息的格式和内容，并阻止不符合规范的提交。

自定义CRA：打造个性化开发环境

CRA虽然提供了开箱即用的开发环境，但我们也可以根据自己的需求对其进行自定义。例如，我们可以添加额外的依赖项、配置代理服务器、使用自定义的webpack配置等。

要自定义CRA，我们需要修改项目根目录下的package.json文件。我们可以添加额外的依赖项，并修改webpack配置。例如，我们可以添加axios依赖项，并在webpack配置中使用它：

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test"
  },
  "dependencies": {
    "axios": "^0.21.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2"
  },
  "webpack": {
    "module": {
      "rules": [
        {
          "test": /\.js$/,
          "exclude": /node_modules/,
          "use": {
            "loader": "babel-loader",
            "options": {
              "presets": ["@babel/preset-env", "@babel/preset-react"]
            }
          }
        }
      ]
    }
  }
}