01react 打造画廊应用 项目生成

在上一章呢,我们已经介绍了react 编写基本的三大件,html,css,js的写法,
我们都知道现代app都有一个很著名的脚手架工具Yeoman ,在web的立项阶段,使用Yeoman来生成项目所需的文件的代码结构,Yeoman自动将最佳 实践和工具整合进来,大大加速和方便了我们的后续开发,Yeoman本身基于Node.js 构建,
在本地已经安装Node.js的环境的时候,运行 npm install -g yo 来安装Yeoman.
如果有人对Yeoman还不是太了解,或者想了解更多有关Yeoman的内容,学习Grunt Beginner
安装好了以后首先运行一下 yo –version ,看下版本.
到yeoman的官网搜索相关的项目生成器,discovering generators 选项 搜索框里直接搜索,react .
默认的结果是按照生成器的star 书来排列的.

---

首先,安装generator :npm install -g generator-react-webpack ,安装好了之后我们怎么看generator-react-webpack的版本呢? npm ls -g depth=1 2>/dev/null | grep generator-

npm ls -g depth=1来限制树状结构展示 ,最多往下一层,
2>/dev/null 尖括号>标识重定向 , 而在bash里 ,单独的一个1,表示standout 表示标准输出, 2表示 standerro 表示标准错误.
dev/null 代表空设备文件 ,
就是过滤掉错误信息

---

yo react-webpack gallery-by-react

运行安装 react-webpack 创建 项目 名称为gallery-by-react 的项目.

node_modules 项目编译所需node 组件.
src :源代码所在的目录
test : 测试代码所在的目录.
.editorconfig:用来统一不同的 编辑器 IDE的编码风格 ,这个是它的配置文件,editorconfig 的官网
eslintrc ,jshintrc ,一般看到这种,就是代码风格检测工具,一般一个jshintrc就够了,但是有了react JSX 之后,jshintrc并不支持JSX 的语法.
eslintrc 就隆重登场了
eslint jshint 的配置文件
yo-rc.json yeoman 的配置文件 ,用来记录当前项目的一些信息
Gruntfile.js Grunt 自动化编译工具的配置文件 .
karma.config.js karma 测试框架的配置文件 .
LISENCE :协议文件 ,生成github 项目的时候生成的项目文件MIT license .
package.json: node项目的配置文件 :声明当前项目的一些信息 ,都依赖哪些npm 包的
webpack.config.js 和webpack.dist.config.js 分别是webpack 开发环境和生产环境 的配置文件

新版本没有Gruntfile.js文件，可以进行如下操作来代替老师的grunt server命令：
cd 项目目录
node server.js