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: 8192,
                            name: 'resource/[name].[ext]'
                        }
                    }
                ]
            },
            // 字體圖標的配置
            {
                test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            // 輸出位子 名字
                            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: 8086,
        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.12.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

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

https://reactnative.cn/docs/0.46/getting-started.html
0.46版本的項目創建

 

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

 

注意：目前npm5（發文時最新版本為5.0.4）存在安裝新庫時會刪除其他庫的問題，導致項目無法正常運行。請盡量使用yarn代替npm操作。