使用yeoman快速搭建前端项目结构

接触yeoman

最近在慕课网上观看@Materliu老师的课程React实战–打造画廊应用， 接触到了新的东西–yeoman。前端工程师可以通过yeoman快速的搭建好一个项目结构。

安装

当然，现在前端大部分工具都在node下运行，yeoman也一样，现在还没有搭建nodejs环境的前端工程师已经out啦。 所以：前提条件，已经安装了node，没有安装的，直接google安装就好。 下面是正式的搭建

安装yeoman

我们可以直接登录yeoman的官网查看Get Started教程。

1. 首先是安装yeoman工具npm install -g yo
2. 然后我们需要安装相应的生成器（generator(s)）。

生成器的npm报名普遍是generator-XYZ格式。 我们可以到yeoman的生成器页面查看需要的生成器。 比如我现在需要的是生成一个react项目，我是搜索并点击进去，会有相应的安装教程。

# 无redux版
npm install -g generator-react-webpack

或者

# 有redux版
npm install -g generator-react-webpack-redux

使用yeoman

现在我们要使用yeoman搭建一个react项目了。我安装的是无redux版的react-webpack生成器，所以我们如下操作

# 创建项目文件夹
mkdir reactExample && cd reactExample
# 生成文件结构
yo react-webpack

yo react-webpack期间也会询问一下配置，比如是否使用预编译的css之类的。选择完成后，一个完整的react项目出现了。

里面有项目文件，还有测试文件。

运行项目

npm start

运行了新建的项目后，可以看到如下画面。他们给自己打了广告

结尾

yeoman还有很多的功能运用，包括测试、生成dist文件、持续插入新模块，使用，大家看看官方文档吧。 这里仅仅简单介绍了利用yeoman生成一个项目的事例。