下载组件库包 yarn add antd使用craco对create-react-app进行自定义配置yarn add @craco/craco根目录创建craco.config.js文件 /* craco.config.js */ module.exports = {// ... };更改package.json "scripts": {"start": "craco start","build": "craco build","test": "craco test","eject": "react-scripts eject"},实现按需打包yarn add babel-plugin-importcraco.config.js添加 babel:{ plugins: [[ "import", {"libraryNam...
1. 新建文件routes.js，分别定义页面的路由信息和其他信息const Routes = {100: { title: "home", pageName: "home", path: "/home"}, 101: { title: "page1", pageName: "page1", path: "/page1" },102: { title: "page2", pageName: "page2", path: "/page2"},103: { title: "page3", pageName: "page3", path: "page3"} };export default Routes;2. ...
一、先抛问题 许多刚开始接触create-react-app框架的同学，不免都会有个疑问：如何在不执行eject操作的同时，修改create-react-app的配置。今天胡哥就来带大家一起来看看这个问题~ 二、为啥不建议执行eject 1. 执行eject产生了什么变化？ create-react-app框架本身将webpack、babel的相关配置封装在了react-scripts中， 执行yarn eject后，会将webpack、babel等配置暴露在config目录下，同时scripts目录下会有新的命令文件更新，pa...
首先大家明白一点React中默认是配置Sass的，所以想要配置Less的话看下面： 1.有一些第三方的框架会默认配置less 例如： a:umi.js （蚂蚁金服前端框架）按照该框架官方文档引入即可 2.手动配置Less即可 a.首先先创建一个初始的React-app。此时，就算import less也无法应用，因为React提供的脚手架为creact-react-app默认配置sass。 b.接下来，就是固定的npm安装less npm install less less-loader --save c.在创建好的项目文件夹中找...
最近使用React Hooks结合zarm组件库，基于js对象配置方式开发了大量的h5表单页面。大家都知道h5表单功能无非就是表单数据的收集，验证，提交，回显编辑，通常排列方式也是自上向下一行一列的方式显示 ， 所以一开始就考虑封装一个配置化的页面生成方案，目前已经有多个项目基于此方式配置开发上线，思路和实现分享一下。 使用场景 任意包含表单的h5页面（使用zarm库，或自行适配自己的库） 目标代码实现简单和简洁 基于配置 新手上...
在react中，大家有的使用装饰器，比如路由，或者mobx等，但是会发现默认脚手架不支持，接下来就说一下怎么配置，网上大部分都是使用npm eject来弹出脚手架的默认配置，但这样并不优雅，社区提供了其他方案来解决修改配置的方式 首先安装，以下几个依赖customize-crareact-app-rewired@babel/plugin-proposal-decoratorsyarn add customize-cra react-app-rewired @babel/plugin-proposal-decorators然后在package.json中添加配置 "...
文件目录-home --api --page --route-blog --api --page --route-poetry --api --page --route-photos --api --page --route-index.js其中，route/index 做类似如下配置，如export default [/**path: 定义路由的路径*component: 需要展示页面路径*name: 本个路由的名字*lazy: 这个路由是否懒加载*/{ path: "/", component: /home, name: "首页", lazy: true, auth: true } ];-index.js，配置import React, {lazy, Suspense} from r...