从零开始搭建react + ts前端开发框架

一. 添加typescript 

    用 yarn create react-app my-app --typescript 创建基础项目，

　用 yarn add typescript @types/node @types/react @types/react-dom @types/jest 添加typescript，

　将所有的js文件改为ts或tsx文件，添加相应的类型，

　在src中添加types文件夹用来放.d.tsw文件

　运行yarn start即可自动生成 tsconfig.json 等ts配置

 

二. 添加sass支持

    将css文件改为scss文件，安装node-sass依赖，

    安装@craco/craco依赖支持自定义webpack配置，更改package.json中scripts命令为craco，如

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
 },

    添加craco配置文件craco.config.js，安装craco-sass-resources-loader依赖支持全局scss变量，如

const sassResourcesLoader = require('craco-sass-resources-loader')
const path = require("path")
const resolve = dir => path.resolve(__dirname, dir)

module.exports = {
  webpack: {
    // 配置别名
    alias: {
      "@": resolve("src"),
    }
  },
  plugins: [
    // 添加scss全局变量
    {
      plugin: sassResourcesLoader,
      options: {
        resources: [
          './src/assets/sass/global.scss',
        ],
      },
    },
  ],
}

 

三.添加eslint支持，提交前检查

安装依赖：

@typescript-eslint/eslint-plugin

@typescript-eslint/parser

eslint-config-react-app

eslint-config-standard

eslint-plugin-flowtype

eslint-plugin-import

eslint-plugin-jest

eslint-plugin-jsx-a11y

eslint-plugin-node

eslint-plugin-promise

eslint-plugin-react

eslint-plugin-react-hooks

eslint-plugin-standard

eslint-plugin-testing-library

添加eslint配置文件.eslintrc.js，如

module.exports = {
  // 以当前目录为根目录，不再向上查找
  root: true,

  // 运行环境
  env: {
    browser: true, // 支持浏览器全局变量
    es6: true, // 支持es6全局变量
    node: true, // 支持node环境全局变量
    jest: true, // 支持jest测试全局变量
  },

  // 使用的扩展库
  extends: [
    'react-app', // eslint-config-react-app create-react-app使用的可共享配置
    'react-app/jest', // eslint-config-react-app支持eslint-plugin-jest
    'standard', // eslint-config-standard
  ],

  // 配置全局变量，值为 false 表示这个全局变量不允许被重新赋值
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  },

  // 指定eslint解析器
  parser: '@typescript-eslint/parser',
  // // 解析器配置
  // parserOptions: {
  // },

  // 第三方插件
  plugins: [
    'react', // react语法检查
    'react-hooks', // hooks语法检查
    'jest', // jest语法检查
    '@typescript-eslint', // ts语法检查
  ],

  // 共享设置
  settings: {
    react: {
      version: 'detect' // 自动检测当前安装的react版本
    }
  },

  // 规则
  rules: {
    'eol-last': 0, // 关闭文件末尾强制换行
    'no-multiple-empty-lines': [1, { 'max': 3 }], // 空行最多不能超过3行
    'indent': [1, 2], // 缩进2个空格
    'import/first': 1, // import必须在文件顶端
    'spaced-comment': 1, // 注释符号后必须有空格
    'no-trailing-spaces': 0, // 关闭尾随空白限制
    'space-before-blocks': [1, 'always'], // 不以新行开始的块{前面要有空格
    'space-before-function-paren': [1, 'always'], // 定义函数时括号前面要有空格
    'object-curly-spacing': [1, 'always'], // 大括号内总是有空格
    'padded-blocks': 0, // 关闭块内上下空行限制
    'comma-dangle': [1, { // 当最后一个元素或属性与闭括号 ] 或 } 在 不同的行时，允许（但不要求）使用拖尾逗号
      'arrays': 'only-multiline',
      'objects': 'only-multiline',
      'imports': 'only-multiline',
      'exports': 'only-multiline',
      'functions': 'never'
    }],
    'operator-linebreak': [1, 'after'], // 语句太长时，运算符放在行位
    'react/display-name': 0, // 关闭组件名检查
    'no-unused-vars': 0, // 关闭未使用变量，typescript中已有规则
    'quote-props': 0, // 关闭判断是否使用引号
    'jest/valid-describe': 0, // 报错该规则找不到，临时关闭
    'no-use-before-define': 0, // @typescript-eslint/eslint-plugin和react-scripts所用eslint版本冲突，临时关闭
  }
}

添加脚本命令，如

"lint": "eslint --ext .js,.ts,.tsx .",
"lint-fix": "eslint --fix --ext .js,.ts,.tsx ."

安装pre-commit依赖，在package.json中添加

"pre-commit": [
    "lint"
  ],

遇到问题：

1.开始安装了eslint依赖，但是与react-scripts中eslint版本冲突，解决方法删除自己安装的eslint依赖

2.运行yarn lint 后报React在未定义前使用，@typescript-eslint/eslint-plugin和react-scripts所用eslint规则冲突，解决方法临时关闭no-use-before-define规则，等待react-scripts升级

 

三.添加stylelint支持

安装依赖：

postcss
postcss-scss
stylelint
stylelint-config-recess-order
stylelint-config-standard
stylelint-scss

添加.stylelintrc.js配置文件，如

/****
 * stylelint配置
****/
module.exports = {
  // 使用的扩展库
  extends: [
    'stylelint-config-standard', // 标准的规则配置
    'stylelint-config-recess-order', // css属性书写顺序规则
  ],

  // 第三方插件
  plugins: [
    'stylelint-scss', // 支持scss
  ],

  overrides: [
    {
      files: ["src/**/*.scss"],
      customSyntax: "postcss-scss"
    }
  ],

  rules: {
    'selector-max-id': 0, // id选择器最多嵌套层数
    'max-empty-lines': 3, // 最多空行
    'rule-empty-line-before': null, // 去掉规则块前空行的规则
    'selector-list-comma-newline-after': 'always-multi-line', // 选择器列表多行时，在逗号后面总是新行
    'at-rule-no-unknown': null, // 屏蔽原生未知规则检查
    'scss/at-rule-no-unknown': true, // 使用scss插件中未知规则检查
    'declaration-block-trailing-semicolon': null, // 代码块中最后一项声明的分号限制，在jsx语法style属性中和eslint冲突
    'no-descending-specificity': null, // 优先级更高的允许写在前面
    'font-family-no-missing-generic-family-keyword': null, // 允许font-family缺少泛型系列
    'value-keyword-case': null, // 会改变js中style属性的值，因此关闭
    'color-function-notation': null, // 关闭颜色函数检查
    'selector-class-pattern': null, // 关闭指定类名格式
    'font-family-name-quotes': null, // 关闭指定字体名引号规则
    'alpha-value-notation': null, // 关闭透明度值格式指定
    'value-no-vendor-prefix': null, // 关闭没有供应商前缀限制
  }
}

添加脚本命令，如

  "lintstyle": "stylelint src/**/*.scss src/**/*.css",

  "style-fix": "stylelint src/**/*.scss src/**/*.css --fix"

安装pre-commit依赖，在package.json中添加

"pre-commit": [

    "lint",

    "lintstyle"

  ],

 

四.添加react-router，redux，antd，axios，反向代理，ahooks

 问题：

1、别名路径找不到，解决方法

// 在tsconfig.json中设置compilerOptions.paths，但是每次运行start命令会被删除，需要额外添加tsconfig-paths.json文件，内容如下
"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
    }
  }

在tsconfig.json中添加
"extends": "./tsconfig-paths.json"

但是运行start命令还会报 compilerOptions.paths must not be set (aliased imports are not supported)，

如果想去掉这个警告，那只有舍弃别名

// 在tsconfig.json中添加
"baseUrl": ".",

// 然后在所有使用别名的地方修改，如
import Home from '@/pages/home'
// 改为
import Home from 'src/pages/home'