现代 React Web 开发实战
宋一玮
FreeWheel 中国研发中心前端架构师
16115 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 31 讲
现代 React Web 开发实战
15
15
1.0x
00:00/00:00
登录|注册

14|现代化React:现代工程化技术下的React项目

你好,我是宋一玮,欢迎回到 React 应用开发的学习。
在第1213节课,我们学习了 React 的单向数据流,以及怎么用面向接口编程的思想指导组件设计开发。同时我们一起为 oh-my-kanban 做了一次大重构,实践了刚学到的概念和方法。可以说,我们在学习写 React 应用代码方面,已经获得了阶段性进展。
但也需要知道,写出来的源码毕竟还不能用来上线,还得经过 npm run build 打包构建出生产环境代码,然后才能上线。你可能会好奇,这个命令都做了什么?这个命令是 CRA,由 Create React App 脚手架工具提供,它的内部对开发者而言是个黑盒。要想了解它,我们得先把黑盒打开,或者,用更好的方式:自己搭一个白盒出来。
还记得在上节课末尾的预告吗?这节课我会带着你,不依赖 CRA,用现代的工程化技术重新搭建一个 React 项目,然后把 oh-my-kanban 的代码迁移过来,让它真正成为你自己的项目。
好的,现在开始这节课的内容。

CRA 为我们做了什么?

第 3 节课,我们用 FB 官方提供的 CRA 脚手架工具创建了 oh-my-kanban 项目,在这之后我们就一直专注于代码开发,再也没有关注过项目配置了。现在 oh-my-kanban 项目开发已经步入正轨,是时候回过头来看看 CRA 为我们做了哪些事情。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文介绍了使用现代化工程化技术搭建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归属地:北京
    2
    1
  • 船长
    记得想要 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归属地:北京
    3
    1
  • 百里
    最近独立负责一个项目,这个课程像及时雨一样,助我成长
    2023-01-24归属地:辽宁
收起评论
显示
设置
留言
6
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部