✨ 个人主页：CoderHing
🖥️ React.js专栏：React脚手架解析
🙋♂️ 个人简介：一个不甘平庸的平凡人🍬💫 系列专栏：吊打面试官系列 16天学会Vue 11天学会React Node专栏
🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️
👉 你的一键三连是我更新的最大动力！❤️
目录
一、认识脚手架工具
前端工程的复杂化
脚手架是什么?
前端脚手架
二、create-react-app
安装node
三、创建React项目
创建React项目
目录结构分析
了解PWA
四、webpack配置
脚手架中的webpack
一、认识脚手架工具
前端工程的复杂化
-
如果我们只是开发几个小demo,那么就不需要考虑这些问题:
-
目录结构如何组织划分,
-
如何管理文件之间的相互依赖
-
如何管理第三方模块依赖
-
项目发布前的压缩,打包
-
等...
-
-
现代的前端项目越来越复杂化
-
不会再是HTML引入css,引入几个js或者第三方js那么简单
-
如css可能是less,scss等预处理器,我们需要将其转换成普通的css才能被浏览器解析
-
如JavaScript代码不再只是编写在几个文件中,而是通过模块化的方式,被组成在成百上千的文件中,需要通过模块化的技术来管理他们之间的相互依赖
-
如项目需要依赖的第三方库,如何更好的进行管理(版本升级等..)
-
-
为了解决上面的问题,我们需要去学习一些工具
-
如babel,webpack,gulp,配置他们转换规则,打包依赖,热更新等一些内容
-
脚手架的出现是帮助我们解决这一系列问题的
-
脚手架是什么?
-
传统的脚手架指的是建筑学的一种结构:在搭建楼房,建筑物时,临时搭建出来的一个框架
-
编程中的脚手架(Scaffold),其实是一种工具,帮助我们快速生成项目的工程化结构
-
每个项目完成的效果不同,但是他们的基本工程化结构是相似的
-
既然相似,就没必要去从零进行开发,完全可以使用一些工具,帮助我们生产基本的工程化模板
-
不同的项目,在这个模板的基础上进行项目开发或进行一些配置的简单修改即可
-
这样也可以间接保证项目基本结构一致,方便后期的维护
-
-
脚手架让项目从搭建到开发,再到部署,整个流程变得快速和便捷
前端脚手架
-
对于现在比较流行的三大框架都有属于自己的脚手架:
-
Vue的脚手架: @vue/cli
-
Angular的脚手架: @angular/cli
-
React的脚手架:create-react-app(CRA)
-
-
他们的作用都是帮助我们生成一个通用的目录结构,并且将我们所需的工程环境配置好.
-
使用这些脚手架需要依赖什么呢?
-
目前这些脚手架都是使用node编写,并且都是基于webpack的
-
所以我们必须在电脑上安装node环境
-
二、create-react-app
安装node
-
React脚手架本身需要依赖node,所以我们需要安装node环境
-
无论是windows还是mac OS 都可以通过node官网直接进行下载
-
这里推荐使用LTS版本,是长期支持版本,比较稳定
-
三、创建React项目
创建React项目
-
创建React项目的命令如下:
-
注:项目名称 不能包含大写字母
-
另外还有更多创建项目的方式,可参考github的Readme
-
create-react-app 项目名称
-
-
-
创建完成之后,进入对应的目录,就可以将项目跑起来:
目录结构分析
-
我们可以通过VSCode打开项目:
- public
-- favicon.ico // 应用程序顶部的icon图标
-- index.html // 应用的index.html入口文件
-- logo192.png // 在manifest.json中使用
-- logo512.png // 在manifest.json中使用
-- manifest.json // 和web app配置相关
-- robots.txt // 指定搜索引擎可以或者无法爬取哪些文件
- src
-- App.css // App组件相关样式
-- App.js // App组件代码文件
-- App.test.js // App组件的测试代码文件
-- index.css // 全局样式文件
-- index.js // 整个应用程序的入口文件
-- logo.svg // 启动项目所看到的React图标
-- reportWebVitals.js // 发送一些包之类的东西
-- setupTests.js // 测试初始化文件
- package.json // 对整个应用程序的描述:包括应用名称,版本,依赖包,及项目启动,打包等.
- README.md // readme说明文档了解PWA
-
整个目录结构都非常好理解,只是有一个PWA相关的概念:
-
PWA全程Progressive Web App 即 渐进式WEB应用
-
一个PWA应用首先是 一个网页 可以通过Web技术编写出一个网页应用
-
随后添加上 App Manifest 和 Service Worker 来实现PWA的 安装和离线 等功能
-
这种Web存在的形式,也称之为是Web App
-
-
PWA解决了哪些问题?
-
可以添加至主屏幕,点击主屏幕图标可以实现启动动画及隐藏地址栏
-
实现 离线缓存功能,用户手机没网,依然可以使用一些离线功能
-
实现 消息推送
-
等一系列类似于 Native App相关的功能
-
四、webpack配置
脚手架中的webpack
-
React脚手架默认是基于Webpack来开发的
-
但是,很奇怪,我们并没有在目录结构中看到任何webpack相关的内容?
-
React脚手架将webpack相关的配置隐藏起来了
-
-
如果我们希望看到webpack的配置信息,应该怎么做?
-
可以执行一个pack.json文件中的一个脚本: "eject": "react-scripts eject"
-
这个操作是不可逆的,所以执行过程中会给我们提示
-
npm run eject
-
