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

基于React脚手架搭建React + dva + 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已经可以看到页面内容了，可以点击跳转页面~

安装less，react脚手架自带的是sass，如果想使用sass可直接安装
- 执行yarn add --dev less less-loader,
如果提示node版本号错误如[email protected]: 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文件内引入import './style.less';, 重启服务。
如果出现以下问题，说明安装的less-loader版本过高，不支持getOptions方法，安装低版本即可，执行yarn add --dev [email protected]即可（可以自己尝试哪个版本号可用）

再执行yarn start就可以启动服务了，此时less已可使用了
如果出现less生成的样式的class名字都是hash命名，说明上述配置中的 getStyleLoaders-modules有问题，按照配置更改即可~

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

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

home

你可能感兴趣的:(基于React脚手架搭建React + dva+typescript+ webpack + less)