从零搭建React全家桶框架教程

前端之家收集整理的这篇文章主要介绍了从零搭建React全家桶框架教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

从零搭建React全家桶框架教程

源码地址:https://github.com/brickspert/react-family 欢迎star
提问反馈:blog

原文地址:https://github.com/brickspert/blog/issues/1(github这里我会不断更新教程的)

此处不更新,github上会一直更新

写在前面

当我第一次跟着项目做react项目的时候,由于半截加入的,对框架了解甚少,只能跟着别人的样板写。对整个框架没有一点了解。

做项目,总是要解决各种问题的,所以每个地方都需要去了解,但是对整个框架没有一个整体的了解,实在是不行。

期间,我也跟着别人的搭建框架的教程一步一步的走,但是经常因为自己太菜,走不下去。在经过各种蹂躏之后,对整个框架也有一个大概的了解,
我就想把他写下来,让后来的菜鸟能跟着我的教程对react全家桶有一个全面的认识。

我的这个教程,从新建根文件夹开始,到成型的框架,每个文件为什么要建立?建立了干什么?每个依赖都是干什么的?一步一步写下来,供大家学习。

当然,这个框架我以后会一直维护的,也希望大家能一起来完善这个框架,如果您有任何建议,欢迎留言,欢迎fork

在完善本框架的同时,我准备再新建一个兼容ie8的框架react-family-ie8,当然是基于该框架改造的。

说明

  1. 每个命令行块都是以根目录为基础的。例如下面命令行块,都是基于根目录的。
  1. cd src/pages
  2. mkdir Home
  1. 技术栈均是目前最新的。
  • react 15.6.1
  • react-router-dom 4.2.2
  • redux 3.7.2
  • webpack 3.5.5
  1. 目录说明
  1. .babelrc #babel配置文件
  2. package-lock.json
  3. package.json
  4. README.MD
  5. webpack.config.js #webpack生产配置文件
  6. webpack.dev.config.js #webpack开发配置文件
  7. ├─dist
  8. ├─public #公共资源文件
  9. └─src #项目源码
  10. index.html #index.html模板
  11. index.js #入口文件
  12. ├─component #组建库
  13. └─Hello
  14. Hello.js
  15. ├─pages #页面目录
  16. ├─Counter
  17. Counter.js
  18. ├─Home
  19. Home.js
  20. ├─Page1
  21. Page1.css #页面样式
  22. Page1.js
  23. └─images #页面图片
  24. brickpsert.jpg
  25. └─UserInfo
  26. UserInfo.js
  27. ├─redux
  28. reducers.js
  29. store.js
  30. ├─actions
  31. counter.js
  32. userInfo.js
  33. ├─middleware
  34. promiseMiddleware.js
  35. └─reducers
  36. counter.js
  37. userInfo.js
  38. └─router #路由文件
  39. Bundle.js
  40. router.js

init项目

  1. 创建文件夹并进入

    1. `mkdir react-family && cd react-family`
  2. init npm

    1. `npm init` 按照提示填写项目基本信息

webpack

  1. 安装 webpack

    npm install --save-dev webpack

    Q: 什么时候用--save-dev,什么时候用--save

    A: --save-dev 是你开发时候依赖的东西,--save 是你发布之后还依赖的东西。看这里

  2. 根据webpack文档编写最基础的配置文件

    新建webpack开发配置文件 touch webpack.dev.config.js

    webpack.dev.config.js

    1. const path = require('path');
    2.  
    3. module.exports = {
    4. /*入口*/
    5. entry: path.join(__dirname,'src/index.js'),/*输出到dist文件夹,输出文件名字为bundle.js*/
    6. output: {
    7. path: path.join(__dirname,'./dist'),filename: 'bundle.js'
    8. }
    9. };
  3. 学会使用webpack编译文件

    新建入口文件

    mkdir src && touch ./src/index.js

    src/index.js 添加内容

    document.getElementById('app').innerHTML = "Webpack works"

    现在我们执行命令 webpack --config webpack.dev.config.js

    我们可以看到生成dist文件夹和bundle.js

  4. 现在我们测试下~

    dist文件夹下面新建一个index.html

    touch ./dist/index.html

    dist/index.html填写内容

    1. <!doctype html>
    2. <html lang="en">
    3. <head>
    4. <Meta charset="UTF-8">
    5. <title>Document</title>
    6. </head>
    7. <body>
    8. <div id="app"></div>
    9. <script type="text/javascript" src="./bundle.js" charset="utf-8"></script>
    10. </body>
    11. </html>

    用浏览器打开index.html,可以看到Webpack works!

    现在回头看下,我们做了什么或者说webpack做了什么。

    把入口文件 index.js 经过处理之后,生成 bundle.js。就这么简单。

babel

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

通俗的说,就是我们可以用ES6,ES7等来编写代码,Babel会把他们统统转为ES5。

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0

新建babel配置文件.babelrc

touch .babelrc

.babelrc

  1. {
  2. "presets": [
  3. "es2015","react","stage-0"
  4. ],"plugins": []
  5. }

修改webpack.dev.config.js增加babel-loader

  1. /*src文件夹下面的以.js结尾的文件,要使用babel解析*/
  2. /*cacheDirectory是用来缓存编译结果,下次编译加速*/
  3. module: {
  4. rules: [{
  5. test: /\.js$/,use: ['babel-loader?cacheDirectory=true'],include: path.join(__dirname,'src')
  6. }]
  7. }

现在我们简单测试下,是否能正确转义ES6~

修改 src/index.js

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

执行打包命令webpack --config webpack.dev.config.js

浏览器打开index.html,我们看到正确输出我现在在使用Babel!

然后我们打开打包后的bundle.js,翻页到最下面,可以看到箭头函数被转换成普通函数了!

Q: babel-preset-state-0,babel-preset-state-1,babel-preset-state-2,babel-preset-state-3有什么区别?

A: 每一级包含上一级的功能,比如 state-0包含state-1功能,以此类推。state-0功能最全。具体可以看这篇文章babel配置-各阶段的stage的区别

参考地址:

  1. https://segmentfault.com/a/11...
  2. http://www.ruanyifeng.com/blo...

react

npm install --save react react-dom

修改 src/index.js使用react

  1. import React from 'react';
  2. import ReactDom from 'react-dom';
  3.  
  4. ReactDom.render(
  5. <div>Hello React!</div>,document.getElementById('app'));

执行打包命令webpack --config webpack.dev.config.js

打开index.html效果

我们简单做下改进,把Hello React放到组件里面。体现组件化~

  1. cd src
  2. mkdir component
  3. cd component
  4. mkdir Hello
  5. cd Hello
  6. touch Hello.js

按照React语法,写一个Hello组件

  1. import React,{Component} from 'react';
  2.  
  3. export default class Hello extends Component {
  4. render() {
  5. return (
  6. <div>
  7. Hello,React!
  8. </div>
  9. )
  10. }
  11. }

然后让我们修改src/index.js,引用Hello组件!

src/index.js

  1. import React from 'react';
  2. import ReactDom from 'react-dom';
  3. import Hello from './component/Hello/Hello';
  4.  
  5. ReactDom.render(
  6. <Hello/>,document.getElementById('app'));

根目录执行打包命令

webpack --config webpack.dev.config.js

打开index.html效果咯~

命令优化

Q:每次打包都得在根目录执行这么一长串命令webpack --config webpack.dev.config.js,能不打这么长吗?

A:修改package.json里面的script增加dev-build

package.json

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

现在我们打包只需要执行npm start-build就可以啦!

参考地址:

http://www.ruanyifeng.com/blo...

react-router

npm install --save react-router-dom

新建router文件夹和组件

  1. cd src
  2. mkdir router && touch router/router.js

按照react-router文档编辑一个最基本的router.js。包含两个页面homepage1

src/router/router.js

  1. import React from 'react';
  2.  
  3. import {BrowserRouter as Router,Route,Switch,Link} from 'react-router-dom';
  4.  
  5. import Home from '../pages/Home/Home';
  6. import Page1 from '../pages/Page1/Page1';
  7.  
  8.  
  9. const getRouter = () => (
  10. <Router>
  11. <div>
  12. <ul>
  13. <li><Link to="/">首页</Link></li>
  14. <li><Link to="/page1">Page1</Link></li>
  15. </ul>
  16. <Switch>
  17. <Route exact path="/" component={Home}/>
  18. <Route path="/page1" component={Page1}/>
  19. </Switch>
  20. </div>
  21. </Router>
  22. );
  23.  
  24. export default getRouter;

新建页面文件

  1. cd src
  2. mkdir pages

新建两个页面 Home,Page1

  1. cd src/pages
  2. mkdir Home && touch Home/Home.js
  3. mkdir Page1 && touch Page1/Page1.js

填充内容

src/pages/Home/Home.js

  1. import React,{Component} from 'react';
  2.  
  3. export default class Home extends Component {
  4. render() {
  5. return (
  6. <div>
  7. this is home~
  8. </div>
  9. )
  10. }
  11. }

Page1.js

  1. import React,{Component} from 'react';
  2.  
  3. export default class Page1 extends Component {
  4. render() {
  5. return (
  6. <div>
  7. this is Page1~
  8. </div>
  9. )
  10. }
  11. }

现在路由和页面建好了,我们在入口文件src/index.js引用Router。

修改src/index.js

  1. import React from 'react';
  2. import ReactDom from 'react-dom';
  3.  
  4. import getRouter from './router/router';
  5.  
  6. ReactDom.render(
  7. getRouter(),document.getElementById('app'));

现在执行打包命令npm start-build。打开index.html查看效果啦!

那么问题来了~我们发现点击‘首页’和‘Page1’没有反应。不要惊慌,这是正常的。

我们之前一直用这个路径访问index.html,类似这样:file:///F:/react/react-family/dist/index.html
这种路径了,不是我们想象中的路由那样的路径http://localhost:3000~我们需要配置一个简单的WEB服务器,指向
index.html~有下面两种方法来实现

  1. Nginx,Apache,IIS等配置启动一个简单的的WEB服务器。
  2. 使用webpack-dev-server来配置启动WEB服务器。

下一节,我们来使用第二种方法启动服务器。这一节的DEMO,先放这里。

参考地址

  1. http://www.jianshu.com/p/e3ad...
  2. http://reacttraining.cn/web/g...

webpack-dev-server

简单来说,webpack-dev-server就是一个小型的静态文件服务器。使用它,可以为webpack打包生成的资源文件提供Web服务。

npm install webpack-dev-server --save-dev

修改webpack.dev.config.js,增加webpack-dev-server的配置。

webpack.dev.config.js

  1. devServer: {
  2. contentBase: path.join(__dirname,'./dist')
  3. }

现在执行

webpack-dev-server --config webpack.dev.config.js

浏览器打开http://localhost:8080,OK,现在我们可以点击首页,Page1了,
URL地址变化啦!我们看到react-router已经成功了哦。

Q: --content-base是什么?

A:URL的根目录。如果不设定的话,默认指向项目根目录。

**重要提示:webpack-dev-server编译后的文件,都存储在内存中,我们并不能看见的。你可以删除之前遗留的文件dist/bundle.js
仍然能正常打开网站!**

每次执行webpack-dev-server --config webpack.dev.config.js,要打很长的命令,我们修改package.json增加script->start:

  1. "scripts": {
  2. "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"
  3. }

下次执行npm start就可以了。

既然用到了webpack-dev-server,我们就看看它的其他的配置项
看了之后,发现有几个我们可以用的。

  • color(CLI only) console中打印彩色日志
  • historyApiFallback 任意的404响应都被替代为index.html。有什么用呢?你现在运行
    npm start,然后打开浏览器,访问http://localhost:8080,然后点击Page1链接http://localhost:8080/page1

然后刷新页面试试。是不是发现刷新后404了。为什么?dist文件夹里面并没有page1.html,当然会404了,所以我们需要配置
historyApiFallback,让所有的404定位到index.html

  • host 指定一个host,默认是localhost。如果你希望服务器外部可以访问,指定如下:host: "0.0.0.0"。比如你用手机通过IP访问。
  • hot 启用Webpack的模块热替换特性。关于热模块替换,我下一小节专门讲解一下。
  • port 配置要监听的端口。默认就是我们现在使用的8080端口。
  • proxy 代理。比如在 localhost:3000 上有后端服务的话,你可以这样启用代理:
  1. proxy: {
  2. "/api": "http://localhost:3000"
  3. }
  • progress(CLI only) 将编译进度输出到控制台。

根据这几个配置,修改下我们的webpack-dev-server的配置~

webpack.dev.config.js

  1. devServer: {
  2. contentBase: path.join(__dirname,historyApiFallback: true,host: '0.0.0.0'
  3. }

CLI ONLY的需要在命令行中配置

package.json

  1. "dev": "webpack-dev-server --config webpack.dev.config.js --color --progress"

现在我们执行npm start 看看效果。是不是看到打包的时候有百分比进度?在http://localhost:8080/page1页面刷新是不是没问题了?
用手机通过局域网IP是否可以访问到网站?

参考地址:

  1. https://segmentfault.com/a/11...
  2. https://webpack.js.org/guides...

模块热替换(Hot Module Replacement)

到目前,当我们修改代码的时候,浏览器会自动刷新,不信你可以去试试。(如果你的不会刷新,看看这个调整文本编辑器

我相信看这个教程的人,应该用过别人的框架。我们在修改代码的时候,浏览器不会刷新,只会更新自己修改的那一块。我们也要实现这个效果

我们看下webpack模块热替换教程。

我们接下来要这么修改

package.json 增加 --hot

  1. "dev": "webpack-dev-server --config webpack.dev.config.js --color --progress --hot"

src/index.js 增加module.hot.accept(),如下。当模块更新的时候,通知index.js

src/index.js

  1. import React from 'react';
  2. import ReactDom from 'react-dom';
  3.  
  4. import getRouter from './router/router';
  5.  
  6. if (module.hot) {
  7. module.hot.accept();
  8. }
  9.  
  10. ReactDom.render(
  11. getRouter(),document.getElementById('app'));

现在我们执行npm start,打开浏览器,修改Home.js,看是不是不刷新页面的情况下,内容更新了?惊不惊喜?意不意外?

做模块热替换,我们只改了几行代码,非常简单的。纸老虎一个~

现在我需要说明下我们命令行使用的--hot,可以通过配置webpack.dev.config.js来替换,
向文档上那样,修改下面三处。但我们还是用--hot吧。下面的方式我们知道一下就行,我们不用。同样的效果

  1. const webpack = require('webpack');
  2.  
  3. devServer: {
  4. hot: true
  5. }
  6.  
  7. plugins:[
  8. new webpack.HotModuleReplacementPlugin()
  9. ]

HRM配置其实有两种方式,一种CLI方式,一种Node.js API方式。我们用到的就是CLI方式,比较简单。
Node.js API方式,就是建一个server.js等等,网上大部分教程都是这种方式,这里不做讲解了。

你以为模块热替换到这里就结束了?no~no~no~

上面的配置对react模块的支持不是很好哦。

例如下面的demo,当模块热替换的时候,state会重置,这不是我们想要的。

修改Home.js,增加计数state

src/pages/Home/Home.js

  1. import React,{Component} from 'react';
  2.  
  3. export default class Home extends Component {
  4. constructor(props) {
  5. super(props);
  6. this.state = {
  7. count: 0
  8. }
  9. }
  10.  
  11. _handleClick() {
  12. this.setState({
  13. count: ++this.state.count
  14. });
  15. }
  16.  
  17. render() {
  18. return (
  19. <div>
  20. this is home~<br/>
  21. 当前计数:{this.state.count}<br/>
  22. <button onClick={() => this._handleClick()}>自增</button>
  23. </div>
  24. )
  25. }
  26. }

你可以测试一下,当我们修改代码的时候,webpack在更新页面的时候,也把count初始为0了。

为了在react模块更新的同时,能保留state页面中其他状态,我们需要引入react-hot-loader~

Q: 请问webpack-dev-serverreact-hot-loader两者的热替换有什么区别?

A: 区别在于webpack-dev-server自己的--hot模式只能即时刷新页面,但状态保存不住。因为React有一些自己语法(JSX)是HotModuleReplacementPlugin搞不定的。
react-hot-loader--hot基础上做了额外的处理,来保证状态可以存下来。(来自segmentfault

下面我们来加入react-hot-loader v3,

安装依赖

npm install react-hot-loader@next --save-dev

根据文档
我们要做如下几个修改~

  1. .babelrc 增加 react-hot-loader/babel

.babelrc

  1. {
  2. "presets": [
  3. "es2015","stage-0"
  4. ],"plugins": [
  5. "react-hot-loader/babel"
  6. ]
  7. }
  1. webpack.dev.config.js入口增加react-hot-loader/patch

webpack.dev.config.js

  1. entry: [
  2. 'react-hot-loader/patch',path.join(__dirname,'src/index.js')
  3. ]
  1. src/index.js修改如下

src/index.js

  1. import React from 'react';
  2. import ReactDom from 'react-dom';
  3. import {AppContainer} from 'react-hot-loader';
  4.  
  5. import getRouter from './router/router';
  6.  
  7. /*初始化*/
  8. renderWithHotReload(getRouter());
  9.  
  10. /*热更新*/
  11. if (module.hot) {
  12. module.hot.accept('./router/router',() => {
  13. const getRouter = require('./router/router').default;
  14. renderWithHotReload(getRouter());
  15. });
  16. }
  17.  
  18. function renderWithHotReload(RootElement) {
  19. ReactDom.render(
  20. <AppContainer>
  21. {RootElement}
  22. </AppContainer>,document.getElementById('app')
  23. )
  24. }

现在,执行npm start,试试。是不是修改页面的时候,state不更新了?

参考文章

  1. https://github.com/gaearon/re...

文件路径优化

做到这里,我们简单休息下。做下优化~

在之前写的代码中,我们引用组件,或者页面时候,写的是相对路径~

比如src/router/router.js里面,引用Home.js的时候就用的相对路径

  1. import Home from '../pages/Home/Home';

webpack提供了一个别名配置,就是我们无论在哪个路径下,引用都可以这样

  1. import Home from 'pages/Home/Home';

下面我们来配置下,修改webpack.dev.config.js增加别名~

webpack.config.js

  1. resolve: {
  2. alias: {
  3. pages: path.join(__dirname,'src/pages'),component: path.join(__dirname,'src/component'),router: path.join(__dirname,'src/router')
  4. }
  5. }

然后我们把之前使用的绝对路径统统改掉。

src/router/router.js

  1. import Home from 'pages/Home/Home';
  2. import Page1 from 'pages/Page1/Page1';

src/index.js

  1. import getRouter from 'router/router';

我们这里约定,下面,我们会默认配置需要的别名路径,不再做重复的讲述哦。

redux

接下来,我们就要就要就要集成redux了。

要对redux有一个大概的认识,可以阅读阮一峰前辈的Redux 入门教程(一):基本用法

如果要对redux有一个非常详细的认识,我推荐阅读中文文档,写的非常好。读了这个教程,有一个非常深刻的感觉,redux并没有任何魔法。

不要被各种关于 reducers,middleware,store 的演讲所蒙蔽 ---- Redux 实际是非常简单的。

当然,我这篇文章是写给新手的,如果看不懂上面的文章,或者不想看,没关系。先会用,多用用就知道原理了。

开始整代码!我们就做一个最简单的计数器。自增,自减,重置。

先安装redux npm install --save redux

初始化目录结构

  1. cd src
  2. mkdir redux
  3. cd redux
  4. mkdir actions
  5. mkdir reducers
  6. touch reducers.js
  7. touch store.js
  8. touch actions/counter.js
  9. touch reducers/counter.js

先来写action创建函数通过action创建函数,可以创建action~
src/redux/actions/counter.js

  1. /*action*/
  2.  
  3. export const INCREMENT = "counter/INCREMENT";
  4. export const DECREMENT = "counter/DECREMENT";
  5. export const RESET = "counter/RESET";
  6.  
  7. export function increment() {
  8. return {type: INCREMENT}
  9. }
  10.  
  11. export function decrement() {
  12. return {type: DECREMENT}
  13. }
  14.  
  15. export function reset() {
  16. return {type: RESET}
  17. }

再来写reducer,reducer是一个纯函数,接收action和旧的state,生成新的state.

src/redux/reducers/counter.js

  1. import {INCREMENT,DECREMENT,RESET} from '../actions/counter';
  2.  
  3. /*
  4. * 初始化state
  5. */
  6.  
  7. const initState = {
  8. count: 0
  9. };
  10. /*
  11. * reducer
  12. */
  13. export default function reducer(state = initState,action) {
  14. switch (action.type) {
  15. case INCREMENT:
  16. return {
  17. count: state.count + 1
  18. };
  19. case DECREMENT:
  20. return {
  21. count: state.count - 1
  22. };
  23. case RESET:
  24. return {count: 0};
  25. default:
  26. return state
  27. }
  28. }

一个项目有很多的reducers,我们要把他们整合到一起

src/redux/reducers.js

  1. import counter from './reducers/counter';
  2.  
  3. export default function combineReducers(state = {},action) {
  4. return {
  5. counter: counter(state.counter,action)
  6. }
  7. }

到这里,我们必须再理解下一句话。

reducer就是纯函数,接收stateaction,然后返回一个新的 state

看看上面的代码,无论是combineReducers函数也好,还是reducer函数也好,都是接收stateaction
返回更新后的state。区别就是combineReducers函数是处理整棵树,reducer函数是处理树的某一点。

接下来,我们要创建一个store

前面我们可以使用 action 来描述“发生了什么”,使用action创建函数来返回action

还可以使用 reducers 来根据 action 更新 state

那我们如何提交action?提交的时候,怎么才能触发reducers呢?

store 就是把它们联系到一起的对象。store 有以下职责:

  • 维持应用的 state
  • 提供 getState() 方法获取 state
  • 提供 dispatch(action) 触发reducers方法更新 state
  • 通过 subscribe(listener) 注册监听器;
  • 通过 subscribe(listener) 返回的函数注销监听器。

src/redux/store.js

  1. import {createStore} from 'redux';
  2. import combineReducers from './reducers.js';
  3.  
  4. let store = createStore(combineReducers);
  5.  
  6. export default store;

到现在为止,我们已经可以使用redux了~

下面我们就简单的测试下

  1. cd src
  2. cd redux
  3. touch testRedux.js

src/redux/testRedux.js

  1. import {increment,decrement,reset} from './actions/counter';
  2.  
  3. import store from './store';
  4.  
  5. // 打印初始状态
  6. console.log(store.getState());
  7.  
  8. // 每次 state 更新时,打印日志
  9. // 注意 subscribe() 返回一个函数用来注销监听器
  10. let unsubscribe = store.subscribe(() =>
  11. console.log(store.getState())
  12. );
  13.  
  14. // 发起一系列 action
  15. store.dispatch(increment());
  16. store.dispatch(decrement());
  17. store.dispatch(reset());
  18.  
  19. // 停止监听 state 更新
  20. unsubscribe();

当前文件夹执行命令

  1. webpack testRedux.js build.js
  2.  
  3. node build.js

是不是看到输出state变化?

  1. { counter: { count: 0 } }
  2. { counter: { count: 1 } }
  3. { counter: { count: 0 } }
  4. { counter: { count: 0 } }

做这个测试,就是为了告诉大家,reduxreact没关系,虽说他俩能合作。

到这里,我建议你再理下redux的数据流,看看这里

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

就是酱紫~~

这会webpack.dev.config.js路径别名增加一下,后面好写了。

webpack.config.js

  1. alias: {
  2. ...
  3. actions: path.join(__dirname,'src/redux/actions'),reducers: path.join(__dirname,'src/redux/reducers'),redux: path.join(__dirname,'src/redux')
  4. }

把前面的相对路径都改改。

下面我们开始搭配react使用。

写一个Counter页面

  1. cd src/pages
  2. mkdir Counter
  3. touch Counter/Counter.js

src/pages/Counter/Counter.js

  1. import React,{Component} from 'react';
  2.  
  3. export default class Counter extends Component {
  4. render() {
  5. return (
  6. <div>
  7. <div>当前计数为(显示redux计数)</div>
  8. <button onClick={() => {
  9. console.log('调用自增函数');
  10. }}>自增
  11. </button>
  12. <button onClick={() => {
  13. console.log('调用自减函数');
  14. }}>自减
  15. </button>
  16. <button onClick={() => {
  17. console.log('调用重置函数');
  18. }}>重置
  19. </button>
  20. </div>
  21. )
  22. }
  23. }

修改路由,增加Counter

src/router/router.js

  1. import React from 'react';
  2.  
  3. import {BrowserRouter as Router,Link} from 'react-router-dom';
  4.  
  5. import Home from 'pages/Home/Home';
  6. import Page1 from 'pages/Page1/Page1';
  7. import Counter from 'pages/Counter/Counter';
  8.  
  9. const getRouter = () => (
  10. <Router>
  11. <div>
  12. <ul>
  13. <li><Link to="/">首页</Link></li>
  14. <li><Link to="/page1">Page1</Link></li>
  15. <li><Link to="/counter">Counter</Link></li>
  16. </ul>
  17. <Switch>
  18. <Route exact path="/" component={Home}/>
  19. <Route path="/page1" component={Page1}/>
  20. <Route path="/counter" component={Counter}/>
  21. </Switch>
  22. </div>
  23. </Router>
  24. );
  25.  
  26. export default getRouter;

npm start看看效果

下一步,我们让Counter组件和Redux联合起来。使Counter能获得到Reduxstate,并且能发射action

当然我们可以使用刚才测试testRedux方法,手动监听~手动引入store~但是这肯定很麻烦哦。

react-redux提供了一个方法connect

容器组件就是使用 store.subscribe() 从 Redux state 树中读取部分数据,并通过 props 来把这些数据提供给要渲染的组件。你可以手工来开发容器组件,但建议使用 React Redux 库的 connect() 方法生成,这个方法做了性能优化来避免很多不必要的重复渲染。

connect接收两个参数,一个mapStateToProps,就是把reduxstate,转为组件的Props,还有一个参数是mapDispatchToprops,
就是把发射actions方法,转为Props属性函数

先来安装react-redux

npm install --save react-redux

src/pages/Counter/Counter.js

  1. import React,{Component} from 'react';
  2. import {increment,reset} from 'actions/counter';
  3.  
  4. import {connect} from 'react-redux';
  5.  
  6. class Counter extends Component {
  7. render() {
  8. return (
  9. <div>
  10. <div>当前计数为{this.props.counter.count}</div>
  11. <button onClick={() => this.props.increment()}>自增
  12. </button>
  13. <button onClick={() => this.props.decrement()}>自减
  14. </button>
  15. <button onClick={() => this.props.reset()}>重置
  16. </button>
  17. </div>
  18. )
  19. }
  20. }
  21.  
  22. const mapStateToProps = (state) => {
  23. return {
  24. counter: state.counter
  25. }
  26. };
  27.  
  28. const mapDispatchToProps = (dispatch) => {
  29. return {
  30. increment: () => {
  31. dispatch(increment())
  32. },decrement: () => {
  33. dispatch(decrement())
  34. },reset: () => {
  35. dispatch(reset())
  36. }
  37. }
  38. };
  39.  
  40. export default connect(mapStateToProps,mapDispatchToProps)(Counter);

下面我们要传入store

所有容器组件都可以访问 Redux store,所以可以手动监听它。一种方式是把它以 props 的形式传入到所有容器组件中。但这太麻烦了,因为必须要用 store 把展示组件包裹一层,仅仅是因为恰好在组件树中渲染了一个容器组件。

建议的方式是使用指定的 React Redux 组件 <Provider> 来 魔法般的 让所有容器组件都可以访问 store,而不必显示地传递它。只需要在渲染根组件时使用即可。

src/index.js

  1. import React from 'react';
  2. import ReactDom from 'react-dom';
  3. import {AppContainer} from 'react-hot-loader';
  4. import {Provider} from 'react-redux';
  5. import store from './redux/store';
  6.  
  7. import getRouter from 'router/router';
  8.  
  9. /*初始化*/
  10. renderWithHotReload(getRouter());
  11.  
  12. /*热更新*/
  13. if (module.hot) {
  14. module.hot.accept('./router/router',() => {
  15. const getRouter = require('router/router').default;
  16. renderWithHotReload(getRouter());
  17. });
  18. }
  19.  
  20. function renderWithHotReload(RootElement) {
  21. ReactDom.render(
  22. <AppContainer>
  23. <Provider store={store}>
  24. {RootElement}
  25. </Provider>
  26. </AppContainer>,document.getElementById('app')
  27. )
  28. }

到这里我们就可以执行npm start,打开localhost:8080/counter效果了。

但是你发现npm start一直报错

  1. ERROR in ./node_modules/react-redux/es/connect/mapDispatchToProps.js
  2. Module not found: Error: Can't resolve 'redux' in 'F:\Project\react\react-family\node_modules\react-redux\es\connect'
  3.  
  4. ERROR in ./src/redux/store.js
  5. Module not found: Error: Can't resolve 'redux' in 'F:\Project\react\react-family\src\redux'

WTF?这个错误困扰了半天。我说下为什么造成这个错误。我们引用redux的时候这样用的

import {createStore} from 'redux'

然而,我们在webapck.dev.config.js里面这样配置了

  1. resolve: {
  2. alias: {
  3. ...
  4. redux: path.join(__dirname,'src/redux')
  5. }
  6. }

然后webapck编译的时候碰到redux都去src/redux去找了。但是找不到啊。所以我们把webpack.dev.config.js里面redux这一行删除了,就好了。
并且把使用我们自己使用redux文件夹的地方改成相对路径哦。

现在你可以npm start去看效果了。

这里我们再缕下(可以读React 实践心得:react-redux 之 connect 方法详解

  1. Provider组件是让所有的组件可以访问到store。不用手动去传。也不用手动去监听。
  2. connect函数作用是从 Redux state 树中读取部分数据,并通过 props 来把这些数据提供给要渲染的组件。也传递dispatch(action)函数props

接下来,我们要说异步action

参考地址: @L_502_32@

想象一下我们调用一个异步get请求去后台请求数据:

  1. 请求开始的时候,界面转圈提示正在加载。isLoading置为true
  2. 请求成功,显示数据。isLoading置为false,data填充数据。
  3. 请求失败,显示失败。isLoading置为false显示错误信息。

下面,我们以向后台请求用户基本信息为例。

  1. 我们先创建一个user.json,等会请求用,相当于后台的API接口。
  1. cd dist
  2. mkdir api
  3. cd api
  4. touch user.json

dist/api/user.json

  1. {
  2. "name": "brickspert","intro": "please give me a star"
  3. }
  1. 创建必须的action创建函数
  1. cd src/redux/actions
  2. touch userInfo.js

src/redux/actions/getUserInfo.js

  1. export const GET_USER_INFO_REQUEST = "userInfo/GET_USER_INFO_REQUEST";
  2. export const GET_USER_INFO_SUCCESS = "userInfo/GET_USER_INFO_SUCCESS";
  3. export const GET_USER_INFO_FAIL = "userInfo/GET_USER_INFO_FAIL";
  4.  
  5. function getUserInfoRequest() {
  6. return {
  7. type: GET_USER_INFO_REQUEST
  8. }
  9. }
  10.  
  11. function getUserInfoSuccess(userInfo) {
  12. return {
  13. type: GET_USER_INFO_SUCCESS,userInfo: userInfo
  14. }
  15. }
  16.  
  17. function getUserInfoFail() {
  18. return {
  19. type: GET_USER_INFO_FAIL
  20. }
  21. }

我们创建了请求中,请求成功,请求失败三个action创建函数

  1. 创建reducer

再强调下,reducer是根据stateaction生成state函数

  1. cd src/redux/reducers
  2. touch userInfo.js

src/redux/reducers/userInfo.js

  1. import {GET_USER_INFO_REQUEST,GET_USER_INFO_SUCCESS,GET_USER_INFO_FAIL} from 'actions/userInfo';
  2.  
  3.  
  4. const initState = {
  5. isLoading: false,userInfo: {},errorMsg: ''
  6. };
  7.  
  8. export default function reducer(state = initState,action) {
  9. switch (action.type) {
  10. case GET_USER_INFO_REQUEST:
  11. return {
  12. ...state,isLoading: true,errorMsg: ''
  13. };
  14. case GET_USER_INFO_SUCCESS:
  15. return {
  16. ...state,isLoading: false,userInfo: action.userInfo,errorMsg: ''
  17. };
  18. case GET_USER_INFO_FAIL:
  19. return {
  20. ...state,errorMsg: '请求错误'
  21. };
  22. default:
  23. return state;
  24. }
  25. }

这里的...state语法,是和别人的object.assign()起同一个作用,合并新旧state。我们这里是没效果的,但是我建议都写上这个哦

组合reducer

src/redux/reducers.js

  1. import counter from 'reducers/counter';
  2. import userInfo from 'reducers/userInfo';
  3.  
  4. export default function combineReducers(state = {},action),userInfo: userInfo(state.userInfo,action)
  5. }
  6. }
  1. 现在有了action,有了reducer,我们就需要调用action里面的三个action函数和网络请求结合起来。

    • 请求中 dispatch getUserInfoRequest
    • 请求成功 dispatch getUserInfoSuccess
    • 请求失败 dispatch getUserInfoFail

src/redux/actions/userInfo.js增加

  1. export function getUserInfo() {
  2. return function (dispatch) {
  3. dispatch(getUserInfoRequest());
  4.  
  5. return fetch('http://localhost:8080/api/user.json')
  6. .then((response => {
  7. return response.json()
  8. }))
  9. .then((json) => {
  10. dispatch(getUserInfoSuccess(json))
  11. }
  12. ).catch(
  13. () => {
  14. dispatch(getUserInfoFail());
  15. }
  16. )
  17. }
  18. }

我们这里发现,别的action创建函数都是返回action对象:

  1. {type: xxxx}

但是我们现在的这个action创建函数 getUserInfo则是返回函数了。

为了让action创建函数除了返回action对象外,还可以返回函数,我们需要引用redux-thunk

npm install --save redux-thunk

这里涉及到redux中间件middleware,我后面会讲到的。你也可以读这里Middleware

简单的说,中间件就是action在到达reducer,先经过中间件处理。我们之前知道reducer能处理的action只有这样的{type:xxx},所以我们使用中间件来处理
函数形式的action,把他们转为标准的actionreducer。这是redux-thunk的作用。
使用redux-thunk中间件

我们来引入redux-thunk中间件

src/redux/store.js

  1. import {createStore,applyMiddleware} from 'redux';
  2. import thunkMiddleware from 'redux-thunk';
  3. import combineReducers from './reducers.js';
  4.  
  5. let store = createStore(combineReducers,applyMiddleware(thunkMiddleware));
  6.  
  7. export default store;

到这里,redux这边OK了,我们来写个组件验证下。

  1. cd src/pages
  2. mkdir UserInfo
  3. cd UserInfo
  4. touch UserInfo.js

src/pages/UserInfo/UserInfo.js

  1. import React,{Component} from 'react';
  2. import {connect} from 'react-redux';
  3. import {getUserInfo} from "actions/userInfo";
  4.  
  5. class UserInfo extends Component {
  6.  
  7. render() {
  8. const {userInfo,isLoading,errorMsg} = this.props.userInfo;
  9. return (
  10. <div>
  11. {
  12. isLoading ? '请求信息中......' :
  13. (
  14. errorMsg ? errorMsg :
  15. <div>
  16. <p>用户信息:</p>
  17. <p>用户名:{userInfo.name}</p>
  18. <p>介绍:{userInfo.intro}</p>
  19. </div>
  20. )
  21. }
  22. <button onClick={() => this.props.getUserInfo()}>请求用户信息</button>
  23. </div>
  24. )
  25. }
  26. }
  27.  
  28. export default connect((state) => ({userInfo: state.userInfo}),{getUserInfo})(UserInfo);

这里你可能发现connect参数写法不一样了,mapStateToProps函数用了es6简写,mapDispatchToProps用了react-redux提供的简单写法。

增加路由
src/router/router.js

  1. import React from 'react';
  2.  
  3. import {BrowserRouter as Router,Link} from 'react-router-dom';
  4.  
  5. import Home from 'pages/Home/Home';
  6. import Page1 from 'pages/Page1/Page1';
  7. import Counter from 'pages/Counter/Counter';
  8. import UserInfo from 'pages/UserInfo/UserInfo';
  9.  
  10. const getRouter = () => (
  11. <Router>
  12. <div>
  13. <ul>
  14. <li><Link to="/">首页</Link></li>
  15. <li><Link to="/page1">Page1</Link></li>
  16. <li><Link to="/counter">Counter</Link></li>
  17. <li><Link to="/userinfo">UserInfo</Link></li>
  18. </ul>
  19. <Switch>
  20. <Route exact path="/" component={Home}/>
  21. <Route path="/page1" component={Page1}/>
  22. <Route path="/counter" component={Counter}/>
  23. <Route path="/userinfo" component={UserInfo}/>
  24. </Switch>
  25. </div>
  26. </Router>
  27. );
  28.  
  29. export default getRouter;

现在你可以执行npm start去看效果啦!

到这里redux集成基本告一段落了,后面我们还会有一些优化。

combinReducers优化

redux提供了一个combineReducers函数来合并reducer,不用我们自己合并哦。写起来简单,但是意思和我们
自己写的combinReducers也是一样的。

src/redux/reducers.js

  1. import {combineReducers} from "redux";
  2.  
  3. import counter from 'reducers/counter';
  4. import userInfo from 'reducers/userInfo';
  5.  
  6.  
  7. export default combineReducers({
  8. counter,userInfo
  9. });

devtool优化

现在我们发现一个问题,代码哪里写错了,浏览器报错只报在build.js第几行。

这让我们分析错误无从下手。看这里

我们增加webpack配置devtool

src/webpack.dev.config.js增加

  1. devtool: 'inline-source-map'

这次看错误信息是不是提示的很详细了?

同时,我们在srouce里面能看到我们写的代码,也能打断点调试哦~

编译css

先说这里为什么不用scss,因为Windows使用node-sass,需要先安装 Microsoft Windows SDK for Windows 7 and .NET Framework 4
我怕有些人copy这份代码后,没注意,运行不起来。所以这里不用scss了,如果需要,自行编译哦。

npm install css-loader style-loader --save-dev

css-loader使你能够使用类似@importurl(...)方法实现 require()功能

style-loader将所有的计算后的样式加入页面中; 二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

webpack.dev.config.js rules增加

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

我们用Page1页面来测试下

  1. cd src/pages/Page1
  2. touch Page1.css

src/pages/Page1/Page1.css

  1. .page-Box {
  2. border: 1px solid red;
  3. }

src/pages/Page1/Page1.js

  1. import React,{Component} from 'react';
  2.  
  3. import './Page1.css';
  4.  
  5. export default class Page1 extends Component {
  6. render() {
  7. return (
  8. <div className="page-Box">
  9. this is page1~
  10. </div>
  11. )
  12. }
  13. }

好了,现在npm start去看效果吧。

编译图片

npm install --save-dev url-loader file-loader

webpack.dev.config.js rules增加

  1. {
  2. test: /\.(png|jpg|gif)$/,use: [{
  3. loader: 'url-loader',options: {
  4. limit: 8192
  5. }
  6. }]
  7. }

options limit 8192意思是,小于等于8K的图片会被转成base64编码,直接插入HTML中,减少HTTP请求。

我们来用Page1 测试下

  1. cd src/pages/Page1
  2. mkdir images

images文件夹放一个图片

修改代码,引用图片

src/pages/Page1/Page1.js

  1. import React,{Component} from 'react';
  2.  
  3. import './Page1.css';
  4.  
  5. import image from './images/brickpsert.jpg';
  6.  
  7. export default class Page1 extends Component {
  8. render() {
  9. return (
  10. <div className="page-Box">
  11. this is page1~
  12. <img src={image}/>
  13. </div>
  14. )
  15. }
  16. }

可以去看看效果啦。

按需加载

为什么要实现按需加载?

我们现在看到,打包完后,所有页面生成了一个build.js,当我们首屏加载的时候,就会很慢。因为他也下载了别的页面js了哦。

如果每个页面都打包了自己单独的JS,在进入自己页面的时候才加载对应的js,那首屏加载就会快很多哦。

react-router 2.0时代, 按需加载需要用到的最关键的一个函数,就是require.ensure(),它是按需加载能够实现的核心。

在4.0版本,官方放弃了这种处理按需加载的方式,选择了一个更加简洁的处理方式。

传送门

根据官方示例,我们开搞

  1. npm install bundle-loader --save-dev
  2. 新建bundle.js
  1. cd src/router
  2. touch Bundle.js

src/router/Bundle.js

  1. import React,{Component} from 'react'
  2.  
  3. class Bundle extends Component {
  4. state = {
  5. // short for "module" but that's a keyword in js,so "mod"
  6. mod: null
  7. };
  8.  
  9. componentWillMount() {
  10. this.load(this.props)
  11. }
  12.  
  13. componentWillReceiveProps(nextProps) {
  14. if (nextProps.load !== this.props.load) {
  15. this.load(nextProps)
  16. }
  17. }
  18.  
  19. load(props) {
  20. this.setState({
  21. mod: null
  22. });
  23. props.load((mod) => {
  24. this.setState({
  25. // handle both es imports and cjs
  26. mod: mod.default ? mod.default : mod
  27. })
  28. })
  29. }
  30.  
  31. render() {
  32. return this.props.children(this.state.mod)
  33. }
  34. }
  35.  
  36. export default Bundle;
  1. 改造路由器

src/router/router.js

  1. import React from 'react';
  2.  
  3. import {BrowserRouter as Router,Link} from 'react-router-dom';
  4.  
  5. import Bundle from './Bundle';
  6.  
  7. import Home from 'bundle-loader?lazy&name=home!pages/Home/Home';
  8. import Page1 from 'bundle-loader?lazy&name=page1!pages/Page1/Page1';
  9. import Counter from 'bundle-loader?lazy&name=counter!pages/Counter/Counter';
  10. import UserInfo from 'bundle-loader?lazy&name=userInfo!pages/UserInfo/UserInfo';
  11.  
  12. const Loading = function () {
  13. return <div>Loading...</div>
  14. };
  15.  
  16. const createComponent = (component) => () => (
  17. <Bundle load={component}>
  18. {
  19. (Component) => Component ? <Component/> : <Loading/>
  20. }
  21. </Bundle>
  22. );
  23.  
  24. const getRouter = () => (
  25. <Router>
  26. <div>
  27. <ul>
  28. <li><Link to="/">首页</Link></li>
  29. <li><Link to="/page1">Page1</Link></li>
  30. <li><Link to="/counter">Counter</Link></li>
  31. <li><Link to="/userinfo">UserInfo</Link></li>
  32. </ul>
  33. <Switch>
  34. <Route exact path="/" component={createComponent(Home)}/>
  35. <Route path="/page1" component={createComponent(Page1)}/>
  36. <Route path="/counter" component={createComponent(Counter)}/>
  37. <Route path="/userinfo" component={createComponent(UserInfo)}/>
  38. </Switch>
  39. </div>
  40. </Router>
  41. );
  42.  
  43. export default getRouter;

现在你可以npm start,打开浏览器,看是不是进入新的页面,都会加载自己的JS的~

但是你可能发现,名字都是0.bundle.js这样子的,这分不清楚是哪个页面js呀!

我们修改webpack.dev.config.js,加个chunkFilenamechunkFilename是除了entry定义的入口js之外的js~

  1. output: {
  2. path: path.join(__dirname,filename: 'bundle.js',chunkFilename: '[name].js'
  3. }

现在你运行发现名字变成home.js,这样的了。棒棒哒!

那么问题来了home是在哪里设置的?webpack怎么知道他叫home

其实在这里我们定义了,router.js里面

import Home from 'bundle-loader?lazy&name=home!pages/Home/Home';

看到没。这里有个name=home。嘿嘿。

参考地址:

  1. http://www.jianshu.com/p/8dd9...
  2. https://github.com/ReactTrain...
  3. https://segmentfault.com/a/11...
  4. http://react-china.org/t/webp...
  5. https://juejin.im/post/58f971...

缓存

想象一下这个场景~

我们网站上线了,用户第一次访问首页,下载了home.js,第二次访问又下载了home.js~

这肯定不行呀,所以我们一般都会做一个缓存,用户下载一次home.js后,第二次就不下载了。

有一天,我们更新了home.js,但是用户不知道呀,用户还是使用本地旧的home.js。出问题了~

怎么解决?每次代码更新后,打包生成的名字不一样。比如第一次叫home.a.js,第二次叫home.b.js

文档看这里

我们照着文档来

webpack.dev.config.js

  1. output: {
  2. path: path.join(__dirname,filename: '[name].[hash].js',chunkFilename: '[name].[chunkhash].js'
  3. }

每次打包都用增加hash~

现在我们试试,是不是修改文件,打包后相应的文件名字就变啦?

但是你可能发现了,网页打开报错了~因为你dist/index.html里面引用js名字还是bundle.js老名字啊,改成新的名字就可以啦。

啊~那岂不是我每次编译打包,都得去改一下js名字?欲知后事如何,且看下节分享

HtmlWebpackPlugin

这个插件,每次会自动把js插入到你的模板index.html里面去。

npm install html-webpack-plugin --save-dev

新建模板index.html

  1. cd src
  2. touch index.html

src/index.html

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <Meta charset="UTF-8">
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. <div id="app"></div>
  9. </body>
  10. </html>

修改webpack.dev.config.js增加plugin

  1. var HtmlWebpackPlugin = require('html-webpack-plugin');
  2.  
  3. plugins: [new HtmlWebpackPlugin({
  4. filename: 'index.html',template: path.join(__dirname,'src/index.html')
  5. })],

npm start运行项目,看看是不是能正常访问啦。~

说明一下:npm start打包后的文件存在内存中,你看不到的。~ 你可以把遗留dist/index.html删除掉了。

提取公共代码

想象一下,我们的主文件,原来的bundle.js里面是不是包含了react,redux,react-router等等
这些代码??这些代码基本上不会改变的。但是,他们合并在bundle.js里面,每次项目发布,重新请求bundle.js的时候,相当于重新请求了
react等这些公共库。浪费了~

我们把react这些不会改变的公共库提取出来,用户缓存下来。从此以后,用户再也不用下载这些库了,无论是否发布项目。嘻嘻。

webpack文档给了教程,看这里

webpack.dev.config.js

  1. var webpack = require('webpack');
  2.  
  3. entry: {
  4. app: [
  5. 'react-hot-loader/patch','src/index.js')
  6. ],vendor: ['react','react-router-dom','redux','react-dom','react-redux']
  7. }
  8. /*plugins*/
  9. new webpack.optimize.CommonsChunkPlugin({
  10. name: 'vendor'
  11. })

react等库生成打包到vendor.hash.js里面去。

但是你现在可能发现编译生成文件app.[hash].jsvendor.[hash].js生成hash一样的,这里是个问题,因为呀,你每次修改代码,都会导致vendor.[hash].js名字改变,那我们提取出来的意义也就没了。其实文档上写的很清楚,

  1. output: {
  2. path: path.join(__dirname,//这里应该用chunkhash替换hash
  3. chunkFilename: '[name].[chunkhash].js'
  4. }

但是无奈,如果用chunkhash,会报错。和webpack-dev-server --hot不兼容,具体看这里

现在我们在配置开发版配置文件,就向webpack-dev-server妥协,因为我们要用他。问题先放这里,等会我们配置正式版webpack.config.js的时候要解决这个问题。

生产坏境构建

开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中,我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中,我们的目标则转向于关注更小的 bundle,更轻量的 source map,以及更优化的资源,以改善加载时间。由于要遵循逻辑分离,我们通常建议为每个环境编写彼此独立的 webpack 配置。

文档看这里

我们要开始做了~

  1. touch webpack.config.js

webpack.dev.config.js的基础上先做以下几个修改~

  1. 删除webpack-dev-server相关的东西~
  2. devtool的值改成cheap-module-source-map
  3. 刚才说的hash改成chunkhash

webpack.config.js

  1. const path = require('path');
  2. var HtmlWebpackPlugin = require('html-webpack-plugin');
  3. var webpack = require('webpack');
  4.  
  5. module.exports = {
  6. devtool: 'cheap-module-source-map',entry: {
  7. app: [
  8. path.join(__dirname,'react-redux']
  9. },output: {
  10. path: path.join(__dirname,filename: '[name].[chunkhash].js',chunkFilename: '[name].[chunkhash].js'
  11. },module: {
  12. rules: [{
  13. test: /\.js$/,use: ['babel-loader'],'src')
  14. },{
  15. test: /\.css$/,'css-loader']
  16. },{
  17. test: /\.(png|jpg|gif)$/,use: [{
  18. loader: 'url-loader',options: {
  19. limit: 8192
  20. }
  21. }]
  22. }]
  23. },plugins: [
  24. new HtmlWebpackPlugin({
  25. filename: 'index.html','src/index.html')
  26. }),new webpack.optimize.CommonsChunkPlugin({
  27. name: 'vendor'
  28. })
  29. ],resolve: {
  30. alias: {
  31. pages: path.join(__dirname,'src/router'),actions: path.join(__dirname,'src/redux/reducers')
  32. }
  33. }
  34. };

package.json增加打包脚本

"build":"webpack --config webpack.config.js"

后执行npm run build~看看dist文件夹是不是生成了我们发布要用的所有文件哦?

接下来我们还是要优化正式版配置文件~

文件压缩

webpack使用UglifyJSPlugin来压缩生成文件

npm i --save-dev uglifyjs-webpack-plugin

webpack.config.js

  1. const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
  2.  
  3. module.exports = {
  4. plugins: [
  5. new UglifyJSPlugin()
  6. ]
  7. }

npm run build发现打包文件大小减小了好多。

指定环境

许多 library 将通过与 process.env.NODE_ENV 环境变量关联,以决定 library 中应该引用哪些内容。例如,当不处于生产环境中时,某些 library 为了使调试变得容易,可能会添加额外的日志记录(log)和测试(test)。其实,当使用 process.env.NODE_ENV === 'production' 时,一些 library 可能针对具体用户的环境进行代码优化,从而删除添加一些重要代码。我们可以使用 webpack 内置的 DefinePlugin 为所有的依赖定义这个变量:

webpack.config.js

  1. module.exports = {
  2. plugins: [
  3. new webpack.DefinePlugin({
  4. 'process.env': {
  5. 'NODE_ENV': JSON.stringify('production')
  6. }
  7. })
  8. ]
  9. }

npm run build后发现vendor.[hash].js又变小了。

优化缓存

刚才我们把[name].[hash].js变成[name].[chunkhash].js后,npm run build后,
发现app.xxx.jsvendor.xxx.js不一样了哦。

但是现在又有一个问题了。

你随便修改代码一处,例如Home.js,随便改变个字,你发现home.xxx.js名字变化的同时,
vendor.xxx.js名字也变了。这不行啊。这和没拆分不是一样一样了吗?我们本意是vendor.xxx.js
名字永久不变,一直缓存在用户本地的。~

@L_502_46@推荐了一个插件HashedModuleIdsPlugin

  1. plugins: [
  2. new webpack.HashedModuleIdsPlugin()
  3. ]

现在你打包,修改代码再试试,是不是名字不变啦?错了,现在打包,我发现名字还是变了,经过比对文档,我发现还要加一个runtime代码抽取,

  1. new webpack.optimize.CommonsChunkPlugin({
  2. name: 'runtime'
  3. })

加上这句话就好了~为什么呢?看下解释

注意,引入顺序在这里很重要。CommonsChunkPlugin 的 'vendor' 实例,必须在 'runtime' 实例之前引入。

public path

想象一个场景,我们的静态文件放在了单独的静态服务器上去了,那我们打包的时候,如何让静态文件链接定位到静态服务器呢?

看文档Public Path

webpack.config.js output增加一个publicPath,我们当前用/,相对于当前路径,如果你要改成别的url,就改这里就好了。

  1. output: {
  2. publicPath : '/'
  3. }

打包优化

你现在打开dist,是不是发现好多好多文件,每次打包后的文件在这里混合了?我们希望每次打包前自动清理下dist文件

npm install clean-webpack-plugin --save-dev

webpack.config.js

  1. const CleanWebpackPlugin = require('clean-webpack-plugin');
  2.  
  3.  
  4. plugins: [
  5. new CleanWebpackPlugin(['dist'])
  6. ]

现在npm run bundle试试,是不是之前的都清空了。当然我们之前的api文件夹也被清空了,不过没关系哦~本来就是测试用的。

抽取css

目前我们的css是直接打包进js里面的,我们希望能单独生成css文件

我们使用extract-text-webpack-plugin来实现。

npm install --save-dev extract-text-webpack-plugin

webpack.config.js

  1. const ExtractTextPlugin = require("extract-text-webpack-plugin");
  2.  
  3. module.exports = {
  4. module: {
  5. rules: [
  6. {
  7. test: /\.css$/,use: ExtractTextPlugin.extract({
  8. fallback: "style-loader",use: "css-loader"
  9. })
  10. }
  11. ]
  12. },plugins: [
  13. new ExtractTextPlugin({
  14. filename: '[name].[contenthash:5].css',allChunks: true
  15. })
  16. ]
  17. }

npm run build后发现单独生成css文件

使用axiosmiddleware优化API请求

先安装下axios

npm install --save axios

我们之前项目的一次API请求是这样写的哦~

action创建函数是这样的。比我们现在写的fetch简单多了。

  1. export function getUserInfo() {
  2. return {
  3. types: [GET_USER_INFO_REQUEST,GET_USER_INFO_FAIL],promise: client => client.get(`http://localhost:8080/api/user.json`)
  4. afterSuccess:(dispatch,getState,response)=>{
  5. /*请求成功后执行函数*/
  6. },otherData:otherData
  7. }
  8. }

然后在dispatch(getUserInfo())后,通过redux中间件来处理请求逻辑。

中间件的教程看这里

我们想想中间件的逻辑

  1. 请求前dispatch REQUEST请求。
  2. 成功后dispatch SUCCESS请求,如果定义了afterSuccess()函数调用它。
  3. 失败后dispatch FAIL请求。

来写一个

  1. cd src/redux
  2. mkdir middleware
  3. cd middleware
  4. touch promiseMiddleware.js

src/redux/middleware/promiseMiddleware.js

  1. import axios from 'axios';
  2.  
  3. export default store => next => action => {
  4. const {dispatch,getState} = store;
  5. /*如果dispatch来的是一个function,此处不做处理,直接进入下一级*/
  6. if (typeof action === 'function') {
  7. action(dispatch,getState);
  8. }
  9. /*解析action*/
  10. const {
  11. promise,types,afterSuccess,...rest
  12. } = action;
  13.  
  14. /*没有promise,证明不是想要发送ajax请求的,就直接进入下一步啦!*/
  15. if (!action.promise) {
  16. return next(action);
  17. }
  18.  
  19. /*解析types*/
  20. const [REQUEST,SUCCESS,FAILURE] = types;
  21.  
  22. /*开始请求的时候,发一个action*/
  23. next({
  24. ...rest,type: REQUEST
  25. });
  26. /*定义请求成功时的方法*/
  27. const onFulfilled = result => {
  28. next({
  29. ...rest,result,type: SUCCESS
  30. });
  31. if (afterSuccess) {
  32. afterSuccess(dispatch,result);
  33. }
  34. };
  35. /*定义请求失败时的方法*/
  36. const onRejected = error => {
  37. next({
  38. ...rest,error,type: FAILURE
  39. });
  40. };
  41.  
  42. return promise(axios).then(onFulfilled,onRejected).catch(error => {
  43. console.error('MIDDLEWARE ERROR:',error);
  44. onRejected(error)
  45. })
  46. }

修改src/redux/store.js来应用这个中间件

  1. import {createStore,applyMiddleware} from 'redux';
  2. import combineReducers from './reducers.js';
  3.  
  4. import promiseMiddleware from './middleware/promiseMiddleware'
  5.  
  6. let store = createStore(combineReducers,applyMiddleware(promiseMiddleware));
  7.  
  8. export default store;

修改src/redux/actions/userInfo.js

  1. export const GET_USER_INFO_REQUEST = "userInfo/GET_USER_INFO_REQUEST";
  2. export const GET_USER_INFO_SUCCESS = "userInfo/GET_USER_INFO_SUCCESS";
  3. export const GET_USER_INFO_FAIL = "userInfo/GET_USER_INFO_FAIL";
  4.  
  5. export function getUserInfo() {
  6. return {
  7. types: [GET_USER_INFO_REQUEST,promise: client => client.get(`http://localhost:8080/api/user.json`)
  8. }
  9. }

是不是简单清新很多啦?

修改src/redux/reducers/userInfo.js

  1. case GET_USER_INFO_SUCCESS:
  2. return {
  3. ...state,userInfo: action.result.data,errorMsg: ''
  4. };

action.userInfo修改成了action.result.data。你看中间件,请求成功,会给action增加一个result字段来存储响应结果哦~不用手动传了。

npm start看看我们的网络请求是不是正常哦。

调整文本编辑器

使用自动编译代码时,可能会在保存文件时遇到一些问题。某些编辑器具有“安全写入”功能,可能会影响重新编译。

要在一些常见的编辑器中禁用此功能,请查看以下列表:

  • Sublime Text 3 - 在用户首选项(user preferences)中添加 atomic_save: "false"。
  • IntelliJ - 在首选项(preferences)中使用搜索,查找到 "safe write" 并且禁用它。
  • Vim - 在设置(settings)中增加 :set backupcopy=yes。
  • WebStorm - 在 Preferences > Appearance & Behavior > System Settings 中取消选中 Use "safe write"。

猜你在找的React相关文章