一、安装react+ts
npx create-react-app my-app --template typescript
二、安装eslint代码检测
一个好的项目必须有一个规范，所以得安装eslint代码检测
yarn 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文件(此时我的项目文件结构如下图)
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、开发环境打开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
