前言今天篇幅可能比较短，主要介绍一个这段时间开发的脚手架——FastReactApp。这是一个基于Parcel2开发的React.js项目脚手架。虽然不如前端界流行的Vite和占据稳定地位的CreateReactApp，但基本的项目开发还是可以的。下面我将介绍FastReactApp的一些特性：开箱即用地支持JS、CSS、HTML、文件资产等——无需插件。使用动态import()语法，它会拆分输出包，以便您仅在初始加载时加载您需要的内容。当您在开发过程中进行更改时，它会自动更新浏览器中的模块，无需配置。它使用工作进程来支持多核编译，并且有一个即使在重启后也能快速重建的文件系统缓存。现在会生成tree-shaking包的源映射，并在引用未知符号时显示友好的错误消息。它对ReactFastRefresh有一流的支持。它（在大多数情况下）能够在重新加载之间保持状态（即使在错误之后）。我们定义名字FastReactApp，你会看到Fast这个词，中文是“快”的意思，那么它有多快呢？让我们来看看。我们先看看初始化时安装依赖需要多长时间。只用了4.80s。那么，接下来我们看一下热重载的时间。只用了499ms，是不是感觉很快呢？这都要归功于Parcel2，它使用工作进程来支持多核编译，并且有一个即使在重启后也能快速重建的文件系统缓存。或者，使用动态import()语法拆分输出包。以下是Parcel2的官网，您可以查看它的其他功能。https://v2.parceljs.org/要构建FastReactApp项目，我们首先需要安装FastReactApp。这里需要全局安装FastReactCli，它是FastReactApp的命令脚手架，可以更快的为你生成FastReactApp项目。在安装之前，你需要确保你的Node版本>=12.0.0。全局安装输入命令：npminstallfast-react-cli-g初始化项目输入命令：fast-react-cliinit示例：这里我初始化一个名为myreact2的项目，选择fast-react-app@1.0.1项目模板。然后回车，项目初始化完成。查看版本，输入命令：fast-react-cli-v我们目前的fast-react-cli最新版本是1.1.7。安装项目依赖我们使用fast-react-cli安装了FastReactApp，接下来我们需要安装项目依赖。安装前需要注意以下几点：如果你的项目需要导入图片，需要使用@parcel/transformer-image依赖，可以调整图片大小，改变图片的格式和质量。为了进行这些图像转换，它依赖于图像转换库Sharp，因此需要将几个特定的??文件导入到NPM缓存路径下的特定文件夹中。1、获取文件，打开网址：https://github.com/lovell/sharp-libvips/找到两个符合自己电脑环境的文件，下面就是这两个文件，xxx代表电脑环境。1.libvips-8.9.0-xxx.tar.gz2.libvips-8.10.5-xxx.tar.brdarwin-x64一般指MacOS环境，win32-x64一般指Windows环境。2.找到文件夹键入以下命令获取npm缓存路径：npmconfiggetcache获取路径后，将两个符合你电脑环境的文件放到_libvips文件夹下的这个文件夹中。就是这样。如果你的项目没有介绍图片，可以忽略以上内容。另外需要删除package.json文件中“devDependencies”属性中的@parcel/transformer-image依赖，项目中默认会导入图片，删除图片地址对应的代码段即可，因为这个依赖是默认安装的。我们默认我们的项目需要它，然后我们就完成了上面需要注意的工作。所以，现在您可以安装依赖项了。输入命令：npminstall运行项目输入命令：npmrunserve这里需要声明项目默认安装了mocker-api，mocker-api为RESTAPI创建了一个mockAPI。当您尝试在没有实际RESTAPI服务器的情况下测试您的应用程序时，它会很有用。因此，使用concurrently并行运行多个命令（同时运行前后端服务）。这里的mocker-api只适用于开发环境。项目默认端口号为：3000，当然你也可以修改package.json文件中的默认配置。"scripts":{"start":"parcel./public/index.html--port3000--no-source-maps","build":"parcelbuild./public/index.html--no-source-maps","api":"mocker./mock/mocker.js","serve":"concurrently\"yarnapi\"\"yarnstart\""},--port3000这里可以修改端口，这一行的命令配置基于Parcel2，更多配置请参考：https://v2.parceljs.org/features/cli/我们在浏览器输入http://localhost:3000/。项目成功启动。要发布项目，请输入命令：npmrunbuild以将生产应用程序生成到buildDir文件夹。它在生产模式下正确反应并优化构建以获得最佳性能。构建被缩小并且文件名包含哈希。您的应用程序已准备好部署。介绍完FastReactApp的资源，如果项目搭建好了，我们来看看FastReactApp默认为我们安装的资源依赖。parcelconcurrentlymocker-apieslintbabel-plugin-importantdaxiosimmutablereactreact-domreact-reduxreact-routerreact-router-domreduxredux-immutableredux-thunkstyled-componentsweb-vitals前三个我们已经介绍好了，这里不再赘述。接下来，我们将挑选几个有代表性的资源依赖进行介绍。Eslint可谓是现代前端开发过程中必不可少的工具。它的用法很简单，但是效果很好。不知道多少次帮我减少了使用过程中可能出现的bug。其实仔细想想前端开发过程中必备的工具，好像并没有那么多工具。ESLint是必备之一，值得深入挖掘以了解其工作原理。babel-plugin-import是一个babel插件，在编译过程中自动将导入方式转换为按需导入方式。antd是一个基于AntDesign设计体系的ReactUI组件库，用于开发企业级中后台产品。AntDesign2.0官网上有两句发人深省的话，我特别喜欢。“AntDesign不能保证商业产品的成功，但可以帮助商业产品“正确地成功”或“正确地失败”。”AntDesign不仅追求“用户”的体验，也追求“设计师”和“开发者”.用户体验。”不可变对象是不能直接赋值的对象，可以有效避免错误赋值的问题。在react中，不可变主要是防止状态对象被错误赋值。在Rudux中，因为深拷贝消耗太多的性能（递归用于逐层复制每个节点）。但是当你使用不可变数据时：只会复制你更改的节点，从而节省性能。不可变的不可变性使纯函数更强大，返回的特性每次一个newimmutable可以让程序员对其进行链式操作，使用起来更方便styled-components有以下几点：1.样式写在js文件中，减少js对css文件的依赖。2.样式可以使用变量，更加灵活。3.简单易用，无需配置webpack，开箱即用。可以说做到了“Allinjs”。web-vitals库是一个小型（~1K）模块化库，用于衡量真实用户的所有webvitals指标，与Chrome衡量这些指标的方式完全匹配，并向其他Google工具（例如ChromeUXReport、PageSpeedInsights、SearchConsole的速度报告）。结论FastReactApp官方文档网址：https://www.maomin.club/site/fastReactApp/
