react 项目框架的搭建(一)

1.下载和安装create-react-app facebook 提供的基础手脚架

在本地新建一个文件夹，然后启动powershell,敲

yarn create react-app my-app --template typescript

如果安装失败，应该就是墙的问题。这时可以考虑切换npm的源。

npm config set registry https://registry.npm.taobao.org

create-react-app 安装好后，进入my-app 文件夹，运行整个项目，如果运行是有报某块模块找不到，可以通过yarn add xxx 安装，然后再yarn start 启动整个项目。create-react-app 整个手脚架的文件夹结构如下：
my-app
├── README.md
├── node_modules
├── package.json
├── yarn.lock
├── .npmrc
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.tsx
├── App.test.tsx
├── index.css
├── index.tsx
├── logo.svg
└── reportWebVitals.ts
└── setupTests.ts

2. 添加辅助模块

常用的辅助模块包括：eslint prettier husky lint-staged typescript craco stylelint

2.1 安装eslint

yarn add eslint -D

创建eslint的配置文件，敲下面的指令，然后根据自己的情况选择对应的选项。(ps:选择airbnb ，后续会出现很多问题需要单独处理，这了我推荐使用standard)

./node_modules/.bin/eslint --init

这里我们选择取消npm 安装对应的包，统一使用用yarn 安装，方便包的统一管理。

yarn add eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint@^7.12.1 eslint-plugin-import@^2.22.1 eslint-plugin-node@^11.1.0 eslint-plugin-promise@^4.2.1 @typescript-eslint/parser@latest  -D

这里还需要补充下 eslint-import-resolver-alias，解决import/unresolver 的报错。
init 后，在根目录下会安装有.eslintrc 的文件，里面的配置内容如下：

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:react/recommended",
        "standard"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
};

然后补上一些esliint 官网推荐的扩展和插件及取消掉平常开发用起来很不舒服的一些规则。同时安装对react-hooks 校验支持的插件eslint-plugin-react-hooks

yarn add eslint-plugin-react-hooks -D

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
       
        "plugin:react-hooks/recommended",
        "standard"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint",
        "react-hooks"
    ],
    "rules": {
        "react-hooks/rules-of-hooks": "error",
        "react-hooks/exhaustive-deps": "warn",
        "react/no-unsafe": [
          "error",
          {
            "checkAliases": true
          }
        ],
        "react/self-closing-comp": "warn",
        "react/sort-comp": [
          "error",
          {
            "order": [
              "static-methods",
              "instance-variables",
              "lifecycle",
              "everything-else",
              "rendering"
            ]
          }
        ],
        "react/prop-types": "off",
        "@typescript-eslint/no-useless-constructor": "error",
        "@typescript-eslint/array-type": "error",
        "@typescript-eslint/ban-types": "error",
        "@typescript-eslint/no-array-constructor": "error",
        "@typescript-eslint/naming-convention": [
          "error",
          { "selector": "variable", "format": ["camelCase", "UPPER_CASE","PascalCase"] }
        ],
        "@typescript-eslint/no-use-before-define": "error",
        "getter-return": "off",
        "no-dupe-args": "off",
        "no-dupe-keys": "off",
        "no-unreachable": "off",
        "valid-typeof": "off",
        "no-const-assign": "off",
        "no-new-symbol": "off",
        "no-this-before-super": "off",
        "no-undef": "off",
        "no-dupe-class-members": "off",
        "no-redeclare": "off",
        "no-unused-vars": "off",
        "no-var": "error",
        "no-use-before-define": "off",
        "no-console": "warn",
        "prefer-rest-params": "error",
        "prefer-spread": "error",
        "prefer-const": "error",
        "no-empty-function": "error",
        "eqeqeq": "off",
        "array-callback-return": "warn",
        "default-case": "error",
        "no-shadow": "warn",
        "no-return-await": "error",
        "no-await-in-loop": "error",
        "require-await": "error",
        "generator-star-spacing": ["warn", "after"],
        "yield-star-spacing": ["warn", "after"],
        "spaced-comment": ["warn", "always", { "markers": ["/"] }] ,
        "semi": ["error", "always", { "omitLastInOneLineBlock": true }] ,
    }
};

2.2 安装 prettier

yarn add  prettier eslint-plugin-prettier eslint-config-prettier -D

安装好后在更目录下面新建一个.prettierrc 的文件，里面配置上一些代码格式的规则

{
  "trailingComma": "all",
    "tabWidth": 2,
    "semi": true,
    "singleQuote": true,
    "endOfLine": "auto",
    "printWidth": 100,
    "arrowParens": "always",
    "useTabs": false,
    "overrides": [
        {
            "files": "*.md",
            "options": {
                "tabWidth": 2
            }
        }
    ]
}

然后调整eslintrc.js 里面的插件配置，其他配置不变修改下面的extends、plugins、rules：

module.exports = {

  extends: [..., 'prettier'],
  plugins: [..., 'prettier'],
  rules: {
     ...,
    'prettier/prettier': 'error',
  },
};

2.3 安装stylelint

stylelint 官网有推荐的一些常用社区模块，安装stylelint时同时一块安装好这些模块包。全部安装完，在根目录上新建.stylelintrc.json，写上相关的配置项。

yarn add stylelint stylelint-config-standard stylelint-config-css-modules stylelint-config-rational-order stylelint-config-prettier  -D
yarn add stylelint-order stylelint-scss -D

{
    "extends": [ "stylelint-config-standard",
      "stylelint-config-css-modules",
      "stylelint-config-rational-order",
      "stylelint-config-prettier"],
    "plugins": ["stylelint-scss","stylelint-order"],
    "rules": {
    "no-descending-specificity": null,
    "at-rule-no-unknown": null
    }
}

2.4 安装 husky 和lint-staged

yarn add husky lint-staged -D

在package.json 配置对应的配置

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.{scss,less,css}": [
      "stylelint --fix",
      "git add"
    ],
    "src/**/*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "git add"
    ],
    "**/*.{json,ts,tsx,js,jsx,md,scss,less,css,html}": [
      "prettier --write",
      "git add"
    ]
  },

2.5 typescript

typescript 是微软提供的代码校验包，里面有详细的教程。最简单的方便的安装步骤，全局安装typescript 包，然后用tsc 指令生成config 文件，最后再更加自己的需求开启或关闭部分配置项。

yarn global add typescript

tsc -v  查看版本
tsc --init 生成配置文件

生成默认的配置文件后，更加项目需求和自己的编程习惯调整，ts 的配置，项目运行前，记得在本地项目添加typescript 包。记得本地项目也需要安装下typesript 包

yarn add typescript -D

配置如下

{
  "compilerOptions": {

    "baseUrl": ".",
    "target": "es6",
    "lib": [
      "dom",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "noUnusedLocals": true
  },
  "include": [
    "src",
    "@types"
  ],
  "exclude": [
   // "src/components/react-leaflet/*"
  ],
 // "extends": "./tsconfig.paths.json"
 }

运行代码前先需要配置.eslintingore ，忽略掉所有的js 文件的ts校验。
最后运行yarn start 。这样搭建项目框架的第一步就完成了。
文章内容偶尔会根据后面代码运行的情况进行调整。

框架搭建的初版思路来源于同事的githubs: https://github.com/dobble11/epee-react-admin-ts。感兴趣的可以去研究下他的代码。
因为墙的问题githubs，提交代码老是失败，今天终于提交成功了。
我的代码库地址：https://github.com/BokeChen/react-components-collection
参考网站：
1.https://eslint.bootcss.com/docs/user-guide/getting-started
2.https://www.jianshu.com/p/d6a69eb08f07
3.https://segmentfault.com/a/1190000009546913
4.https://stylelint.io/user-guide/get-started
5.https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html
6.https://www.cnblogs.com/huliang56/p/11933938.html
7.https://typicode.github.io/husky/#/
8.https://blog.csdn.net/csdn_yudong/article/details/106884274
9.https://github.com/typescript-eslint/typescript-eslint/releases/tag/v3.0.0
10.https://www.npmjs.com/package/@typescript-eslint/eslint-plugin