React全家桶框架教程笔记（一）

从零搭建React全家桶框架教程笔记（一）

传送门：从零搭建React全家桶框架教程

目录

写在前面 | 说明

  1. init项目
  2. webpack
  3. babel
  4. react & 命令优化 & 文件路径优化
  5. react-router
  6. webpack-dev-server
  7. 模块热替换（Hot Module Replacement）
  8. redux
  9. devtool优化（略）
  10. 编译css
  11. 编译图片
  12. 按需加载
  13. 缓存
  14. HtmlWebpackPlugin
  15. 提取公共代码
  16. 生产坏境构建
  17. 文件压缩
  18. 指定环境
  19. 优化缓存
  20. public path
  21. 打包优化
  22. 抽取css
  23. 使用axios和middleware优化API请求
  24. 合并提取webpack公共配置 webpack-common-config
  25. 优化目录结构并增加404页面
  26. 加入 babel-plugin-transform-runtime 和 babel-polyfill
  27. 集成PostCSS
  28. redux 模块热替换配置
  29. 模拟AJAX数据之Mock.js
  30. 使用 CSS Modules
  31. 使用 json-server 代替 Mock.js
  32. 问题修复

1. React项目框架目录结构说明

│  .babelrc                          #babel配置文件
│  package-lock.json
│  package.json
│  README.MD
│  webpack.config.js                 #webpack生产配置文件
│  webpack.dev.config.js             #webpack开发配置文件
│
├─dist                               #打包生成的文件
├─public                             #公共资源文件
└─src                                #项目源码
    │  index.html                    #index.html模板
    │  index.js                      #入口文件
    │
    ├─component                      #组建库
    │  └─Hello
    │          Hello.js
    │
    ├─pages                          #页面目录
    │  ├─Counter
    │  │      Counter.js
    │  │
    │  ├─Home
    │  │      Home.js
    │  │
    │  ├─Page1
    │  │  │  Page1.css                #页面样式
    │  │  │  Page1.js
    │  │  │
    │  │  └─images                    #页面图片
    │  │          brickpsert.jpg
    │  │
    │  └─UserInfo
    │          UserInfo.js
    │
    ├─redux                           #redux控制核心
    │  │  reducers.js                 #处理整合reducers文件
    │  │  store.js
    │  │
    │  ├─actions
    │  │      counter.js
    │  │      userInfo.js
    │  │
    │  ├─middleware
    │  │      promiseMiddleware.js
    │  │
    │  └─reducers
    │          counter.js
    │          userInfo.js
    │
    └─router                        #路由文件
            Bundle.js
            router.js

2. webpack项目框架初始化

  1. 创建项目根文件夹并进入：mkdir react-family && cd react-family
  2. 初始化npm init npm：npm init -y或者自己添加信息npm init 你的信息
  3. 安装 webpack3.x版本包：npm install --save-dev webpack@3
  • 其中 --save-dev 是你开发时候依赖的东西，--save 是你发布之后还依赖的东西
  1. 根据 webpack 文档编写最基础的配置文件，根目录下新建 webpack 开发配置文件 webpack.dev.config.js：
const path = require('path');
module.exports = {
    /*入口*/
    entry: path.join(__dirname, 'src/index.js'),
    /*输出到dist文件夹，输出文件名字为bundle.js*/
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    }
};
  1. 使用webpack编译文件，在 src 目录下新建一个入口文件 index.js文件：
document.getElementById('app').innerHTML = "Webpack works"
  1. 控制台执行打包命令：webpack --config webpack.dev.config.js，生成了dist文件夹和bundle.js；
  2. 在dist文件夹下面新建一个 index.html并打开查看:
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./bundle.js" charset="utf-8"></script>
</body>
</html>

3. babel 模块使用

Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本。 这一过程叫做“源码到源码”编译， 也被称为转换编译。

  • babel-core 调用Babel的API进行转码；
  • babel-loader；
  • babel-preset-es2015 用于解析 ES6；
  • babel-preset-react 用于解析 JSX；
  • babel-preset-stage-0 用于解析 ES7 提案；

3.1 babel 模块安装配置

  1. 安装上面的babel 相关的模块：
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0
  1. 根目录下新建babel配置文件.babelrc：
  {
      "presets": [
        "es2015",
        "react",
        "stage-0"
      ],
      "plugins": []
    }
  1. 修改 webpack.dev.config.js，增加babel-loader：
    /*src文件夹下面的以.js结尾的文件，要使用babel解析*/
    /*cacheDirectory是用来缓存编译结果，下次编译加速*/
    module: {
        rules: [{
            test: /\.js$/,
            use: ['babel-loader?cacheDirectory=true'],
            include: path.join(__dirname, 'src')
        }]
    }

3.2 测试 babel 模块

测试使用ES6语法，能不能正确的转义，修改 src/index.js文件， 并执行打包命令 webpack --config webpack.dev.config.js，打开index.html文件进行查看；

    /*使用es6的箭头函数*/
    var func = str => {
        document.getElementById('app').innerHTML = str;
    };
    func('我现在在使用Babel!');

3.3 打包命令优化

优化打包命令webpack --config webpack.dev.config.js，修改根目录下的package.json文件里面的script，增加dev-build，打包只需要执行npm run dev-build就可以啦：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev-build": "webpack --config webpack.dev.config.js"
  }

4. React 模块

  1. 安装React的第三方模块：npm install --save react react-dom
  2. 修改 src/index.js，使用react框架：
import React from 'react';
import ReactDom from 'react-dom';

ReactDom.render(
    <div>Hello React!</div>, document.getElementById('app'));
  1. 执行打包命令 npm run dev-build，打开index.html 文件进行查看；
  2. 将hello代码进行抽离，使用组件化，创建src/component/Hello.js文件，使用class创建一个hello组件，并暴露出去：
import React, {Component} from 'react';
export default class Hello extends Component {
    render() {
        return (
            <div>
                Hello,React!
            </div>
        )
    }
}
  1. 修改src/index.js文件，引用Hello组件并使用：
import React from 'react';
import ReactDom from 'react-dom';
import Hello from './component/Hello/Hello';

ReactDom.render(
    <Hello/>, document.getElementById('app'));
  1. 执行打包命令 npm run dev-build，打开index.html 文件进行查看；

5. react-router 模块

5.1 react-router 模块安装使用

  1. 安装 react-router 的第三方模块：npm install react-router-dom --save；
  2. 新建 src/router/router.js文件，书写home和page1页面的 router：
import React from 'react';
import {BrowserRouter as Router, Route, Switch, Link} from 'react-router-dom';
import Home from '../pages/Home/Home';
import Page1 from '../pages/Page1/Page1';

const getRouter = () => (
    <Router>
        <div>
            <ul>
                <li><Link to="/">首页</Link></li>
                <li><Link to="/page1">Page1</Link></li>
            </ul>
            <Switch>
                <Route exact path="/" component={Home}/>
                <Route path="/page1" component={Page1}/>
            </Switch>
        </div>
    </Router>
);
export default getRouter;
  1. 新建两个页面 Home, Page1：src/pages/Home/Home.js和src/pages/Page1/Page1.js 
import React, {Component} from 'react';
export default class Home extends Component {
    render() {
        return (
            <div>
                this is home~  || this is Page1~
            </div>
        )
    }
}
  1. 入口文件src/index.js中引用Router：
import React from 'react';
import ReactDom from 'react-dom';
import getRouter from './router/router';
ReactDom.render(
    getRouter(), document.getElementById('app'));

5.2 webpack-dev-server 模块安装配置（小型web服务器）

  1. 执行打包命令 npm run dev-build，打开index.html 文件进行查看不会有效果，还需安装 webpack-dev-server配置启动WEB服务器：npm install webpack-dev-server@2 --save-dev
  2. 修改 webpack.dev.config.js文件,增加webpack-dev-server的配置：
    devServer: {
        contentBase: path.join(__dirname, './dist')  // 设置服务器访问的 URL的根目录
        port: 8888,                  // 指定一个端口号，默认是 `8080`
        historyApiFallback: true,    // 设置任意的404响应都被替代为`index.html`
        host: '0.0.0.0'              // 设置主机地址，默认是 `localhost`
        hot: true                    // 设置热加载
    }
  1. 执行命令 webpack-dev-server --config webpack.dev.config.js，浏览器打开http://localhost:8080，就可以点击首页,Page1；
  2. 优化执行命令，修改 package.json 文件，增加script->start，执行npm start命令即可:
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev-build": "webpack --config webpack.dev.config.js",
    "start": "webpack-dev-server --config webpack.dev.config.js"
  }
  1. webpack-dev-server 的其他的配置项：
    • color（CLI only） console中打印彩色日志（在命令行中配置 --color）；
    • historyApiFallback 任意的404响应都被替代为index.html；
    • host 指定一个host, 默认是 localhost；
    • hot 启用Webpack的模块热替换特性（在命令行中配置 --hot）；
    • port 配置要监听的端口，默认就是我们现在使用的8080端口；
    • proxy 代理；比如在 localhost:3000 上有后端服务的话，你可以这样启用代理：
      proxy: { "/api": "http://localhost:3000" }
    • progress（CLI only） 将编译进度输出到控制台（在命令行中配置 --progress）；

6. 模块热替换（Hot Module Replacement）

webpack文档

最简单的方法是修改 package.json文件，增加 --hot："start": "webpack-dev-server --config webpack.dev.config.js --color --progress --hot";

注意：webpack 在更新页面的时候，不能保留state等页面中其他状态；而使用 react-hot-loader 模块进行保证状态可以存下来

  1. 安装react-hot-loader 模块的依赖：npm install react-hot-loader@next --save-dev；
  2. .babelrc文件增加 react-hot-loader/babel：
{
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ]
}
  1. webpack.dev.config.js入口文件中增加react-hot-loader/patch：
    entry: [
        'react-hot-loader/patch',
        path.join(__dirname, 'src/index.js')
    ]
  1. 修改src/index.js文件：
import React from 'react';
import ReactDom from 'react-dom';
import {AppContainer} from 'react-hot-loader';
import getRouter from './router/router';

/*初始化*/
renderWithHotReload(getRouter());
/*热更新*/
if (module.hot) {
    module.hot.accept('./router/router', () => {
        const getRouter = require('./router/router').default;
        renderWithHotReload(getRouter());
    });
}
function renderWithHotReload(RootElement) {
    ReactDom.render(
        <AppContainer>
            {RootElement}
        </AppContainer>,
        document.getElementById('app')
    )
}

7. 文件路径优化(使用别名 alias)

为了简化对于引入文件的路径问题，修改webpack.dev.config.js配置文件，增加别名：

    resolve: {
        alias: {
            pages: path.join(__dirname, 'src/pages'),
            component: path.join(__dirname, 'src/component'),
            router: path.join(__dirname, 'src/router')
        }
    }

8. redux 模块（有点儿复杂）

redux中文文档

8.1 redux 模块安装使用

使用 redux，做一个最简单的计数器，具备自增，自减，重置功能：

  1. 安装 redux 的第三方模块：npm install redux --save；
  2. 初始化目录结构，新建src/redux/store.js、src/redux/reducers.js、src/redux/actions/counter.js和src/redux/reducers/counter.js；
  3. 编辑src/redux/actions/counter.js文件，定义有哪些类型的actions：
/*action*/

export const INCREMENT = "counter/INCREMENT";
export const DECREMENT = "counter/DECREMENT";
export const RESET = "counter/RESET";

export function increment() {
    return {type: INCREMENT}
}
export function decrement() {
    return {type: DECREMENT}
}
export function reset() {
    return {type: RESET}
}
  1. 编辑src/redux/reducers/counter.js文件，包含不同的actions类型触发的处理函数：
import {INCREMENT, DECREMENT, RESET} from '../actions/counter';
/*
* 初始化state
 */
const initState = {
    count: 0
};
/*
* reducer
 */
export default function reducer(state = initState, action) {
    switch (action.type) {
        case INCREMENT:
            return {
                count: state.count + 1
            };
        case DECREMENT:
            return {
                count: state.count - 1
            };
        case RESET:
            return {count: 0};
        default:
            return state
    }
}
  1. 编辑src/redux/reducers.js文件，把项目有很多的 reducers 整合到一起：
import counter from './reducers/counter';
export default function combineReducers(state = {}, action) {
    return {
        counter: counter(state.counter, action)
    }
}
  1. 编辑src/redux/store.js文件:
import {createStore} from 'redux';
import combineReducers from './reducers.js';

let store = createStore(combineReducers);

export default store;
  1. 测试，新建src/redux/testRedux.js文件，执行webpack testRedux.js build.js命令，查看控制台信息：
import {increment, decrement, reset} from './actions/counter';
import store from './store';
// 打印初始状态
console.log(store.getState());
// 每次 state 更新时，打印日志
// 注意 subscribe() 返回一个函数用来注销监听器
let unsubscribe = store.subscribe(() =>
    console.log(store.getState())
);
// 发起一系列 action
store.dispatch(increment());
store.dispatch(decrement());
store.dispatch(reset());
// 停止监听 state 更新
unsubscribe();

8.2 回顾 redux 数据流的知识

  • 调用 store.dispatch(action) 提交action；
  • redux store 调用传入的 reducer 函数，把当前的state、 action传进去；
  • 根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树；
  • Redux store 保存了根 reducer 返回的完整 state 树；

8.3 React 项目中使用redux模块

  1. 修改下 webpack.dev.config.js路径别名，增加 redux 的路径别名：
alias: {
  ...
  actions: path.join(__dirname, 'src/redux/actions'),
  reducers: path.join(__dirname, 'src/redux/reducers'),
}
  1. 在项目中新建src/pages/Counter/Counter.js页面文件：
import React, {Component} from 'react';

export default class Counter extends Component {
    render() {
        return (
            <div>
                <div>当前计数为(显示redux计数)</div>
                <button onClick={() => {
                    console.log('调用自增函数');
                }}>自增
                </button>
                <button onClick={() => {
                    console.log('调用自减函数');
                }}>自减
                </button>
                <button onClick={() => {
                    console.log('调用重置函数');
                }}>重置
                </button>
            </div>
        )
    }
}
  1. 修改路由src/router/router.js，增加 Counter 路由：
import React from 'react';
import {BrowserRouter as Router, Route, Switch, Link} from 'react-router-dom';
import Home from 'pages/Home/Home';
import Page1 from 'pages/Page1/Page1';
import Counter from 'pages/Counter/Counter';

const getRouter = () => (
    <Router>
        <div>
            <ul>
                <li><Link to="/">首页</Link></li>
                <li><Link to="/page1">Page1</Link></li>
                <li><Link to="/counter">Counter</Link></li>
            </ul>
            <Switch>
                <Route exact path="/" component={Home}/>
                <Route path="/page1" component={Page1}/>
                <Route path="/counter" component={Counter}/>
            </Switch>
        </div>
    </Router>
);
export default getRouter;
  1. 让Counter组件和 Redux 联合起来，使 Counter 能获得到 Redux 的 state ，并且能发射 action ；建议使用 React Redux 库的 connect() 方法， connect 接收两个参数，一个mapStateToProps,就是把 redux 的 state 转为组件的 Props ，还有一个参数是mapDispatchToprops，就是把发射 actions 的方法，转为 Props 属性函数：
    • 安装 react-redux的第三方模块：npm install --save react-redux;
    • 修改 src/pages/Counter/Counter.js文件，增加 connect() 方法:
import React, {Component} from 'react';
import {increment, decrement, reset} from 'actions/counter';
import {connect} from 'react-redux';  // 作用是从 Redux state 树中读取部分数据，并通过 props 来把这些数据提供给要渲染的组件。也传递dispatch(action)函数到props；
class Counter extends Component {
    render() {
        return (
            <div>
                <div>当前计数为{this.props.counter.count}</div>
                <button onClick={() => this.props.increment()}>自增
                </button>
                <button onClick={() => this.props.decrement()}>自减
                </button>
                <button onClick={() => this.props.reset()}>重置
                </button>
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    return {
        counter: state.counter
    }
};
const mapDispatchToProps = (dispatch) => {
    return {
        increment: () => {
            dispatch(increment())
        },
        decrement: () => {
            dispatch(decrement())
        },
        reset: () => {
            dispatch(reset())
        }
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);
  1. 传入 store ，使所有容器组件都可以访问 Redux store，所以可以手动监听它，建议的方式是使用指定的 React Redux 组件 Provider 让所有容器组件都可以访问 store ，而不必显示地传递它，修改 src/index.js 文件；
import React from 'react';
import ReactDom from 'react-dom';
import {AppContainer} from 'react-hot-loader';
import {Provider} from 'react-redux';  // 让所有的组件可以访问到store。不用手动去传。也不用手动去监听；
import store from './redux/store';

import getRouter from 'router/router';

/*初始化*/
renderWithHotReload(getRouter());
/*热更新*/
if (module.hot) {
    module.hot.accept('./router/router', () => {
        const getRouter = require('router/router').default;
        renderWithHotReload(getRouter());
    });
}
function renderWithHotReload(RootElement) {
    ReactDom.render(
        <AppContainer>
            <Provider store={store}>
                {RootElement}
            </Provider>
        </AppContainer>,
        document.getElementById('app')
    )
}

8.4 异步 action

Redux高阶——异步action

如调用一个异步get请求去后台请求数据：
(具体内容见原文章 redux )
- 请求开始的时候，界面转圈提示正在加载，isLoading置为true；
- 请求成功，显示数据，isLoading置为false,data填充数据；
- 请求失败，显示失败，isLoading置为false，显示错误信息；

8.5 combinReducers优化

redux 提供了一个 combineReducers()函数来合并 reducer ，修改src/redux/reducers.js：

import {combineReducers} from "redux";

import counter from 'reducers/counter';
import userInfo from 'reducers/userInfo';

export default combineReducers({
    counter,
    userInfo
});

9. devtool优化（略）

10. 编译css

推荐使用 less 或 stylus进行样式书写，先能够使用 css样式，安装 css-loader(作用是能够使用类似@import 和 url(...)的方法实现 require() 的功能)和style-loader(作用是将所有的计算后的样式加入页面中)：npm install css-loader style-loader --save-dev

安装好后对 webpack.dev.config.js 文件进行配置，增加 rules ：

{
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
}

11. 编译图片

安装 url-loader file-loader模块：npm install --save-dev url-loader file-loader，再对 webpack.dev.config.js 文件进行配置，增加 rules ：

{
    test: /\.(png|jpg|gif)$/,
    use: [{
        loader: 'url-loader',
        options: {
            limit: 8192
        }
    }]
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,088评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,715评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,361评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,099评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,987评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,063评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,486评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,175评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,440评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,190评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,550评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2赞 335