React学习笔记02-React脚手架

young 715 2022-09-30

前端工程的复杂化

如果我么那只是开发几个小的demo程序，那么永远不需要考虑一些复杂的问题：

  • 目录结构如何划分
  • 如何管理文件之间的互相依赖
  • 如何管理第三方模块的依赖
  • 项目发布前如何压缩、打包
  • …

现代前端项目已经越来越复杂

  • 不会再是在HTML中引入几个css文件，引入几个编写的js文件或者第三方js文件那么简单
  • css可能是使用less、sass等预处理器进行编写，我们需要将它们转成普通的css才能被浏览器解析
  • JavaScript代码不再只是编写在几个文件中，而是通过模块化的方式，被组成在成百上千个文件中，我们需要通过模块化技术来管理他们之间的互相依赖
  • 项目需要依赖很多的第三方库，如何更好的管理它们，如它们的依赖，版本升级等

为了解决这些问题，我们需要再去学习一些工具

如babel、webpack、gulp。配置它们的转换规则、打包依赖、热更新等

脚手架

编程中的脚手架（scaffold），其实是一种工具，可以帮我们快速生成项目的工程化结构

  • 每个项目做出完成的效果不同，但是它们的基本工程化结构是相似的
  • 结构相似，就没有必要每次都从零开始搭建，完全可以使用一些工具，帮我们生产基本的工程化模板
  • 不同的项目，在这个模板的基础上进行项目开发或者进行一些配置的简单修改即可
  • 这样可以间接的保证项目的基本结构一致性，方便后期的维护

前端脚手架

对于现在比较流行的三大框架，都有属于自己的脚手架

  • Vue：vue-cli
  • Angular：angular-cli
  • React：create-react-app

它们的作用都是帮助我们生成一个通用的项目结构，并且已经将我们所需的工程环境配置好

目前这些脚手架都是使用node编写的，并且都基于webpack

包管理工具

什么是node

  • 全称Node Package Manager，即node包管理器
  • 作用是帮助我们管理一下依赖的工具包，如react，react-dom，axios，babel，webpack等
  • node的目的就是为了解决模块管理问题

node包管理工具–yarn

  • yarn是有Facebook、google、exponent和tilde联合推出的一个新的JS包管理工具
  • yarn是为了弥补npm的一些缺陷出现的
  • 早期的npm存在很多缺陷，如安装依赖速度慢、版本依赖混乱等问题
  • 从npm5版本开始，进行很多的升级和改进
  • react脚手架默认也是使用yarn
npm install -g yarn

Yarn和npm命令对比

npm yarn
npm install yarn install
npm install [package] yarn add [package]
npm install --save [package] yarn add [package]
npm install --save-dev [package] yarn add [package] [–dev/-D]
npm rebuild yarn install --force
npm uninstall [package] yarn remove [package]
npm uninstall --save [package] yarn remove [pakcage]
npm uninstall --save-dev [package] yarn remove [package]
npm uninstall --save-optional [package] yarn remove [package]
npm cache clean yarn cache clean
rm -rf node_modules && npm install yarn upgrade

安装脚手架

npm install -g create-react-app

创建React项目

创建命令

create-react-app 项目名称

注意：项目名不能包含大写字母

更多的创建方式可以参考github的readme

创建完成之后，进入对应的项目，就可以将项目跑起来

cd 01-test-react
npm start

目录结构

.
├── README.md								readme说明文档
├── node_modules						下载的依赖包
├── package-lock.json				确定的依赖版本
├── package.json						对整个应用程序的描述：包括应用名称、版本号、一些依赖包、已经项目的启动、打包等
├── 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	默认写好的注册PWA相关的代码
    └── setupTests.js				测试初始化文件

PWA

PWA全称是Progressive Web App，即渐进式WEB应用

一个PWA应用首先是一个网页，可以通过WEB技术编写出一个网页应用

所有添加上App Manifest和Service Worker来实现PWA的安装和离线等功能

这种WEB存在的形式，也称之为Web App

PWA解决的问题

  • 可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
  • 实现离线缓存功能，即时用户手机没有网络，依然可以使用一些离线功能
  • 实现了消息推送
  • 等等一系列类似于Native App相关的功能

webpack是什么

webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)

当webpack处理应用程序时，它会递归地弓箭一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或者多个bundle

我们在目录中没有看到任何webpack相关的内容，是因为React脚手架将webpack相关的配置隐藏了，vue-cli 3也进行了隐藏

如果我们希望看到webpack的配置信息，可以在package.json中添加一个脚本"eject": "react-srcipt eject"

这个操作是不可逆的，所以在执行过程中会有提示

yarn eject

React