react项目整理（react基础+react全家桶+ant-ui知识）基础篇(一)

本文链接：https://blog.youkuaiyun.com/bojikeqian/article/details/120664341

基础知识点项目地址：https://github.com/yangxinjian/reactPractice.git
完整项目地址（主要是这个）
https://github.com/yangxinjian/reactAntBike.git
在这里插入图片描述

准备阶段-基层环境
安装node.js（官网下载即可）

node -v (查看是否安装node完成)

安装yarn新一代的包管理工具facebook开发，你也可以选择cnpm
yarn的速度会比npm快
安装版本统一，更安全
更简洁的输出
更好的语义化

sudo cnpm install yarn -g
yarn -v（查看是否安装yarn完成）

使用git在马云上进行托管，并在本地clone下来项目

git clone 你项目的地址
cd 你的项目

配置gitignore（git命令忽视）

vim .gitignore
i(编辑命令)
.DS_Store (Mac自带)
node_modules (node包)
dist (打包的压缩文件)
*.log（错误信息等）

初始化项目

yarn init  / cnpm init

提交项目

git add . （保存到暂存区）
git commit -m '备注信息' （把暂存区内容保存到分支）
git pull (拉取其他分支代码)
git push (将更新内容提交进入远程分支)

安装webpack打包工具(配置规则查看webpack章节)
yarn add webpack --dev / cnpm install webpack --dev
在根目录下创建一个webpack.config.js文件

需要处理的文件类型

html => html-webpack=plugin
js es6 => babel + babel-preset-react
css => css-loader + sass-loader
img => url-loader + file-loader
常用模块

html-webpack-plugin => html单独打包成文件
extract-text-webpack-plugin => 样式打包成单独文件
CommonsChunkPlugin => 提出通用模块
webpack-dev-server

(1) 为webpack项目提供web服务
(2) 更改代码自动刷新，路径转发
(3) yarn add webpack-dev-server --dev
(4) 解决多版本共存
1.配置webpack，在创建好的webpack.config.js中配置
添加模块输出口

    const path = require('path')
    module.exports = {
        entry: './src/app.js',
        output: {
            path: path.resolve(__dirname, 'dist'), // __dirname代表根目录
            filename: '你想输出的文件名字.js'
        }
    }

添加html插件

    yarn add html-webpack-plugin --dev // 生成html5文件插件
    
    在webpack.config.js中设置

     const path = require('path')
     const HtmlWebpackPlugin = require('html-webpack-plugin') // 引入插件
     module.exports = {
        entry: './src/app.js',
        output: {
            path: path.resolve(__dirname, 'dist'), 
            filename: '你想输出的文件名字.js'
        },
        plugins: [ // 使用插件
            new HtmlWebpackPlugin({
                  template: '.src/index.html' // 引用模板自定义html文件，使打包出来的html与此文件一致
            })
        ]
    }

添加babel插件（将es6语言转换成es5）

     yarn add babel-core@6.26.0 babel-preset-env@1.6.1 babel-loader@7.1.2 --dev // 安装
   
     在webpack.config.js配置
     const path = require('path')
     const HtmlWebpackPlugin = require('html-webpack-plugin')

     module.exports = {
        entry: './src/app.js',
         output: {
             path: path.resolve(__dirname, 'dist'),
             filename: 'app.js'
         },
         module: {
             rules: [
                 {
                     test: /\.js$/,
                     exclude: /(node_modules)/,// 将不需要装换的文件夹排除
                     use: {
                         loader: 'babel-loader',
                         options: {
                             presets: ['env']
                         }
                     }
                 }
             ]
         },
          plugins: [
             new HtmlWebpackPlugin({
                 template: '.src/index.html'// 引用自定义html文件
             }) // 生成html5文件
         ]
     }

安装react的插件

yarn add babel-preset-react --dev / cnpm install babel-preset-react --dev

      yarn add html-webpack-plugin --dev // 生成html5文件插件
  
  在webpack.config.js中设置

   const path = require('path')
   const HtmlWebpackPlugin = require('html-webpack-plugin') // 引入插件
   module.exports = {
      entry: './src/app.js',
      output: {
          path: path.resolve(__dirname, 'dist'), 
          filename: '你想输出的文件名字.js'
      },
      plugins: [ // 使用插件
          new HtmlWebpackPlugin({
                template: '.src/index.html' // 引用模板自定义html文件，使打包出来的html与此文件一致
          })
      ]
  }

添加babel插件（将es6语言转换成es5）

     yarn add babel-core@6.26.0 babel-preset-env@1.6.1 babel-loader@7.1.2 --dev // 安装
   
     在webpack.config.js配置
     const path = require('path')
     const HtmlWebpackPlugin = require('html-webpack-plugin')

     module.exports = {
        entry: './src/app.js',
         output: {
             path: path.resolve(__dirname, 'dist'),
             filename: 'app.js'
         },
         module: {
             rules: [
                 {
                     test: /\.js$/,
                     exclude: /(node_modules)/,// 将不需要装换的文件夹排除
                     use: {
                         loader: 'babel-loader',
                         options: {
                             presets: ['env', 'react'] // 只需要在这里引用react
                         }
                     }
                 }
             ]
         },
          plugins: [
             new HtmlWebpackPlugin({
                 template: '.src/index.html'// 引用自定义html文件
             }) // 生成html5文件
         ]
     }

安装样式的插件

> 安装css
yarn add style-loader@0.19.1 css-loader@0.28.8 --dev

在项目src中新建一个index.css页面，并在app.jsx中引入页面

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'

安装webpack打包css成独立文件的插件
yarn add extract-text-webpack-plugin@3.0.2 --dev

在webpack.config.js中更改对css的配置配置

引入 
const ExtractTextPlugin = require('extract-text-webpack-plugin')

 {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({ // 这里改变
            fallback: 'style-loader',
            use: 'css-loader'
        })
  }
由于这是一个插件，需要在plugin中配置

> 安装sass

yarn add sass-loader --dev
yarn add node-sass --dev

在webpack.config.js中rules css配置下添加
 {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ['css-loader', 'sass-loader']
        })
  }
对图片的处理

yarn add url-loader --sev

在webpack.config.js中配置
{
          test: /\.(png|jpg|gif)$/,
          use: [
              {
                  loader: 'url-loader',
                  options:{
                      limit: 8192 // 文件大于8k被当做文件
                  } 
              }
          ]
 }
对字体图标的处理

yarn add font-awesome

{
          test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
          use: [
              {
                  loader: 'url-loader',
                  options:{
                      limit: 8192 // 文件大于8k被当做文件
                  } 
              }
          ]
 }
对公共模块的处理

在plugin中处理

   const path = require('path')
   const webpack = require('webpack')  //为了引用webpack自带方法
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   const ExtractTextPlugin = require('extract-text-webpack-plugin')

   module.exports = {
       entry: './src/app.jsx',
       output: {
           path: path.resolve(__dirname, 'dist'),
           filename: 'js/app.js'
       },
       module: {
           rules: [
               {
                   test: /\.jsx$/,
                   exclude: /(node_modules)/, // 将不需要装换的文件夹排除
                   use: {
                       loader: 'babel-loader',
                       options: {
                           presets: ['env', 'react'] // 自动根据环境打包
                       }
                   }
              },
               {
                   test: /\.css$/,
                   use: ExtractTextPlugin.extract({
                       fallback: 'style-loader',
                       use: ['css-loader']
                   })
               },
               {
                   test: /\.scss$/,
                   use: ExtractTextPlugin.extract({
                       fallback: 'style-loader',
                       use: ['css-loader', 'sass-loader']
                   })
               },
               {
                   test: /\.(png|jpg|gif|jpeg)$/,
                   use: [
                       {
                           loader: 'url-loader',
                           options:{
                               limit: 8192, // 文件大于8k被当做文件
                               name: 'resource/[name].[ext]'
                           } 
                       }
                   ]
               },
               {
                   test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
                   use: [
                       {
                           loader: 'url-loader',
                           options:{
                               limit: 8192, // 文件大于8k被当做文件
                               name: 'resource/[name].[ext]'
                           } 
                       }
                   ]
               }
           ]
       },
       plugins: [
           new HtmlWebpackPlugin({
               template: './src/index.html'// 引用自定义html文件
           }), // 生成html5文件
           new ExtractTextPlugin('css/[name].css'), // 将样式单独打包出来生成新的css页面
           // 提出公共模块,webpack自带
           new webpack.optimize.CommonsChunkPlugin({
               name: 'common',// 手动指定的通用木块
               filename: 'js/base.js'
           })
       ]
   }
webpack 自动刷新处理webpack-dev-server

  yarn add webpack-dev-server

  在config下与plugin同级加上
  devServer: {
  }
  为了防止打包后的图片在根目录下找不到
  output: {
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/dist/',  //在这里添加路径
      filename: 'js/app.js'
  },

  编译打包就用webpack-dev-server就可以了
使用react环境搭建项目

      yarn add react react-dom

      在app.js中引用react结构，并将app.js的后缀更改为jsx，webpack.config.js中的js配置也要变成jsx,入口文件的js也要更改为jsx

      import React from 'react'
      import ReactDOM from 'react-dom'
package.json的配置

      "scripts": {
        "dev": "node_modules/.bin/webpack-dev-server",
        "dist": "node_modules/.bin/webpack -p"
      },