如果我们只是开发几个小的demo程序,那么永远不需要考虑一些复杂的问题:
比如目录结构如何组织划分;比如如何管理文件之间的相互依赖;比如如何管理第三方模块的依赖;比如项目发布前如何压缩、打包项目;等等…
现代的前端项目已经越来越复杂了:
为了解决上面这些问题,我们需要再去学习一些工具:
传统的脚手架指的是建筑学的一种结构:在搭建楼房、建筑物时,临时搭建出来的一个框架;
编程中提到的脚手架(Scaffold),其实是一种工具,帮我们可以快速生成项目的工程化结构;
总结:脚手架让项目从搭建到开发,再到部署,整个流程变得快速和便捷;
对于现在比较流行的三大框架都有属于自己的脚手架:
它们的作用都是帮助我们生成一个通用的目录结构,并且已经将我们所需的工程环境配置好。
使用这些脚手架需要依赖什么呢?
这里我们主要是学习React,所以我们还是以React的脚手架工具:create-react-app作为讲解;
React脚手架本身需要依赖node,所以我们需要安装node环境:
无论是windows还是Mac OS,都可以通过node官网直接下载;
官网地址:https://nodejs.org/en/download/注意:这里推荐大家下载LTS(Long-term support )版本,是长期支持版本,会比较稳定;
下载后,双击安装即可:
1.安装过程中,会自动配置环境变量;
2.安装时,会同时帮助我们安装npm管理工具;
输入以下命令:
node --version npm --version
若出现版本号则表明安装成功了
什么是npm?
另外,还有一个大名鼎鼎的node包管理工具yarn:
npm install -g yarn
输入yarn --version
,若出现版本号输出,则表明安装成功
补充:在国内,某些情况使用npm和yarn可能无法正常安装一个库,这个时候我们可以选择使用cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
最后一个需要安装的是创建React项目的脚手架:
npm install -g create-react-app
输入create-react-app --version
,若出现版本号输出,则表明安装成功
现在,我们就可以通过脚手架来创建React项目了。
创建React项目的命令如下:
注意:项目名称不能包含大写字母
另外还有更多创建项目的方式,可以参考GitHub的readme
create-react-app 项目名称
创建完成后,进入对应的目录,就可以将项目跑起来:
cd 01-test-reactyarn start
整个目录结构都非常好理解,只是有一个PWA相关的概念:
PWA解决了哪些问题呢?
我们说过React的脚手架是基于Webpack来配置的:
在这里我们暂时不展开来讲webpack,因为里面的内容是非常多的(后续会有专门讲webpack的专题);
但是,很奇怪:我们并没有在目录结构中看到任何webpack相关的内容?
原因是React脚手架讲webpack相关的配置隐藏起来了(其实从Vue CLI3开始,也是进行了隐藏);
如果我们希望看到webpack的配置信息,应该怎么来做呢?
"eject": "react-scripts eject"
yarn eject
通过脚手架创建完项目,很多同学还是会感觉目录结构过于复杂,所以我打算从零带着大家来编写代码。
我们先将不需要的文件统统删掉:
将src下的所有文件都删除将public文件下出列favicon.ico和index.html之外的文件都删除掉
在src目录下,创建一个index.js文件,因为这是webpack打包的入口。
在index.js中开始编写React代码:
我们会发现和写的代码是逻辑是一致的;只是在模块化开发中,我们需要手动的来导入React、ReactDOM,因为它们都是在我们安装的模块中;
如果我们不希望直接在 ReactDOM.render 中编写过多的代码,就可以单独抽取一个组件App.js: