关于react.js:基于React脚手架搭建React-dvatypescript-webpack-less

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

Mac

  1. react-create-app 创立react我的项目及typescript,react-create-app须要本人装置配置,不赘述
    npx create-react-app [app0729-自定义文件名] --typescript
    执行yarn start 能够看到默认页面了~
  2. 裸露webpack,即生成webpack配置等文件, config/script
    yarn eject
  3. 装置dva
    yarn add dva
  4. 配置路由
    yarn add history

    • src下创立routes文件夹,该文件夹内放各个页面,每个页面独自创立文件夹

    😊举个栗子~

    // home.tsx
    import { Link } from 'dva/router';
    import React from 'react';
    
    const Home = ({history}: any): JSX.Element => {
      return (
     <div className="home-wrapper">
       <h1>home</h1>
       <p onClick={() => {
         // history跳转
         history.push('/orderList');
       }
       }>去订单列表页</p>
       // link标签跳转
       <Link to={'/orderList'}>去订单列表页</Link> 
     </div>
      )
    }
    
    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 (  
    <Router history={history}> 
        <Switch>  
        {
          routes.map((item: any): any => (  
              <Route  
                key={item.key}   
                path={item.path}   
                exact   
                // @ts-ignore
                component={dynamic({  
                  // @ts-ignore
                  app,  
                  models: item.models,
                  component: item.component,
                })}   
              />  
            ))  
        }
        </Switch>  
    </Router>  
  );  
}  
  
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曾经能够看到页面内容了,能够点击跳转页面~

  1. 装置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文件内引入import './style.less';, 重启服务。
如果呈现以下问题,阐明装置的less-loader版本过高,不反对getOptions办法,装置低版本即可,执行yarn add --dev less-loader@7.0.0即可(能够本人尝试哪个版本号可用)

再执行yarn start就能够启动服务了,此时less已可应用了
如果呈现less生成的款式的class名字都是hash命名,阐明上述配置中的 getStyleLoaders-modules有问题,依照配置更改即可~

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元

阿里云限时活动-1核2G-1M带宽-40-100G ,特惠价87.12元/年(原价1234.2元/年,可以直接买3年),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

You may also like...

发表评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据