yeoman+webpack+react

yeoman+webpack+react

yeoman

脚手架工具，项目开始阶段，使用yeoman来生成项目的文件和代码结构，yeoman自动将最佳实践和工具整合进来，大大加速和方便了我们后续的开发

安装

npm install yo -g

安装项目生成器

yeoman根据不同的项目生成器， 生成不同需求的代码，可以在yeoman的首页 选择Discovering generators 搜索相应的生成器，然后安装

我们选择webpack-react生成器

npm install generator-webpack-react -g

查看已安装的生成器

npm ls -g --depth 1 2>/dev/null | grep generator-

npm ls -g 查看全局npm安装的包

--depth 1 因为npm的包会依赖其他npm包，所以它是树状输出，一层一层比较难查看，所以这里限制树状结构展示最多为一层

2>/dev/null >在我们bash中表示重定向, 单独的1表示标准输出，单独的2表示错误输出，/dev/null表示空设备

这里的是意思是将错误输出重定向到空设备，也就是过滤掉错误信息

| 是管道符， 将上一个命令的输出作为下一个命令的输入

使用:

mkdir gallery-by-react
cd gallery-by-react
yo react-webpack gallery-by-react

生成的一些文件的意思：

.editorconfig editorconfig配置文件 用来统一不同的编辑器的编码风格，前提是你的编辑器安装了支持  editorconfig的插件

.jshintrc .eslintrc  一般看到hint lint这种就是代码检测工具

一般情况下我们用 jshintrc就够了， 但是jshintrc不支持jsx语法， eslintrc是支持的

关于react-hot 热更新

webpack