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的话,请点下推荐,谢谢!

原文地址:https://www.cnblogs.com/1rookie/p/11371644.html

时间: 2024-10-07 13:48:13

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

Struts2.0 框架搭建步骤详解

实现了MVC思想的struts框架,主要分三层结构,即:view->controller->model,三者互相传递数据,实现了数据在前台和后台的转换,验证,展示,存储. 搭建struts框架的步骤如下: 1.在myeclipse中新建Java项目,删除项目中的源文件src,建立普通文件,将Struts解压后的jar包复制在新建的普通文件夹中. 2.新建web项目,右键选择build path->add jars(不是导入外部第三方的jar包) 选择第一步新建的Java项目,将里面的Ja

React 组件库框架搭建

前言 公司业务积累了一定程度,需要搭建自己的组件库,有了组件库,整个团队开发效率会提高恨多. 做组件库需要提供开发调试环境,和组件文档的展示,调研了几个比较主流的方案,如下: docz 配置简单,功能相对来说也较完善.我们现在项目是用的umi框架,正好官方也提供了开发库的脚手架,也集成了docz,因此我们决定采用它来开发我们的组件库. storybook 功能比较全面,支持自定义webpack配置等特性 docsifyjs 写文档比较友好,对vue支持比较好,react 用的不是特别多 组件库搭

Rails + React +antd + Redux环境搭建

前提条件:node和ruby on rails必须已经安装好(相关安装流程不再此处介绍) 1.nvm.node 2.npm or yarn装一个就好 3.rvm.ruby on rails 4.foreman 一.新建一个rails项目后加入react gem包 1.Gemfile文件添加gem 'react_on_rails', '~>6' # use latest gem version > 62.bundle install安装gem包3.rails generate react_on_

react+redux项目框架搭建流程

一.脚手架搭建react结构目录: 1.npm install -g create-react-app 全局安装react脚手架 2.create-react-app react-demo 创建react-demo项目 3.cd react-demo 进入到项目文件夹 4.npm start 启动本地项目 二.Styled-Components与Reset.css的结合使用. Styled-Components解决css样式表不能私有的问题,Reset.css重置不同浏览器标签默认设置 三.Re

SSH框架搭建过程

什么是SSH? SSH对应 struts spring hibernate struts 采用MVC模式,主要是作用于用户交互 spring 采用IOC和AOP~作用比较抽象,是用于项目的松耦合 hibernate 是对象持久化框架,其实就是实体类和数据库表建立关系,操作类就会触发相应的sql语句,可以不用写任何sql语句,完成数据库编程(引自百度知道) SSH就是Struts + Spring + Hibernate 3个Java框架的集合,现在Java开发中常用的框架组合.用来开发后台,与前

mybatis框架搭建学习初步

mybatis框架搭建步骤:1. 拷贝jar到lib目录下,而且添加到工程中2. 创建mybatis-config.xml文件,配置数据库连接信息 <environments default="development"> <environment id="mysql"> <transactionManager type="JDBC"></transactionManager> <dataSou

SpringMVC基础框架搭建

SpringMVC框架搭建步骤: 1.将需要jar包导入lib文件夹下   2.配置web.xml  3.配置springMVC核心配置文件  4.编码Controller类 说明:本项目源码导入eclipse,在tomcat运行后 输入http://localhost:8080/BrainTrain/welcome.jsp进行测试 所需的jar包:http://pan.baidu.com/s/1i3QKYNF(百度云盘) 项目源码:http://pan.baidu.com/s/1kTWM9Rh

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

前提: nodejs >= 10.0;  这里不推荐用官网的yarn安装antd的模块,因为后续会出错,错误如图: 也不推荐用npx方法来搭建react骨架,也会出错,让我们开始吧!!   前端React+Antd框架搭建 1.安装并启动create-react-app骨架应用 打开cmd按顺序执行以下指令: npm install -g create-react-app   (全局安装create-react-app, 默认会安装在C盘个人用户下) create-react-app my-ap

ssh框架搭建Struts2.06+spring2.5+hibernate3.2整合实例代码教程步骤

原创整理不易,转载请注明出处:ssh框架搭建Struts2.06+spring2.5+hibernate3.2整合实例代码教程步骤 代码下载地址:http://www.zuidaima.com/share/1760074977233920.htm 最近闲来无事可做,于是开始学习struts2.Struts2和struts1.webwork2有什么区别我也不说了,网上有很多这方面的资料.以前在项目中从未使用过struts,一直使用spring+hibernate,现在既然学习了Struts,也不能