前言
构建React项目的几种方式:
- create-react-app 脚手架快速搭建 react 项目(推荐)
- yeoman 脚手架搭建 react 项目
- webpack 一步一步构建 react 项目
脚手架是什么
脚手架是一种约定和规范。可以实现如下规范:
- 相同的文件组织结构;
- 相同的开发范式;
- 相同的模块依赖;
- 相同的工具配置;
- 相同的基础代码;
然后脚手架将这些重复性的约定、规范全部都集成起来,减少这样无意义的操作。
create-react-app 脚手架快速搭建 React 项目
要求:Node >= 8.10 并且 npm >= 5.6
1、安装 create-react-app
npm install -g create-react-app
2、检测 create-react-app 是否安装成功
create-react-app -V
3、创建 React 项目
npx create-react-app my-app
cd my-app
npm start
说明:npx 是 npm 5.2+ 附带的 package 运行工具。
默认,create react app 创建的项目是看不到 webpack 相关的配置的,如果熟悉 webpack 的小伙伴,知道 package.json 中的配置会很多,而react脚手架中的 package.json 中,依赖为什么这么少。
这是因为像 webpack,babel 等等都是被 creat react app 封装到了 react-scripts 这个项目当中,包括基本启动命令 都是通过调用 react-scripts 这个依赖下面的命令进行启动的。
npm run eject 会将原本 creat react app 对 webpack、babel 等相关配置的封装弹射出来。
如果我们要将 creat react app 配置文件进行修改,现有目录下是没有地方修改的。此时,我们就可以通过 eject 命令将原本被封装到脚手架当中的命令弹射出来,然后就可以在项目的目录下看到很多配置文件。但这个操作是不可逆的,我们无法再通过其他方式将这些暴露出来的配置还原回去。
npm run eject
Yeoman 脚手架搭建 React 项目
1、Yeoman是什么?
Yeoman 最初发布于 2012 年,是一款高效、开源的 Web 应用脚手架(scaffolding)软件,意在精简软件的开发过程。
Yeoman 是现代化前端项目的脚手架工具,可以根据一套模板用于生成包含指定框架结构的工程化目录结构。它是整个前端自动化工厂的第一站,灵活而且很容易扩展。
不同于 vue-cli 这样的工具。Yeoman 更像是一个脚手架的运行平台,可以通过 Yeoman 搭配不同的 generator 去创建任何类型的项目。也就是说我们可以通过创建自己的 generator 从而去定制属于我们自己的前端脚手架。
随着前端工程化的理念不断深入,越来越多的人选择使用脚手架来从零到一搭建自己的项目。随着业务的不断发展,必然会出现需要针对业务开发的实际情况来进行调整。
总而言之,随着业务发展,我们往往会沉淀出一套更“个性化”的业务方案。这时候我们最直接的做法就是开发出一个该方案的脚手架来,以便今后能复用这些最佳实践与方案。
- Yeoman 提供了一种灵活创建、开发、编译和调试 Web 应用的脚手架(scaffolding)软件。
- 虽然 Yeoman 本身是 JavaScript 编写的,但适用于任何语言编写的应用。
- Yeoman 支持与 Webpack、Babel、TypeScript、React 和 Angular 等多种第三方软件库的无缝集成。
- Yeoman 内建立有一个基于 Node.js 的 HTTP 开发服务器,简化了开发环境的设置和开发过程的迭代。
- Yeoman 实现构建过程由开发环境到优化后生产环境间的无缝转移。
Yeoman 其实是3个工具的总和:
yo
— 脚手架,自动生成工具;Grunt
、gulp
— 构建工具 (最初只有grunt
,后面gulp
火了添加进来的);Bower
、npm
— 包管理工具 (原来是bower
,后面添加了npm
);
上面的三个是各自独立发展和运行的,混合后效果就不一样,主要在于yo
,相当于一个粘合剂一样,把grunt
这些工具粘合在一起。
2、安装 Yeoman
npm install -g yo //权限不够,请加上 sudo,一般来说mac都需要。
3、安装 generator 模板
npm install -g generator-react-webpack
4、创建 React 项目
创建一个文件夹
mkdir my-new-project && cd my-new-project
用生成器生成我们的项目目录
yo react-webpack
运行 React 项目
npm start