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

Author Avatar
carvenzhang 5月 30, 2016
  • 在其它设备中阅读本文章

接触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生成一个项目的事例。