创建React项目全过程

前言

构建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

拓展阅读

• YEOMAN官网
• 官方生成器

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论