react笔记 Create React App

Create React App

使用typescript

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

添加less

第一步 暴露webpack配置文件

npm run eject

多了一个config文件夹，这样就可以修改 webpack 相关配置了。

第二步 添加less

npm install --save-dev less-loader less

第三步 修改webpack配置文件

复制一份sass的配置，改成less

const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
...

{
	test: sassRegex,
	exclude: sassModuleRegex,
	use: getStyleLoaders(
		{
			importLoaders: 2,
			sourceMap: isEnvProduction && shouldUseSourceMap,
		},
		'sass-loader'
	),
	sideEffects: true,
},
{
	test: lessRegex,
	exclude: lessModuleRegex,
	use: getStyleLoaders(
	  {
	    importLoaders: 2,
	    sourceMap: isEnvProduction && shouldUseSourceMap,
	  },
	  'less-loader'
	),
	sideEffects: true,
},
{
	test: sassModuleRegex,
	...
},
{
	test: lessModuleRegex,
	...
},

添加mock && axios

npm install --save-dev mockjs
npm install @types/mockjs
npm i axios --save

编译文件在src目录下，所以mock需要在src里面
新建文件：

const Mock = require('mockjs')

Mock.mock('/test', 'get', {
    success: true,
    data: 123
})

在App.tsx里面引入：

import mockData from './mock/index'
console.log(mockData) //这行必须加，不然没用

有了mock之后，所有请求会被拦截，不会发送请求。所以在network里面看不到。
为什么mock能够拦截请求