驾驭webpack系列三：webpack+react全家桶+typescript

前言

承接上一篇，我们的webpack已经初具规模，接下来我们就加入react全家桶和typescript，参考代码放在webpack03，可以yarn start直接运行，其他的不多说，直接上代码

加入react

首先我们安装react和react-dom

yarn add react react-dom --dev

babel识别jsx语法

yarn add @babel/preset-react --dev

配置.babelrc

{

"presets": ["@babel/preset-env", "@babel/preset-react"]

}

接下来在src目录创建App.js,代码如下

import React from "react";
import styles from "./App.less";

function App() {
  return <div className={styles.App}>Hello react</div>;
}

export default App;

图片.png 当我们看到页面上显示出来我们写的Hello react，是不是心情美美哒，感觉一切付出都值得

支持css modules

看到这个标题，我们直接亮出我们的三板斧，what？why？how？

首先问题来了，什么是css modules？为什么要使用css modules？

接下来就是如何使用了？

webpack默认是不支持css modules，如果想要使用，需要我们手动配置

 module: {
    rules: [
      ....,
      {
        test: /\.(css|less)$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              modules: {
                localIdentName: "[name]_[hash:base64:5]",
              },
            },
          },
          "less-loader",
        ],
      },
    ],
  },

配置以后就可以生效了

如果设置modules的话，那么生成的class名就全是hash码，为了我们能够辨别

还是加一下 localIdentName

图片.png

加入react-router

yarn add react-router-dom@5.1.0 --dev

我们使用的是5.1.0版本

index.js

图片.png

如果定义的path属性以/开头，那么每次都会匹配到Home组件

如何解决呢?

只需要给Home 路由加上exact,这样只有path的值被完全匹配时才会渲染对应的组件

还可以通过使用Switch包裹路由来告诉 React Router 一次仅加载一条路由。

添加路由以后，发现每次刷新页面都是404，那么就需要在devServer中配置historyApiFallback

webpack.base.js

...
devServer: {
    open: true,
    historyApiFallback: true,
  },

加入redux

安装redux

三板斧驾到，what，why，how

为什么需要redux？

当项目越来越大的时候，组件之间传递数据越来越困难
这些状态包括服务器返回的数据,也包括一些UI的状态

yarn add redux react-redux redux-actions --dev

在src目录下创建store文件夹，下面在建2个文件夹actions，reducers和一个文件index.js

图片.png

count.action.js内容如下

import { createAction } from "redux-actions";
export const addCount = createAction("addCount");
export const reduceCount = createAction("reduceCount");

count.reducer.js 内容如下

import { handleActions as createReducer } from "redux-actions";
import { addCount, reduceCount } from "../actions/count.action";
const initialState = { count: 0 };
const handleAddCount = (state, action) => {
    return { ...state, count: action.payload + state.count };
};
export default createReducer(
    {
     [addCount]: handleAddCount,
    },
    initialState
);

root.reducer.js 内容如下

import { combineReducers } from "redux";
import countReducer from "./count.reducer";
export default combineReducers({
 count: countReducer,
});

store下的index.js内容如下

import { createStore } from "redux";
import rootReducer from "./reducers/root.reducer";
export const store = createStore(rootReducer);

如上我们就建好了我们的store，action，reducer了，接下来就是与组件相连接

如何连接呢在src下的index.js的中使中引入

import React from "react";
import ReactDom from "react-dom";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import { Provider } from "react-redux";
import { store } from "./store/index";
import App from "./App";
import About from "./About/index";
import Home from "./Home/index";
ReactDom.render(
    <Provider store={store}>
        <Router>
            <Switch>
                <Route path="/" exact component={App} />
                <Route path="/about" component={About} />
                <Route path="/home" component={Home} />
            </Switch>
        </Router>
    </Provider>,
document.querySelector("#root")
);

在组件App中使用方法如下

图片.png

typescript

有的同学可能把typescript用的很熟练了，但有的同学可能不喜欢用typescript，觉得他功能繁琐，学习成本高，或者使用后报红的地方太多，修改麻烦等

于是亮出我们的三板斧，what？why？how？

最最主要的功能是可以在编译期间发现并纠正错误,这样才可以保证你线上的代码少出错

接下来就是如何使用了首先进行安装typescript的react声明还有typescript

yarn add @types/react @types/react-dom typescript ts-loader --dev

配置文件tsconfig.json

直接tsc --init生成默认的就可以

tsconfig.json配置

{
    "compilerOptions": {
        "target": "es2016",
        "jsx": "react",// 重点，支持jsx语法，否则会报错
        "module": "commonjs",
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "skipLibCheck": true
    },
    "include": ["src"]
}

webpack配置

module: {
    rules: [
      ......,
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: {
          loader: "ts-loader",
        },
      },
    ],
  },
  ...
  resolve: {
            extensions: [".ts", ".tsx", ".jsx", ".js"], // 解析顺序，因为默认解析顺序是没有ts，咱们支持了ts后，要写上
    },

如上配置好以后就可以使用ts语法了，react模板使用tsx

总结

经过上面的一番折腾，终于把把webapck和react，typescript结合起来了，感觉棒棒哒，如果上面的内容对你有帮助，还请给个赞👍🏻，我会继续努力，写出更有深度的文章，谢谢，Thanks♪(･ω･)ﾉ