React ·

通过脚手架来构建react项目

前言

在刚开始学习react时,基本上是通过手动来搭建项目的整个框架结构,包括webpack的配置文件,各种插件的安装及配置,如果每次构建项目都这么做,那么会浪费掉很长的一段时间。所以希望有一个类似于vue-cli的脚手架来快速构建项目,并上手开发。Facebook官方针对于这一情况发布了一个脚手架:creat-react-app。通过这个脚手架我们可以快速的完成一个项目的搭建。

初始化项目

首先我们需要做的是全局安装这个脚手架

npm install -g create-react-app

然后进入我们的工作空间,来创建我们的项目

create-react-app project-name  
cd project-name

上面的project-name代表的是你的项目名称。上述命令运行完成以后,我们的项目基本上算是搭建完成了。搭建完成后的项目结构非常的简洁,应该是下图。

你会发现,在这个项目结构中找不到webpack的相关配置文件,这样会让一些人感到一头的雾水,我如果添加新的插件该怎么办呢?

自定义webpack

带着上面的疑问,我在网上进行了查找,发现webpack的相关配置文件被隐藏掉了,为了项目的整洁,官方将其隐藏在了node_moudle/react-scripts中,打开这个文件夹你会发现好多关于webpack的相关配置。

当然,如果你觉得在node_module中查找,然后在修改很麻烦,你可以通过命令行的方式来让隐藏的配置文件显示出来,但是这种方式是不可逆的,也就是说显示了以后就无法在隐藏了。

npm run eject

通过这个命令以后,你就可以自由的配置项目了。例如,通过脚手架来架构起来的项目是不支持less语法的,你可以通过安装lessless-loader来使其支持,需要修改config目录下的webpack.config.dev.js,按照下图的方式来就该即可。其他的插件修改方式和webpack的添加插件方式大同小异,不再一一赘述。

参与评论