React 脚手架使用

脚手架解决的问题

如果只是开发较小的前端 demo，那没必要使用脚手架工具（Scaffold）。

但是如果开发大型前端项目，尤其多人共同开发时就需要面对以下问题：

• 目录结构如何组织划分
• 如何管理文件之间的相互依赖
  • 比如通过模块化方式将 JavaScript 编写在众多文件中，如何管理它们之间的相互依赖
• 如何管理第三方模块或第三方库
• 项目发布前如何压缩、打包项目
• 如何将 less、sass 等语言转换为可被浏览器正常解析的 css
• …

为解决上述问题，对应出现一系列工具，通过配置 babel、webpack、gulp 等工具完成语言转换、打包依赖、热更新等一系列问题，而脚手架可以认为是上述工具的集合体。

脚手架优点

脚手架可以快速生成项目的工程化结构。

虽然每个项目最终呈现的效果不同，但是其基本的工程化结构式相似的。基于此，完全可以使用一些
工具，帮助生成基本的工程化模板，避免每次费神费力地从零搭建项目。

在此工程化模板的基础上，针对不同的项目可以进行不同的项目配置与项目构建，间接保证项目的基本结构一致性，方便后期的项目维护。

总结：使用脚手架工具可以使项目流程（从搭建到开发，再到部署）变得快速、便捷。

前端脚手架

现在流行的三大框架都有属于自己的脚手架：

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

共同作用：帮助生成一个通用的目录结构，帮助配置开发所需的工程环境。

注：目前这些脚手架均由 node 编写，并且基于 webpack，所以需要 node 环境。

create-react-app 生成目录结构

my-app
├── README.md // readme 说明文档
├── node_modules // 项目依赖文件
├── package.json // 对整个应用的描述：应用名称、版本号、项目的启动和打包脚本等
├── .gitignore // Git 忽略提交规则
├── public
│   ├── favicon.ico // 应用程序顶部的 icon 图标
│   ├── index.html // 应用的 index.html 文件
│   └── manifest.json // web app 配置相关
└── src
    ├── App.css // App 组件相关样式
    ├── App.js // APP 组件代码文件
    ├── App.test.js // APP 组件的测试代码文件
    ├── index.css // 全局样式文件
    ├── index.js // 整个应用程序的入口文件
    ├── logo.svg // 页面呈现的 React 图标
    └── serviceWorker.js // 提前写好的注册 PWA 相关代码
    └── setupTests.js // 测试初始化文件

除以上文件，你有可能看到以下文件：

• logo192.png：在 manifest.json 中使用
• logo512.png：在 manifest.json 中使用

了解 PWA

PWA（Progressive Web Apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。

PWA 即是一个网页，需要通过 Web 技术实现一个网页应用，辅以 App Manifest 和 Service Worker 实现 PWA 的安装和离线等功能，亦称之为 Web App。

PWA 解决的问题：

• 网页可以添加至移动端主屏幕并生成图标，点击图标可以实现启动动画以及隐藏地址栏等功能
• 实现离线缓存功能，在无网环境下，依然可以使用一些离线功能
• 实现消息推送
• 等一系列类似于 Native App 相关功能

了解 Webpack

三大框架的脚手架都是基于 Webpack 进行配置。

Webpack 是一个现代 JavaScript 应用程序的 静态模块打包工具（module bundler），当其处理应用程序时，会递归地构建一个包含应用程序所需的每个模块的依赖关系图（dependency graph）。