反应式脚手架如何少配置、按需加载

前言

Create-React-app是构建新React单页应用的最佳方式，由React官方提供，推荐使用。默认情况下，由它构建的项目不支持更少的内容，需要我们手动集成

一、反应堆脚手架设置

1.先全局安装create-react-app(需要提前安装节点)

Npm install -g create-react-app2，然后通过create-react-app创建my-app

Create-react-app my-app3。最后，通过cd进入项目文件夹并启动它

CD my-app纱start4。终端出现如下界面表示启动成功，在浏览器中输入http://localhost 33603000/即可看到react的初始页面

二、目录结构

node_modules-dependency包public-global文件src-project文件.git ignore-git package.json-project配置文件忽略的文件目录readme.md-自述文件

安装后如何配置少加少装纱器？此时需要通过webpack来配置less-loader，但我们在上面的目录结构中似乎找不到webpack.config.js文件，因为为了实现“零配置”，scaffolding默认会将一些常用的脚本和配置集成到react-scripts中，这样我们就可以专注于src目录下的开发工作，而不用担心环境配置。同时，集成的脚本和配置将从程序目录中消失，程序目录将变得更加干净

接下来，我们需要通过纱线弹出来展示网络包配置

第四，公开网络包配置

执行退纱

提示：执行此命令后，构建的依赖项、配置文件和脚本将被复制到程序目录中。这个操作是不可逆的，命令执行后会被删除，也就是说只能执行一次

配置完成后，我们会发现在我们的目录结构中还有两个文件夹：

在配置文件夹中，有三个关于webpack的配置文件：

Webpack.config.dev.js开发环境配置webpack.config.prod.js生产环境配置webpack kdevserver . config . js开发服务器配置五.修改Webpack配置文件

步骤1:在webpack.config.dev.js文件中找到以下代码，并在sassModuleRegex之后添加lessRegex和lessModuleRegex变量

步骤2:在下面添加这两个代码

步骤3:以同样的方式配置网络包

不及物动词测试

1.将src目录中的App.css更改为无App文件，并添加

@ title-color : # f00；app-link { color : @ title-color；}2.然后在App.js中导入较少的文件

“进口”。/app . less '；3.返回页面刷新，发现字体变红，表示配置成功

七.集成Ant设计并配置按需加载

蚂蚁金服：是蚂蚁金服推出的优秀react UI库，里面包含了很多我们经常使用的组件，对小白学习react非常友好！

1.首先，需要安装antd

Yarnadantd2，安装完成后，我们可以直接在代码中使用它的ui组件

从“antd”导入{ Button }；导入“antd/dist/antd . CSS”；这种方法的优点是直接加载简单，无需重新配置，但麻烦。每次加载一个新的组件，都需要先加载组件，再加载组件的css文件，所以性能比较差

3.使用巴别塔插件导入按需加载

纱添加巴别塔-插件-导入-保存-dev4，安装完成后，在package.json中找到巴别塔配置项，然后给它添加插件

注意：在这里，需要通过退纱来暴露babel配置项。原始的package.json没有这个配置项。5.最后，您只需要从antd导入模块，而不需要单独介绍样式。babel-plugin-import将帮助您加载JS和CSS。

从“antd”导入{ Button }；6.事实上，还有其他按需加载antd的方法。官方推荐使用react-app-rewired实现antd的按需加载。详情请参考： https://ant.design/docs/react/use-with-create-react-app-cn#高级配置

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。