前言

构建React项目的几种方式:

  • create-react-app 脚手架快速搭建 react 项目(推荐)
  • yeoman 脚手架搭建 react 项目
  • webpack 一步一步构建 react 项目

脚手架是什么

脚手架是一种约定和规范。可以实现如下规范:

  • 相同的文件组织结构;
  • 相同的开发范式;
  • 相同的模块依赖;
  • 相同的工具配置;
  • 相同的基础代码;

 然后脚手架将这些重复性的约定、规范全部都集成起来,减少这样无意义的操作。

create-react-app 脚手架快速搭建 React 项目

Create React App 中文文档

要求: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 — 脚手架,自动生成工具;
  • Gruntgulp — 构建工具 (最初只有grunt,后面gulp火了添加进来的);
  • Bowernpm — 包管理工具 (原来是 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