✨ 个人主页：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