react脚手架工具使用

YeoMan react-weback 脚手架工具使用步骤

---

1. 全局安装yoman和脚手架工具

   cnpm install -g yo
   
   cnpm install -g generator-react-webpack
   

2. 使用yo运行脚手架工具

   yo react-webpack
   

   显示如下代码，脚手架生成配置文件：

    _-----_
   |       |
   |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
   ( _´U`_ )   |   ladies and gentlemen!  |
   /___A___\   '__________________________'
   |  ~  |
   __'.___.'__
   ´   `  |° ´ Y `
   
   Out of the box I include Webpack and some default React components.
   
   ? Please choose your application name (react)
   ? Please choose your application name react
   ? Which style language do you want to use? (Use arrow keys)
   ? Which style language do you want to use? css
   .......
   

3. 回车确定，选择相对应的额less或者sass的css预编译方式。然后自动生成配置文件

4. 开始自动运行npm install来安装配置的依赖文件，等待一分钟。安装完成。

5. 分析生成的各项目文件

   • cfg 文件夹

   • dist文件夹：最终发布的文件夹，发布到服务器。是经过压缩打包的。（生产中的public）

   • src: 放置各类本地开发的资源的文件夹，包括components模块文件加，images图片文件夹，style样式文件夹等等。

   • test: 测试文件夹

   • babelIrc: ES6语法解析单独分出的一个文件。

   • editConfig: edit开头的文件一般都是约束代码风格的。

   • eslintrc: 是约束js的文件

   • gitignore: 打包过程中忽略冗杂文件，冗杂代码等等。

   • 剩余文件就是一般打包中的常见的文件（除yo自己生成的相关文件）

   • package.json 是包依赖的一个json文件。其中是项目运行的各种依赖，webpack,loaders等等。

   • webpack.config.js: 打包的配置文件，包括入口文件和输入文件，各loader的配置和插件等等配置项。

6. npm start开始运行项目，默认在本地8000端口运行。