React+antd+less框架搭建步骤,看吧,整的明白儿的

Posted 1rookie

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React+antd+less框架搭建步骤,看吧,整的明白儿的相关的知识,希望对你有一定的参考价值。

1、node版本

  首先你要先看下你的node版本,如果小于10,建议升级到10及以上,因为低版本的 node 在自动创建 react框架时,有配置文件跟10及以上的有比较大的差异,而且需要增加、修改的配置有点多,有些繁复,所以为了能够轻松自在的创建基础框架,最好是升级下node。我用的nvm,版本随意切换,所以还算自在。

2、先跑命令 : npm install -g create-react-app 创建下 构建环境。

3、create-react-app  <你定义的项目名> ,运行后就会自动创建了。

4、完成后 你的 项目目录结构及package.json配置大概如下:

技术图片

技术图片

很整洁,很多配置项集成在了 node_moudles下的 react-scripts 中,如果你想自己加一些自己的配置,或者定制下配置。那就需要 执行命令 : npm run eject(这词是弹出的意思)。

5、执行 npm run eject 时,它将把所有配置文件和可传递的依赖项(Webpack、Babel、eSlint等)直接复制到您的项目中,配置文件会被输出到config下的webpack.config.js,你可以对其进行修改调整。

如果你用过vue-cli3去创建并配置vue项目的话,看到react下的 这个 webpack.config.js文件应该会觉得似曾相识,除了有一些优化配置项vue没有,一部分内容 和 vue.config.js文件 还是有诸多想通之处的,

玩起来也会得心应手一些。

此时你的目录结构如下:

技术图片

6、这时候引用antd开发时,可能会报错,还需要做一些配置。

const lessRegex = /\\.less$/;
const lessModuleRegex = /\\.module\\.less$/;
loaders.push(
        
          loader: require.resolve(‘resolve-url-loader‘),
          options: 
            sourceMap: isEnvProduction && shouldUseSourceMap,
          ,
        ,
        
          loader: require.resolve(preProcessor),
          options: 
            sourceMap: true,
            javascriptEnabled: preProcessor === ‘less-loader‘    //需要加

          ,
        
plugins: [
                  [
                    require.resolve(‘babel-plugin-named-asset-import‘),
                    
                      loaderMap: 
                        svg: 
                          ReactComponent:
                            ‘@svgr/webpack?-svgo,+titleProp,+ref![path]‘,
                        ,
                      ,
                    ,
                  ],

                  //下面需要加
                  [
                      "import",
                       
                         libraryName: "antd",
                         libraryDirectory: "es",
                         style: true // `style: true` 会加载 less 文件
                        ,
                  ]
                ],
              // less相关配置 ,下面都需要加
              //普通模式
              
                  test: lessRegex,
                  exclude: lessModuleRegex,
                  use: getStyleLoaders(
                      
                          importLoaders: 2,
                          sourceMap: isEnvProduction
                              ? shouldUseSourceMap
                              : isEnvDevelopment,
                      ,
                      ‘less-loader‘
                  ),
                  sideEffects: true,
              ,
              //module 模式
              
                  test: lessModuleRegex,
                  // exclude:[/node_modules/],// 针对第三方的less文件不进行module化
                  use: getStyleLoaders(
                      
                          importLoaders: 2,
                          sourceMap: isEnvProduction
                              ? shouldUseSourceMap
                              : isEnvDevelopment,
                          modules: true,
                          getLocalIdent: getCSSModuleLocalIdent,
                      ,
                      ‘less-loader‘
                  ),
              ,
            // "file" loader makes sure those assets get served by WebpackDevServer.            

配的时候,看清配置所在位置哈。这样就结束了,可以玩耍了。

 

各位看官有问题的话,请多留言交流。觉得ok的话,请点下推荐,谢谢!

以上是关于React+antd+less框架搭建步骤,看吧,整的明白儿的的主要内容,如果未能解决你的问题,请参考以下文章

React16.8搭建支持Less文件的开发环境

前后端接口设计与配置中心系统<二十七>-------前端-管理后台设计实现1基于create-react-app搭建web工程整合antd与less并搭建具有Ant Design风格的页面

React第六篇: 搭建React + Router + antd + nodejs + express框架搭建(nodejs做前后端server)

在webpack自定义配置antd的按需加载和修改主题色

React+TypeScript+H5+Antd-mobile项目搭建

react中自定义antd主题与支持less(第二部)