React 脚手架

• 编程中脚手架是一种工具,可以帮我们快速生成项目的工程化结构

npm

• 全称 Node Package Manager, 即 node 包管理工具
• 作用是帮我们管理依赖的工具包(比如,react,react-dom,axios,babel,webpack 等)
• 作者开发的目的就是为了解决 模块管理很糟糕 的问题
• 在国内,某些情况使用 npm 和 yarn 可能无法正常安装一个库,这个时候我们可以选择使用 cnpm
  npm install -g cnpm --registry=https://registry.npm.taobao.org

yarn

• yarn 是由 Facebook、google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具
• yarn 是为了你补 npm 的一些缺陷而出现的
• 早期的 npm 存在很多的缺陷,比如安装依赖进度很慢,版本依赖混乱等等一系列问题, 虽然从 npm5 版本开始,进行了很多升级和改进,但是依然很多人喜欢使用 yarn
• React 脚手架默认也是使用 yarn
• yarn 安装指令 npm install -g yarn, -g 是全局安装的意思,安装完成后可以使用 yarn --version 查看版本

• yarn 和 npm 命令对比如下:

  
  

React 脚手架

• React 脚手架: create-react-app, 可以帮我们生成一个通用的目录结构,并且已经将我们所需要的工程环境配置好

• React 脚手架是使用 node 编写的,并且是基于 webpack 的,所以必须要在自己的电脑上安装 node 环境。

• 安装指令: npm install -g create-react-app, 安装成功后可以使用 create-react-app --version 查看版本

使用创建 React 项目

• 命令: creact-react-app 项目名称

• 需要注意的是项目名称不能包含大写字母

• 创建完成后进入对应的目录,就可以将项目跑起来

• cd 项目名称
• yarn start

目录结构

• 脚手架创建好的项目目录结构及文件用途如下:

  
  

• index.html 作为整个应用程序的入口文件,是有 webpack 指定的,如果要改需要在 webpack 中修改

• package.json: 包管理文件, 版本号之前带^表示可以自动升级小版本,如果要确认具体使用的是那个版本可以在 yarn.lock 中查看

• yarn.lock: 依赖包际安装的什么版本

• 可以将 src 文件夹下的文件全部删除, public 文件下除 favicon.ico 和 index.html 外的文件也删除

PWA

• PWA 全称 Progressive Web App, 即渐进式 WEB 应用
• 一个 PWA 应用首先是一个网页,可以通过 Web 技术编写出一个网页应用, 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能
• 这种 Web 存在的形式,我们也称之为是 Web App
• PWA 解决了那些问题

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

webpack

• React 的脚手架是基于 webpack 来配置的,它是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)

• 当 webpack 处理应用程序时,他会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

  
  
• 在 react脚手架创建的目录结构中并没有看到任何 webpack 相关内容, 原因是 React 脚手架将 webpack 相关的配置隐藏起来了
• 如果想看到 webpack 的配置信息,可以执行 package.json 文件中的一个脚本: "eject":"react-scripts eject", 执行命令yarn eject 这个命令是不可逆的
• 显示 webpack 相关配置信息后目录结构如下,多了 config 和 scripts 文件夹