一、安裝react+ts

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

二、安裝eslint代碼檢測

一個好的項目必須有一個規(guī)范，所以得安裝eslint代碼檢測

yarn eslint
npx eslint --init

eslint初始化后會出現(xiàn)三個項目，根據(jù)項目而定

1、使用什么樣的eslint？(這里我選擇3)

To check syntax only // 只檢測語法性錯誤
To check syntax and find problems // 檢查語法錯誤并發(fā)現(xiàn)問題代碼
To check syntax, find problems, and enforce code style // 檢查語法錯誤，發(fā)現(xiàn)問題代碼，校驗代碼風(fēng)格

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、代碼運行環(huán)境？(瀏覽器)

Browser // 瀏覽器
Node // node環(huán)境

6、如何定義項目定義樣式？(使用流行的風(fēng)格指南)

Use a popular style guide // 使用流行的風(fēng)格指南
Answer questions about your style // 問答定義形成一個風(fēng)格

7、遵循哪一種流行風(fēng)格？(可以根據(jù)自己項目所需定義，我選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、你現(xiàn)在就安裝他們嗎？(Yes，yarn)

npm
yarn
pnpm

安裝完成后會在項目根目錄生成.eslitrc.js文件，然后改一下規(guī)則(可以根據(jù)自己需求增減規(guī)則)

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,
    
    // 空標(biāo)簽
    'react/self-closing-comp': 0,
    
    // 具有單擊處理程序的可見非交互元素必須至少有一個鍵盤偵聽器
    'jsx-a11y/click-events-have-key-events': 0,
    
    // 具有“按鈕”交互作用的元素必須是可聚焦的
    'jsx-a11y/interactive-supports-focus': 0,
    
    // 帶有事件處理程序的靜態(tài)HTML元素需要一個角色
    'jsx-a11y/no-static-element-interactions': 0,
    
    // return ;
    'semi-spacing': 0,
    
    // <>只包含不能只包含一個標(biāo)簽
    'react/jsx-no-useless-fragment': 0,
    
    // 值對于布爾屬性必須省略
    'react/jsx-boolean-value': 0,
    
    // 必須默認導(dǎo)出
    'import/prefer-default-export': 0,
    
    // 默認變量放到最后一個
    'default-param-last': 0,
    
    // 對參數(shù)進行賦值
    'no-param-reassign': 0,
    
    // 使用未聲明的函數(shù)
    'no-use-before-define': 0,
    
    'no-new': 0,
    
    // 不能使用自增
    'no-plusplus': 0,
    
    // button必須是靜態(tài)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、根目錄下創(chuàng)建config-overrides.js文件(此時我的項目文件結(jié)構(gòu)如下圖)

image.png

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、開發(fā)環(huán)境打開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"
          
          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運行項目即可，如果發(fā)現(xiàn)有不合適的地方歡迎大家指出，共同學(xué)習(xí)

六、參考文獻

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