「 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 等 语法及 使用等问题还请多看官网文档。最后，若有问题欢迎留言指出，共同窗习。