14｜现代化React：现代工程化技术下的React项目
CRA 为我们做了什么？
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
本文介绍了使用现代化工程化技术搭建React项目的过程，重点介绍了从Create React App（CRA）脚手架工具迁移到使用Vite构建工具搭建React项目的步骤。文章首先介绍了Vite构建工具的特点和优势，包括基于ESBuild的开发服务器和基于Rollup的生产环境构建，以及其在构建速度和优化程度上的优势。作者详细介绍了在项目中配置React插件和Emotion，以及迁移项目源码的步骤。此外，还介绍了代码静态检查工具ESLint的安装和使用，以及Git Hook工具husky和lint-staged的配置和使用。通过实际操作演示了如何使用Vite构建工具搭建React项目，并介绍了相关的工程化实践，为读者提供了一种新的项目搭建思路和方法。整体而言，本文涵盖了React项目搭建的全过程，以及相关的工程化实践，适合想要了解现代化React项目搭建流程和工程化技术的读者阅读。
《现代 React Web 开发实战》，新⼈⾸单¥59
全部留言(6)
- 最新
- 精选
- Geek_82fd2f在添加ESLint的时候，如果选择Yes也就是使用TS， Does your project use TypeScript? · No / Yes，规则里就不会出现Airbnb代码风格了，请问是不是Airbnb还不支持
作者回复: 你好，Geek_82fd2f，是的，Airbnb官方没有开源TS的代码风格，但有民间版本： https://www.npmjs.com/package/eslint-config-airbnb-typescript 感兴趣可以试试。 另外也可以参考第24课的开源项目： https://gitee.com/evisong/geektime-column-oh-my-kit/blob/main/.eslintrc.cjs
2022-11-17归属地：北京1 
huangshan可以补充一下关于turbopack相关的工程化吗？作者回复: 你好，huangshan，感谢你的建议。Turbopack虽然被称作Webpack的继任者，但（截止到2022年10月底）它的成熟度和生态还没有达到可以与Webpack、Vite（ESBuild + Rollup）媲美的地步。我会持续关注这项技术的发展，必要时可能会做加餐。
2022-10-29归属地：北京21
船长记得想要 Eslint 生效要启动 vscode 中的 eslint 插件。。作者回复: 你好，船长，感谢提醒，确实是需要的。 其他使用VSCode但还没有安装ESLint插件的同学，强烈推荐安装： https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
2022-09-30归属地：北京1
DullSword增加NPM 命令lint出错的小伙伴可以试试： ``` "lint": "eslint \"./src/**/*.{js,jsx}\"", ```作者回复: 赞！
2022-09-28归属地：北京1- 船长3-13 痛点： 没有报错提醒 没有智能提示，比如在引入 useEffect，浏览器直接报错，原因是没有在顶部 import，这时候还需要手写去引入
作者回复: 你好，船长，确实，自动import真是太有用了。如果你使用的是VSCode，可以参考 https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf 里面有快捷键 ⌃Space, ⌘I Trigger suggestion。当输入useEffect，打开代码提示，会有添加import的选项。
2022-09-27归属地：北京31 
百里最近独立负责一个项目，这个课程像及时雨一样，助我成长2023-01-24归属地：辽宁