之前vue的学习中使用Vue-cli 可以快速创建vue项目,所以在学习React的时候我就在想有没有类似于cli的脚手架可以帮助我们快速构建React项目。然后我就找到了...很多!官方有一个cerate-react-app被吐槽不好用,还有大神基于Vue-cli改造了一个!React Demo 。
更多则是基于Yeoman的,这里找到两个不错的脚手架,分别是generator-reactpackage和generator-react-webpack。前者适合小型项目,默认使用sass。后者功能更为完善,部署时提供css,sass,less选项,适合大中型项目。
顺带提一下找到的一个不错的模板:react-seed,虽然作者说是脚手架,但个人感觉更像一个模板,配置相当全面,克隆下来改改就能直接上手,也是十分方便快速的。
这里就以generator-reactpackage为例简要介绍一下React脚手架配置。
有兴趣自己开发脚手架的可以移步:开发属于自己的yeoman脚手架(generator-reactpackage) ,这篇博客对yeoman开发脚手架做了详细的介绍。
检查Node.js版本为最新
这里不多说,不知道怎么升级的参照:一行命令搞定node.js 版本升级,或者干脆直接去官网下载最新版本覆盖安装。
替换npm源为淘宝源
npm config set registry “https://registry.npm.taobao.org”
之前的开发中多是使用cnpm,后来实际上手中发现generator-reactpackage在创建好项目后会自动执行npm install
去安装依赖,如果不事先将npm源替换为淘宝源,因为网络的问题,install的过程会巨慢而且易出错。
安装脚手架
因为这个脚手架是使用yeoman开发,所以需要先安装yeoman,这里使用全局安装:
npm install -g yo
然后安装脚手架,依然是全局安装:
npm install -g generator-reactpackage
创建React项目
先在工作目录新建项目文件夹,使用命令行定位到该文件夹下,键入:
yo reactpackage
随后reactpackage会在改目录中创建项目所需文件,完成后显示:I'm all done.字样,并随后自动执行npm install && bower install去安装项目中的依赖。安装完成后键入:
npm run dev
项目即开始自动处理,手动打开浏览器输入:loaclhost:8888 即可看到页面,支持热加载。
如果想在启动项目后自动打开浏览器,可以参照这个:webpack 启动后自动打开浏览器插件:open-browser-webpack-plugin