基于React脚手架搭建React|基于React脚手架搭建React + dva+typescript+ webpack + less 基于React脚手架搭建React+dva+t

基于React脚手架搭建React + dva + webpack + less 【基于React脚手架搭建React|基于React脚手架搭建React + dva+typescript+ webpack + less】Mac

react-create-app 创建react项目及typescript，react-create-app需要自己安装配置，不赘述
npx create-react-app [app0729-自定义文件名] --typescript
执行yarn start 可以看到默认页面了~
暴露webpack，即生成webpack配置等文件, config/script
yarn eject
安装dva
yarn add dva
配置路由
yarn add history
- src下创建routes文件夹，该文件夹内放各个页面，每个页面单独创建文件夹
  
  文章图片
举个栗子~

// home.tsx import { Link } from 'dva/router'; import React from 'react'; const Home = ({history}: any): JSX.Element => { return ( home { // history跳转 history.push('/orderList'); } }>去订单列表页 // link标签跳转去订单列表页 ) }export default React.memo(Home);
- 修改src/app.tsx文件 -- 控制路由

import React from 'react'; import { Router, Route, Switch } from 'dva/router'; import dynamic from 'dva/dynamic'; const routes = [ { key:'home', path: '/', component: () => import('./routes/Home/home'), }, { key:'/orderList', path: '/orderList', component: () => import('./routes/Order/orderList/index'), }, { key:'/orderDetail', path: '/orderDetail', component: () => import('./routes/Order/orderDetail/index'), } ]; function RouterConfig({ history, app }: any) {return ( { routes.map((item: any): any => ( )) } ); }export default RouterConfig;

修改src/index.tsx文件入口文件

import dva from 'dva'; // import './index.css'; import { createBrowserHistory } from 'history'; // 1. Initialize const app = dva({ history:createBrowserHistory() }); // 2. Plugins-- 可以挂载loading等插件 // app.use({}); // 3. Model-- 引入全局model可稍后尝试 // app.model(require('./models/app').default); // 4. Router app.router(require('./App.tsx').default); // 5. Start-- 挂载到 #root DOM上 app.start('#root');

执行yarn start已经可以看到页面内容了，可以点击跳转页面~

基于React脚手架搭建React|基于React脚手架搭建React + dva+typescript+ webpack + less

文章图片

安装less，react脚手架自带的是sass，如果想使用sass可直接安装
- 执行yarn add --dev less less-loader,
如果提示node版本号错误如less-loader@10.0.1: The engine "node" is incompatible with this module. Expected version ">= 12.13.0". Got "10.18.0",可执行yarn add --dev less less-loader --ignore-engines,忽略node版本号即可。
- webpack配置less
  -config/webpack.config.js修改 lessRegex、lessModuleRegex替换sassRegex、sassModuleRegex

const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/ // const sassRegex = /\.(scss|sass)$/; // const sassModuleRegex = /\.module\.(scss|sass)$/; // Opt-in support for SASS (using .scss or .sass extensions). // By default we support SASS Modules with the // extensions .module.scss or .module.sass { test: lessRegex,// 替换 exclude: lessModuleRegex,// 替换 use: getStyleLoaders( { importLoaders: 1,// 替换 sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, }, 'less-loader' // 替换 ), // Don't consider CSS imports dead code even if the // containing package claims to have no side effects. // Remove this when webpack adds a warning or an error for this. // See https://github.com/webpack/webpack/issues/6571 sideEffects: true, }, // Adds support for CSS Modules, but using SASS // using the extension .module.scss or .module.sass { test: lessModuleRegex,// 替换 use: getStyleLoaders( { importLoaders: 1,// 替换 sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: { getLocalIdent: getCSSModuleLocalIdent, }, }, 'less-loader'// 替换 ), },

src/routes/Home下创建style.less并在home.tsx文件内引入