- 编程中脚手架是一种工具,可以帮我们快速生成项目的工程化结构
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 文件夹
网友评论