一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情
5. React脚手架
5.1 Forward
- 前端工程复杂化：
- 目录结构如何组织划分；
- 管理文件之间的相互依赖；
- 管理第三方模块的依赖；
- 项目发布前压缩、打包项目；
- 解决以上问题的工具：
- babel、webpack、gulp，配置转换规则、打包依赖、热更新等
- 使用脚手架
5.2 脚手架(scaffold)
- 定义：项目的基本工程化结构相似，因此可以利用工具生成基本工程化模版
- 优点：搭建快速便捷，保证项目基本结构一致，方便后期维护
- 前段脚手架：Vue(vue-cli)、 angular(angular-cli)、 React(creat-react-app)
- 使用脚手架基础：安装node(已知的脚手架都是用node编写，且基于webpack)
5.3 相关安装
- 安装node：LTS版本(LongTermSupport)，自带安装工具npm(node packages manager)
- yarn安装： npm install -g yarn (sudo 安装权限不够在最前方加上)
- yarn包管理工具：早期出现弥补npm缺陷(安装依赖慢、版本管理混乱)，React默认使用yarn
- 脚手架安装：npm install -g create-react-app
5.4 通过脚手架创建React项目
- 注意事项：项目名称不能包含大写字母(可以用 _ or - 分割单词)
- 创建方式：create-react-app project_name (其他创建方式参考github中readme文档)
- npx create-react-app my-app
- npm init react-app my-app
- yarn create react-app my-app
- 运行项目：打开项目文件夹后 yarn start -> 打开reactlogo的网页代表项目创建运行成功
- 默认开启本地服务：http://localhost:3000/
- yarn start启动项目本质：执行package.json文件中script对象中的start -> 'react-script start' -> webpack启动项目
5.5 新建项目文件作用
-
node_modules: 当前项目依赖
-
public:
- favicon.icon -> 图标
- logo192.png/ log512.png -> 图片(与manifest有关)
- index.html -> 项目入口 (多数项目采用单页面复用 -> 仅一个html文件)
- manifest.json -> 配置web app
- robots.txt -> 设置爬虫规则
-
src: 源代码文件[重要]
- App.css -> App的CSS文件
- App.js -> App函数式组件 (修改会立即编译更新界面 -> 热更新 hot reload)
- App.test.js -> 测试
- index.css -> 全局样式
- index.js -> react代码入口
- log.svg -> svg图片
- reportWebVitals.js //minelostthisfile * serviceWork.js -> 注册PWA
- setupTests.js -> 初始化测试
-
.gitignore: git忽略文件
-
package-lock.json: 真实(固定)的版本依赖
-
package.json: 管理依赖库、项目配置信息
-
README.md: 项目md文档
-
notes：
- 分享时删除node_modules
- 打开项目时重新安装依赖： yarn install
其他相关知识
5.6 PWA了解
- 概念： 渐进式WEB应用(Progressive Web App)，具有安装和离线功能的网页，需要添加APP Manifest和Service Worker来实现
- 作用：
- 可以添加至主屏幕(点击图片可以实现启动动画及隐藏地址栏)
- 实现离线缓存功能
- 实现消息推送
- 实现一系列Native App相关功能
5.7 webpack了解
- 概念：静态模块打包器(module bundler)
- 作用：递归地构建依赖关系图(dependency gragh)，包含应用程序所需要的模块，将所有模块打包成一个(或多个)bundle
- modules with dependencies -> static assets
- 暴露脚手架中的webpack相关文件：yarn eject
- 新增了文件夹 webpack、node_modules、scripts，新增了package中的依赖，暴露了script中start实际运行的node文件
5.8 git
- 确定所有改变 git add .
- 提交 git commit -m 'notes'
