YEOMAN快速搭建前端项目结构

yeoman简介 记得去年在看慕课网上Materliu的一门课程Grunt-beginner前端自动化工具时,第一次接触到yeoman,当时有点不懂这玩意。最近在老师的另一门React实战–打造画廊应用再次使用到yeoman,只是我没有用yeoman而是选择了react官网的脚手架create-react-app去搭建项目。不过确认过眼神两次,我还是得把它记录下来。
在yeoman的官网,给出的一个定义是:THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS,即现代web app的脚手架工具。其实就类似于vue的vue-cli,react的create-react-app,但他们只是专用的脚手架。项目开始阶段,使用yeoman来生成项目的文件和代码结构,yeoman自动将最佳实践和工具整合进来,大大加速和方便了我们后续的开发。
1.yeoman安装 yeoman官网
(1)首先是全局安装yeoman工具

npm install -g yo

(2)需要安装相应的生成器(generators) 生成器的npm包名普遍是generator-XYZ格式
比如我现在需要的是生成一个react项目,我们点击官网的discovering generators就可以搜索项目的generator,会有相应的安装教程。
现在我们安装一个生成器(会有详细说明和使用教程)
npm install -g generator-react-webpack

2.使用生成器搭建项目
# Create a new directory, and `cd` into it: mkdir my-new-project && cd my-new-project# Run the generator yo react-webpack

3.运行项目 这个需要看你的项目,我们根据生成器说明和使用教程来使用。
4.最后介绍查看生成器的命令
npm ls -g --depth=0 2>/dev/null | grep generator-

npm ls -g 查看全局npm安装的包
--depth 0因为npm的包会依赖其他npm包,所以它是树状输出,一层一层比较难查看,所以这里限制树状结构展示层数
2>/dev/null >在我们bash中表示重定向, 单独的1表示标准输出,单独的2表示错误输出,/dev/null表示空设备,这里的是意思是将错误输出重定向到空设备,也就是过滤掉错误信息
【YEOMAN快速搭建前端项目结构】| 是管道符, 将上一个命令的输出作为下一个命令的输入

    推荐阅读