7.脚手架搭建React项目

# 脚手架搭建项目 ### 1. 认识脚手架工具 - 1.1. 前端工程的复杂化 - 1.1.1. 如果只是开发几个小的demo程序，那么永远不要考虑一些复杂的问题： - 比如目录结构如何组织划分； - 比如如何关键文件之间的相互依赖； - 比如管理第三方模块的依赖； - 比如项目发布前如何压缩、打包项目； - 等等... - 1.1.2. 现在的前端项目已经越来越复杂： - 不会在是HTML中引入几个css文件，引入几个编写的js文件或者第三方的js文件这么简单； - 比如css可能是使用less、sass等预处理器编写，需要将它们转换成普通的css才能被浏览器解析 - 比如Javascript代码不再只是编写几个文件中，而是通过模块化，被组成在成败上千个文件中，需要通过模块化来管理它们之间的相互依赖； - 比如项目需要依赖很多的第三方那个库，如何更好的管理它们(比如管理它们的依赖，版本升级等) - 1.1.3. 为了解决上面这些问题，需要学习一下工具； - 比如babel、webpack、gulp,配置它们转规则、打包依赖、热更新等等内容； - 脚手架的出现，就是帮助解决这一系列的问题的 - 1.2. 脚手架是什么？ - 1.2.1. 传统的脚手架指的是建筑学的一种结构： 在搭建楼房、建筑物时，临时搭建出来的一个框架； - 1.2.2. 编程中提到的脚手架(scaffold), 其实是一种工具，可以快速生成项目的工程化结构； - 每个项目做出完成的效果不同，但是它们的基本工程化结构是相似的； - 既然相似， 就没有必要每次都从零开始搭建，完全可以使用一些工具，帮助生成基本的工程化模块； - 不同的项目，在这个模块的基础之上进行项目的开发或者进行一些配置的简单修改即可； - 这样也可以间接保证项目的基本结构一致性，方便后期维护； - 1.2.3. 总结：脚手架让项目从搭建到开发，再到部署，整个流程变得快速和便捷； - 1.3. 前端脚手架 - 1.3.1. 对于现在比较流行的三大框架都有属于自己的脚手架： - React的脚手架：`create-react-app` - Vue的脚手架：`@vue/cli` - Angular的脚手架：`@angular/cli` - 1.3.2. 它们的作用都是帮助我们生成一个通用的目录结构，并且已经将所需的工程环境配置好了。 - 1.3.3. 使用这些脚手架需要依赖什么？ - 目前这些脚手架都是node编写的，并且都是基于webpack的； - 所以必须在电脑上安装node环境 - 1.3.4. 主要是学习React, 所以以React的脚手架工具：`create-react-app为例` - 1.3.5. React脚手架本身需要依赖node, 所以需要安装node环境； - 查看node版本，`node --version` ![](https://upload-images.jianshu.io/upload_images/30712146-a1a881d2e854ccb0.png) ### 2. react-react-app - 2.1. 安装create-react-app - `npm install create-react-app -g` ![](https://upload-images.jianshu.io/upload_images/30712146-07572a75c59567a1.png) - `create-react-app --version` ![](https://upload-images.jianshu.io/upload_images/30712146-3d5b446e44a8f371.png) ### 2.2. 创建react项目 - 2.2.1. 创建React项目的命令如下 - `create-react-app 项目名称` - 注意：项目名称不能包含大写字母 - 另外还有更多创建项目的方式，可以参考github的readme文档(`npx create-react-app my-app\npm init react-app my-app`) ![](https://upload-images.jianshu.io/upload_images/30712146-94ea703a935dd9bc.png) ![](https://upload-images.jianshu.io/upload_images/30712146-8b7788925fe9ca13.png) - 2.2.2. 创建项目成功后，进入项目目录，就可以将项目运行起来： - `cd 02_learn_scaffold` - `npm run start / npm start` ![](https://upload-images.jianshu.io/upload_images/30712146-c00704a4f4a790eb.png) - 2.2.3 目录结构分析 ![](https://upload-images.jianshu.io/upload_images/30712146-f4539353272c724b.png) - 2.2.3.1. 目录结构介绍 my-app ├── README.md // 项目说明文件 ├── node_modules // 存放第三方依赖包 ├── package-lock.json // 记录项目相关包依赖真实版本信息 ├── package.json // 记录项目相关包依赖信息 ├── .gitignore // git忽略文件 ├── public // 存放静态资源文件 │ ├── favicon.ico // 项目网站图标 │ ├── index.html // 项目入口模板文件 │ └── manifest.json // 和Web App配置相关 (pwa应用可以把网站添加到桌面图标，就像手机上安装其他的app应用一样，它作用就是想要像app一样拥有一些东西的配置文件) │ └── robots.txt // 爬虫的配置文件，用来告诉别人那些东西可以爬取，哪些不能爬取 └── src // 存放源代码 ├── App.css // App组件相关的样式 ├── App.js // App组件的代码文件 ├── App.test.js // App组件的测试代码文件 ├── index.css // 全局的样式文件 ├── index.js // 整个应用程序的入口文件 ├── logo.svg // 刚启动项目看到的React图标 └── serviceWorker.js // 离线缓存配置文件 └── reportWebVitals.js // 网页性能监测相关的文件 └── setupTests.js // 自动执行的测试配置文件 - 2.2.3.2. package-lock.json文件中的react依赖依赖 - ```js "react": { "version": "19.1.1", // 版本号 "resolved": "https://registry.npmmirror.com/react/-/react-19.1.1.tgz", // 仓库地址 "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==", //查找本地缓存，如果本地有缓存，则不会从服务器下载，直接解包本地缓存里面的东西就可以了 "requires": { // 依赖另外的包 ... } } ``` - 2.2.3.3. 了解PWA - 1. 整个目录结构都非常好理解，只是有一个PWA相关的概念； - 1.1. PWA的全称是`Progressive Web App`，即`渐进式Web应用`； - 1.2. `一个PWA应用首先是一个网页，可以通过web技术(React/Vue等等)编写出一个网页应用`； - 1.3. 随后添加上`App Manifest`和`Service Worker`来实现PWA的`安装和离线`等功能； - App Manifest文件： - 相当于间接的把一个网站变成了一个像APP一样的一个东西的配置文件，变成了一个桌面图标，一点击桌面图标可以直接打开网站，这个就是PWA想要做的一个事情； - 如果想要做一个PWA应用，它就必须要求有个Manifest文件 - Manifest文件就是关于网站想要像App一样拥有一些东西的配置文件 - ```js { "short_name": "React App", // 桌面图标名称 "name": "Create React App Sample", // 完整名称 "icons": [ // 图标 { "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" }, { "src": "logo192.png", "type": "image/png", "sizes": "192x192" }, { "src": "logo512.png", "type": "image/png", "sizes": "512x512" } ], "start_url": ".", // 指定应用启动URL "display": "standalone", // 指定应用显示模式, standalone: 表示应用以独立应用程序的形式运行，不显示浏览器的地址栏、工具栏等UI元素，提供类似原生应用的用户体验。 "theme_color": "#000000", // 指定应用主题色 "background_color": "#ffffff" // 背景色 } ``` - 1.4. 这种web存在的形式，我们也称之为`Web App`； - 2. `PWA`解决那些问题： - 2.1. 可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏； - 2.2. 实现离线缓存工鞥男，即使用户手机没有网络，依然可以使用一些离线功能； - 2.3. 实现了消息推送； - 2.4. 等等一系列类似于`Native App`相关的功能； - 3. 更多PWA相关的知识，可以参考MDN文档 - 3.1. 地址：`https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps` 本文由[mdnice](https://mdnice.com/?platform=6)多平台发布
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容