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能夠攔截請求