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能够拦截请求