一、认识脚手架工具
前端工程的复杂化
- 如果我们只是开发几个小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
