React + Ts项目搭建

一、安装react+ts

npx create-react-app my-app --template typescript

二、安装eslint代码检测

一个好的项目必须有一个规范，所以得安装eslint代码检测

yarn add eslint
npx eslint --init

eslint初始化后会出现三个项目，根据项目而定

1、使用什么样的eslint？(这里我选择3)

To check syntax only // 只检测语法性错误
To check syntax and find problems // 检查语法错误并发现问题代码
To check syntax, find problems, and enforce code style // 检查语法错误，发现问题代码，校验代码风格

2、项目使用什么类型的模块？(这里我选择1)

JavaScript modules (import/export) // 允许import/export
CommonJS (require/exports) // 允许require/exports
None of these // 没有任何模块化

3、项目使用哪个框架？(选择1)

React
Vue.js
None of these

4、项目使用Ts？(Yes)

Does your project use TypeScript? › No / Yes

5、代码运行环境？(浏览器)

Browser // 浏览器
Node // node环境

6、如何定义项目定义样式？(使用流行的风格指南)

Use a popular style guide // 使用流行的风格指南
Answer questions about your style // 问答定义形成一个风格

7、遵循哪一种流行风格？(可以根据自己项目所需定义，我选Airbnb)

Airbnb: https://github.com/airbnb/javascript
Standard: https://github.com/standard/standard
Google: https://github.com/google/eslint-config-google
XO: https://github.com/xojs/eslint-config-xo

8、你希望你的配置文件是什么格式的？(JavaScript，其它的可以自行百度)

JavaScript
YAML
JSON

9、你现在就安装他们吗？(Yes，yarn)

npm
yarn
pnpm

安装完成后会在项目根目录生成.eslitrc.js文件，然后改一下规则(可以根据自己需求增减规则)

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      tsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: [
    'react',
    '@typescript-eslint',
  ],
  rules: {
    'react/jsx-filename-extension': [
      2,
      { 'extensions': ['ts', 'tsx'] }
    ],
    'import/no-unresolved': 0,
    'import/extensions': 0,
    
    // 最后一个对象属性要有逗号
    'comma-dangle': 1,
    
    // 定义但从未使用的变量
    'no-unused-vars': 1,
    
    // 赋值但从未使用
    'react/jsx-no-bind': 1,
    
    // 空标签
    'react/self-closing-comp': 0,
    
    // 具有单击处理程序的可见非交互元素必须至少有一个键盘侦听器
    'jsx-a11y/click-events-have-key-events': 0,
    
    // 具有“按钮”交互作用的元素必须是可聚焦的
    'jsx-a11y/interactive-supports-focus': 0,
    
    // 带有事件处理程序的静态HTML元素需要一个角色
    'jsx-a11y/no-static-element-interactions': 0,
    
    // return ;
    'semi-spacing': 0,
    
    // <>只包含不能只包含一个标签
    'react/jsx-no-useless-fragment': 0,
    
    // 值对于布尔属性必须省略
    'react/jsx-boolean-value': 0,
    
    // 必须默认导出
    'import/prefer-default-export': 0,
    
    // 默认变量放到最后一个
    'default-param-last': 0,
    
    // 对参数进行赋值
    'no-param-reassign': 0,
    
    // 使用未声明的函数
    'no-use-before-define': 0,
    
    'no-new': 0,
    
    // 不能使用自增
    'no-plusplus': 0,
    
    // button必须是静态type
    'react/button-has-type': 0,
  },
};

三、安装customize-cra

customize-cra是依赖于react-app-rewired的库，通过config-overrides.js来修改底层的webpack，label配置。

1、安装依赖

yarn add react-app-rewired customize-cra --save-dev

四、安装node-sass

1、安装node-sass插件并安装资源加载器(做全局scss引用)

yarn add node-sass
yarn add sass-resources-loader // 资源加载器

2、先改package.json文件(找到scripts改为如下代码)

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
},

3、根目录下创建config-overrides.js文件(此时我的项目文件结构如下图)

4、添加全局scss(在config-overrides.js文件下添加如下代码)

const {
  override,
  addWebpackModuleRule,
} = require('customize-cra');

module.exports = override(
  // scss全局变量
  addWebpackModuleRule({
    test: /\.scss$/,
    use: [
      'style-loader',
      'css-loader',
      'sass-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          // 注意在项目中新增/src/assets/scss/varable.scss文件
          resources: ['./src/assets/scss/varable.scss'],
        },
      },
    ],
  }),
);

5、添加@别名指向src目录(React默认没有像vue有@别名)修改config-overrides.js文件，代码如下

const {
  override,
  addWebpackAlias,
  addWebpackModuleRule,
} = require('customize-cra');
const path = require('path');

module.exports = override(
  // @别名
  addWebpackAlias({
    '@': path.resolve('./src'),
  }),

  // scss全局变量
  addWebpackModuleRule({
    test: /\.scss$/,
    use: [
      'style-loader',
      'css-loader',
      'sass-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          resources: ['./src/assets/scss/varable.scss'],
        },
      },
    ],
  }),
);

然后在根目录下tsconfig.json文件更改代码如下

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

6、开发环境打开devloop配置，为了更好定位代码中报错(修改config-overrides.js)，代码如下

const {
  override,
  addWebpackAlias,
  addWebpackModuleRule,
} = require('customize-cra');
const path = require('path');

module.exports = override(
  (config) => {
    config.devtool = config.mode === 'development' ? 'cheap-module-source-map' : false;
    return config;
  },

  // @别名
  addWebpackAlias({
    '@': path.resolve('./src'),
  }),

  // scss全局变量
  addWebpackModuleRule({
    test: /\.scss$/,
    use: [
      'style-loader',
      'css-loader',
      'sass-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          resources: ['./src/assets/scss/varable.scss'],
        },
      },
    ],
  }),
);

五、项目运行

因为直接开启eslist的缘故，所以直接运行会报eslist，默认的项目这里需要更改两个地方

1、App.tsx文件更改为

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

2、reportWebVitals.ts

import { ReportHandler } from 'web-vitals';

const reportWebVitals = (onPerfEntry?: ReportHandler) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({
      getCLS,
      getFID,
      getFCP,
      getLCP,
      getTTFB,
    }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

3、之后直接yarn start运行项目即可，如果发现有不合适的地方欢迎大家指出，共同学习

六、参考文献

1、 https://zh-hans.reactjs.org/docs/static-type-checking.html
2、 http://www.manongjc.com/detail/19-dkgrbjlrjsfttjz.html