搭建react项目的两种方法

一. 利用create-react-app (项目react-one-app)

先安装 cnpm install -g create-react-app
安装后搭建 create-react-app (项目名称不能用大写,可以用小驼峰-例如: create-react-app react-one)


缺点:
    1. 搭建比较慢,网速慢的会非常的慢
    2. 东西太过集成,webpack之类的包都在node_modules里边,不容易配置webpack的操作
优点:
    1. 无需配置: 官方的配置,几乎完美不需要再进行修改,可以直接上手项目
    2. 高集成性: 集成了React,ES6,JSX和Flow的支持
    3. 自带服务: 集成了开发服务器,方便预览调试
    4. 热更新:   保存自动更新
    5. 全兼容性: 自动处理CSS兼容问题,无需手动添加-webkit-前缀
    6. 自动发布: 集成了发布功能,编译后直接发布,并包含了调试的sourcemaps功能

二. 结合webpack的 generator-react-webpack (项目react-two-app)

需要先安装yeoman  cnpm install -g yo
安装工具 cnpm install -g generator-react-webpack

安装后搭建
    先创建文件  mkdir react-tow-react
    切换       cd react-two-react
    安装搭建   yo react-webpack

缺点:
    1. 需要依靠yeoman安装
优点:
    1. 基于webpack搭建,易于修改配置内容
    2. 支持ES6,集成了Bebel-loader
    3. 支持不同风格CSS(CSS,Less,Sass,Stylus)
    4. 集成语法检测ESLint功能
    5. 可以轻松配置单元测试

三. 利用webpack自己配置搭建React环境 (项目 react-three-app)

**没有安装cnpm的朋友可以安装下,安装配置快一些**
npm install -g cnpm --registry=https://registry.npm.taobao.org

(对webpack的详细不做过多解释在此处,对webpack不了解的朋友可以到
webpack中文网站: https://doc.webpack-china.org/concepts/
也可以到其他技术博客查看    )
1. npm init -y 
    然后创建文件,文件结构为

2. cnpm install --save-dev webpack
    配置webpack.congig.js(website的地址根据自己的config配置)

此处对website的配置适用于学习,项目中应用需要配置开发模式和生产模式

3. 安装服务 cnpm install --save-dev webpack-dev-server
    配置package.json 配置打包(npm run build)和运行(npm run dev)的执行命令

此处对的配置适用于学习,项目中应用需要配置开发模式和生产模式 (windows注意描述)

4. 配置 html的打包
      安装 cnpm install --save-dev html-webpack-plugin
      配置 在webpack.congfig.js

5. 配置sass样式处理 
    安装 style-loader css-loader node-sass sass-loader 四个配置可以单独安装
    cnpm install --save-dev style-loader css-loader node-sass sass-loader  
    配置 sass 在webpack.config.js 中module里边的rules

6. 配置 es6和jsx语法解析
    安装  babel-core babel-loader babel-preset-env babel-preset-react
    cnpm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
   配置在webpack.config.js 中module里边的rules

新建文件并配置

7. 配置react  
    安装 react react-dom
    cnpm install --save-dev react react-dom

这步完成后可以制作一些小dom和组件了

接下来的是对图片的打包以及css的优化

1. 配置打包背景图片(背景图片和html内部img的图片打包不一样)
    安装 file-loader url-loader
    cnpm install --save-dev 

2. 配置打包html的img图片

    安装 cnpm install --save-dev html-withimg-plugin
    
3. 配置CSS分离
    安装 cnpm install --save-dev extract-text-webpack-plugin
 
4. 配置消除多余CSS
    安装 purifycss-webpack和purify-css

/*/yeoman 是Google和第三方开发者开发的yeoman和bower以及Grunt成为以前有 '前端构建三剑客'