react构建前端项目方法汇总

react简介：

　　

一、使用react 创建一个PC端的项目

　　(a)：使用 yemon 创建一个 webpack 的 react 的项目

　控制台安装并且产看 yemon 的版本

yo -v

　　（b）: 全局安装 webpack react 的模板 genrator，如果安装过了，就跳过

npm install -g generator-react-webpack

　　(c)：进图项目目录文件：执行

yo react-webpack  +项目名字

这样我们的项目就创建好了，在项目根目录下执行

npm run start

项目就在本地运行起来了，一般来说端口号是 8000 、8080 或者 8888.

在浏览器输入：

http://localhost:8000/
就能看到运行起来的网站了

常用命令
启动开发环境服务器
$ npm start //或者 $ npm run serve
启动压缩版本的服务器
$ npm run serve:dist //或者 $ npm run dist
测试
$ npm test

不推荐这种方式，因为版本更新以及这种构建出来的项目附带插件太多。

二、手动配置react pc 项目

根据所需配置项目，包括版本等。

进入项目目录：执行（首先确保安装了yarn 这里不做介绍）

yarn init

执行之后项目中会多出一个 package.josn 文件。

添加项目依赖（这里直接将常用的放这里一次性添加，后续根据项目需要可在添加插件），在原json 文件中 添加

"scripts": {
    "dev"       : "node_modules/.bin/webpack-dev-server",
    "dist"      : "WEBPACK_ENV=online node_modules/.bin/webpack -p",
    "dist_win"  : "set WEBPACK_ENV=online&& node_modules/.bin/webpack -p"
  },
  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-preset-env": "1.6.1",
    "babel-preset-react": "6.24.1",
    "css-loader": "0.28.8",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.6",
    "html-webpack-plugin": "2.30.1",
    "node-sass": "4.7.2",
    "sass-loader": "6.0.6",
    "style-loader": "0.19.1",
    "url-loader": "0.6.2", // 图片base 64处理
    "webpack": "3.10.0",
    "webpack-dev-server": "2.9.7"
  },
  "dependencies": {
    "prop-types": "15.6.0",
    "rc-pagination": "1.15.1",
    "react": "16.2.0",
    "react-dom": "16.2.0",
    "react-router-dom": "4.2.2",
    "simditor": "^2.3.6"
  }

添加webpack配置，添加 webpack.config.js 文件，内容如下

const path              = require('path');
const webpack           = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

let WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';
console.log(WEBPACK_ENV);
module.exports = {
    entry: './src/app.jsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: WEBPACK_ENV === 'dev'
            ? '/dist/' : '//s.jianliwu.com/admin-v2-fe/dist/',
        filename: 'js/app.js'
    },
　　 // 别名设置，项目中引入的话 需要找到项目的文件，有时候深的话不好找，而且文件目录变化的话 引入路径就也得变化，利用这个设置别名
    resolve: {
        alias : {
            page        : path.resolve(__dirname, 'src/page'),
            component   : path.resolve(__dirname, 'src/component'),
            util        : path.resolve(__dirname, 'src/util'),
            service     : path.resolve(__dirname, 'src/service')
        }
    },
    module: {
        rules: [
            // react(jsx)语法的处理
            {
                test: /\.jsx$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'react']
                    }
                }
            },
            // css文件的处理
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            // sass文件的处理
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            },
            // 图片的配置
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: ,
                            name: 'resource/[name].[ext]'
                        }
                    }
                ]
            },
            // 字体图标的配置
            {
                test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: ,
                            // 输出位子 名字
                            name: 'resource/[name].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        // 处理打包之后的文件
        // 处理html文件
        new HtmlWebpackPlugin({
            template: './src/index.html',
            favicon: './favicon.ico'
        }),
        // 独立css文件
        new ExtractTextPlugin("css/[name].css"),
        // 提出公共模块
        new webpack.optimize.CommonsChunkPlugin({
            name : 'common',
            filename: 'js/base.js'
        })
    ],
    devServer: {
        port: ,
        historyApiFallback: {
            index: '/dist/index.html'
        },
        proxy : {
            '/manage' : {
                target: 'http://admintest.happymmall.com',
                changeOrigin : true
            },
            '/user/logout.do' : {
                target: 'http://admintest.happymmall.com',
                changeOrigin : true
            }
        }
    }
};

在项目根目录下创建 src dist 两个文件夹，src是放源码的地方，dist是打包代码目录。

src下创建

模板文件 Index.html 后续打包生成的 html 文件模板为这个文件：例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewPort" content="width=device-width,initial-scale=1">
    <meta name="author" content="Rosen">
    <title>HAPPY MMALL</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
    <div id="app"></div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

src下创建 app.jsx 文件

import React            from 'react';
import ReactDOM         from 'react-dom';
import { BrowserRouter as Router, Switch, Redirect, Route, Link } from 'react-router-dom'

class App extends React.Component{
    render(){
        return (
            <div id="page-wrapper">hello word</div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

然后控制台执行

yarn install

然后（reademe）

# 后台管理系统安装和启动方式

## 环境依赖:
```
安装 nodejs v6..3版本
安装 yarn
```

## 项目初始化方式:
```
安装依赖包： yarn
```

## 开发模式运行:
```
yarn run dev
```

## 线上打包:
Mac / Linux系统：
```
yarn run dist
```
Windows系统：
```
yarn run dist_win
```

运行便可以跑起来。所需插件版本以及所需常用的打包方法都已包括，可根据项目自行去添加。

三、官网提供的安装方式

官网提供了两种安装，第一种是新建一个react项目。第二种是 在已有的项目安装 react

（a): 新建一个react项目。

全局安装，react 提供的安装工具，全局安装

yarn global add create-react-app

然后在要建立项目的地方执行

create-react-app name

安装完成之后会有

这样项目就建立起来了，不过这种有一个问题，在packge.json 文件我们能看到基本什么都没有，是因为他吧所有的配置全部都集成在了"react-scripts" ，这样的话入股哦我们想更改配置会很麻烦，但是同样他也提供了方法。yarn eject，执行这个会把所有的配置全部提取出来。

进入项目之后执行

yarn eject

他会问你是否确定这样不可退回 确定

然后就会吧项目的配置单独给提出来。

四、常用react构建项目

构建pc以及native项目，已经构建好的框架直接使用，

https://github.com/ant-design/antd-mobile-samples/tree/1.x/rn-web

蚂蚁金融react脚手架：
https://mobile.ant.design/docs/react/introduce-cn

.48版本搭建环境：
https://reactnative.cn/docs/0.48/getting-started.html

https://reactnative.cn/docs/0.46/getting-started.html
.46版本的项目创建

安装完yarn之后就可以用yarn代替npm了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install --save 某第三方库名。

注意：目前npm5（发文时最新版本为5.0.4）存在安装新库时会删除其他库的问题，导致项目无法正常运行。请尽量使用yarn代替npm操作。