「 react+react-router4+redux+webpack3+antd 」 項目實踐

前言

隨着前端的發展，如今好多公司都會在招人簡歷上寫着要熟悉 react vue angular 中的一種，好多朋友以前都是擼 jquery，可是面向工資編程，不會這些也不行啊？ok , 轉向 react 好多朋友會直接拿着腳手架跑一個 todolist ，可是好多腳手架 和本身的需求不同，而且依賴的插件框架不斷更新，更新項目依賴又很可能致使項目崩潰，因此，仍是建議直接本身從頭搭建一個，用到什麼新的功能隨時往上面添加。我根據一年半react的使用經驗，寫了個簡易的demo， 項目 github 地址 移步這裏，不正確之處還望指出。

項目基本介紹

一 初始化項目，搭建目錄結構

隨便找個文件夾，建立個目錄

mkdir react-first 
cd react-first
npm init
複製代碼

而後開始傻瓜式的回車，這時候會生成package.json 文件。

在項目根目錄下建立 src 文件夾，咱們的主體代碼都會寫在這個裏面，在src 下面建立main.js 這個是咱們的項目打包入口文件，和index.html。 同時，在根目錄下建立webpack.config.js 用於配置webpack 打包。

二 安裝項目依賴，配置打包說明

安裝項目依賴（所有依賴移步 package.json 查看）

npm install react react-dom  react-router-dom --save
複製代碼

注意： react-router 升級到4 以後，須要安裝的是 react-router-dom

安裝 redux 相關包

npm install redux react-redux redux-thunk --save
複製代碼

安裝相關語法的解析包

npm install webpack babel-cord babel-loader babel-preset-env  babel-preset-react  --save 
複製代碼

配置 webpack 打包（完整代碼移步 項目 查看）

//定義打包入口
webpack_conf.entry = {
    app: './src/main.js',
};

//指定輸出路徑
webpack_conf.output = {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: debug? '[name].js':'[hash:8].[name].js',
    chunkFilename: debug? '[name].js':'[name].[chunkhash].js',
};


// 須要引用的插件
webpack_conf.plugins = [
    new webpack.DefinePlugin({
        "process.env":{
            NODE_ENV:JSON.stringify(env)
        }
    }),
    new webpack.optimize.CommonsChunkPlugin({
        names: ['vander', 'manifest'],
        minChunks: Infinity
    }),
    new HtmlWebpackPlugin({
        template: path.join(__dirname + `/src/index.html`),
        hash: false,
        favicon: path.join(__dirname,'/src/static/favicon.ico'),
        filename: 'index.html',
        minify: {
            collapseWhitespace: true
        }
    }),
];
if(debug){
    webpack_conf.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    )
}else{
    webpack_conf.plugins.push(
        new webpack.optimize.UglifyJsPlugin()
    )
}

// 解析
webpack_conf.module.rules = [
    {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        include: [
            path.resolve(__dirname, "src")
        ],
        loader: "babel-loader",
    },
];
module.exports = webpack_conf;
複製代碼

在根目錄建立.babelrc 配置babel規則

{
  "presets": ["env","react","stage-0"],
  "comments": false,// 忽略註釋
  "plugins": [
    "syntax-dynamic-import",// 解析import 語法 ，用於懶加載
    "transform-object-rest-spread",// 對象展開符 
    "transform-decorators-legacy",//裝飾模式插件
    [
      "import", {"libraryName": "antd", "style": true} // 按需加載 antd
    ]
  ]
}
複製代碼

三. 編寫入口文件，引入路由

首先貼出一張項目目錄結構圖

是否是以爲有點跳，剛開始仍是 一個index.html 一個main.js , 怎麼忽然搞出來這麼多，（別打臉 主要是篇幅有限。大致介紹下每一個目錄，

dist:打包生成文件

componend: 項目的組件，好比 Header,Footer,Dialog等

pages : 包含每一個頁面

reduces/stores :redux 相關邏輯

tools: 工具庫。static: 靜態文件

）

下面貼下主要的文件

1 入口文件 main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router } from 'react-router-dom';// 引入router ,同步history 和 store
import createBrowserHistory from 'history/createBrowserHistory'
const history = createBrowserHistory();
import createStore from './stores/createStore.js';
const initialState = window.___INITIAL_STATE__ || {};
const store = createStore(initialState);

import routers from './pages/index'
const ROOT_NODE = document.getElementById('root');

import './assets/base.less';

const render = (routes) => {
    ReactDOM.render((
        <Provider store={store}>
            <Router onUpdate={() => window.scrollTo(0, 0)} history={history} children={routers}/>
        </Provider>
    ), ROOT_NODE);
};

render(routers);

複製代碼

2. pages 下面的路由文件

import React from 'react'
import { Route,Switch, Redirect,
} from 'react-router-dom';
const NotFound = () => (
    <div>not fount</div>
)
import Home from './Home/index';
import About from './About/index'
import Header from '../components/Header/index'
let routes = (
    <div>
        <Header/>
        <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Redirect to="/" />
        </Switch>
    </div>
)
export default routes;
複製代碼

3. 單個模塊（以pages/Home 模塊爲例）

1. assets 樣式 文件
2. components 主要邏輯 react代碼
3. container 高階組件用connect接收redux中狀態
4. modules redux 中 action 和 reduces 邏輯

更多細節仍是但願您多打多試試，本篇幅不是新手教程，react redux 等 語法及 使用等問題還請多看官網文檔。最後，若有問題歡迎留言指出，共同窗習。