持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第23天，点击查看活动详情
使用react开发当然是少不了要好好利用它的周边福利呀，这次我们来安排一下react-router-dom,react-redux和typescript等。同时我们还要配置一些查找规则，让我们的脚手架使用起来更加的方便。
配置可省略文件后缀
我们在react-cli中进行开发的时候，我们引入js和jsx等文件的时候是可以省略后缀直接引入的这就是下面配置的作用
module.exports = {
entry: {
...
},
module: {
...
},
resolve: {
+ extensions: ['.jsx', '.js', '.json'],
},
plugins: [
...
],
}
文件路径别名配置
在我们项目开发的后期有的时候一个文件的位置可能会十分的“深”，这个时候无论是通过写相对路径还是绝对路径都会十分的难受，我们就通过配置一定的路径别名来简化我们的引入路径，具体操作如下：
...
module.exports = {
entry: {
...
},
module: {
...
},
resolve: {
extensions: ['.jsx', '.js', '.json'],
+ alias: {
+ "@": path.resolve(__dirname, 'src')
+ }
},
plugins: [
...
],
}
如上面这样的配置后我们就可以通过@来代表我们的src了。
react-router-dom配置
首先直接安装npm install react-router-dom --save我这里安装的是v6，如果是v5的话api的使用可能会有所不同，具体可以看我的这篇文章react中的路由记录;
我们在src下新建pages文件夹用来存放我们的路由组件，新建routes用来存放我们的路由配置
//routes/index
import React from 'react';
import About from '@/pages/About';
import Home from '@/pages/home';
import { HashRouter, Routes, Route } from 'react-router-dom';
function RouteConfig(){
return (
<HashRouter>
<Routes>
<Route path='/home' element={<Home/>} />
<Route path='/about' element={<About/>} />
<Route index element={<About/>} />
</Routes>
</HashRouter>
)
}
export default RouteConfig
//pages/about
import React from 'react';
import {Link} from "react-router-dom"
const About = () => {
return (
<div>
关于
<Link to="home">Home</Link>
</div>
);
}
export default About;
//pages/home
import React from 'react';
const Home = () => {
return (
<div>
首页
</div>
);
}
export default Home;
然后我们重新启动服务，可以进行正常路由跳转就说明配置成功了。
redux配置
对于一些层次结构较为复杂的组件之间需要进行通信或者有一些全局的状态需要进行统一的维护方便我们的组件进行调用这个时候我们就要用到我们的redux，它被称之为全局状态管理，我们一样是先进行安装后进行使用
npm install react-redux redux --save这里我们还装了一个react-redux就是为了和第三方的库进行解耦，关于整体是怎么使用的具体看我这篇文章同为全局状态管理，来看看vuex和redux都怎么用的
安转好之后我们进行简单的测试，这里为了方便我们就省略一下action直接函数执行了，后面写项目再好好划分
//reducer.js
let initState=0;
export function countReducer(preState=initState,action){
const {type,data}=action;
switch (type) {
case "increase":
return data+preState;
default:
return preState;
}
}
//store.js
import {countReducer} from "./reducer";
import {createStore} from "redux";
export default createStore(countReducer);
//App.js
import * as React from 'react'
import './app.less'
import RouteConfig from "@/routes/index";
import Count from './components/Count';
class App extends React.Component{
render(){
return (
<div>
<Count></Count>
<RouteConfig></RouteConfig>
</div>
)
}
}
export default App
//main.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import store from "./store/count/store";
import { Provider } from "react-redux";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Provider store={store}>
<App />
</Provider>
);
//count.js
import React from 'react';
import { connect } from 'react-redux';
const Count = (props) => {
return (
<div>
<h1>redux中的count:{props.count}</h1>
<button onClick={props.addOne}>点我加一</button>
</div>
);
}
export default connect((store)=>({
count:store
}),{
addOne:()=>({type:"increase",data:1})
})(Count);
typescript配置
弱类型的js带来自由的同时也更容易出现问题，ts的出现就是为了让我们的程序员知道自己在干什么，这样就能减少出问题的概率。
我们的babel7是已经可以解析我们的ts的了，我们只需要在在babel中进行简单的配置就可以，话不多说，先进行安装 typescript @babel/preset-typescrpt -d`
对babel进行配置
// .babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-rtpescript", // 处理typescript
],
"plugins": [
"@babel/proposal-object-rest-spread", // 处理对象的rest写法
"@babel/proposal-class-properties" // 处理类里面的箭头函数绑定，static属性等
]
}
修改一下webpack.common.js，把tsx的解析加入其中
在项目根目录新建ts的解析规则tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true, // 允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出，仅为了类型检查。
"outDir": "./dist/", // 重定向输出目录
"noImplicitAny": true,// 在表达式和声明上有隐含的 any类型时报错。（默认为false，个人建议也为false，可以兼容之前的js代码，这里改为true是为了我自己检测哪些类型需要处理）
"module": "es6", // 模块引入方式
"target": "esnext",// 指定ECMAScript目标版本
"jsx": "react", // 在 .tsx文件里支持JSX
"allowJs": true,
"sourceMap": true, // 生成相应的 .map文件
"lib": [
"es2015",
"dom.iterable",
"es2016.array.include",
"es2017.object",
"dom"
], // 编译过程中需要引入的库文件的列表。
"moduleResolution": "node",// 用于解析一些加载器，如css-type, source-map
"baseUrl": "./src", // typescript的模块解析基础路径
"paths": { // 对应的模块解析路径
"store/*": ["store/*"],
},
},
"include": [
"src"
],
"exclude": [
"./node_modules"
]
}
