关于 Redux 中间件

Redux 的中间件是概念四个函数,对 dispatch 实行更换,在发出 action 与推行reducer 之间增多其余成效,这是对 Redux
实行职能拓展的措施。那么那当中间件的达成原理是怎样吗?怎样写一个 Redux
的中间件呢?

从 react-start 到 co 源码
(一)


那是贰个体系文章。主要分为三篇,讲述了 react
开拓环境的粗略搭建,脚手架的费用以及 co 源码的剖析。对读者了然 react 和
generator 有断定的帮带。那是率先篇轻松的叙述了 react 开辟环境的搭建。

React
全家桶完成多个简短备忘录


前言 总结: 本文采取 react+redux+react-router+less+es陆+webpack,
以贯彻1个大致备忘录 (todolist) 为例尽大概周到的讲述使用 react
全家桶达成1个一体化应用的长河。 代码地址:React 全家桶达成一个简约备忘录
原版的书文博客地址:Rea…

redux 在 react
中的应用(基础篇)


依靠单人独马的 react
来营造利用的情状下,组件之间的电视发表一贯是个难点,借助于
redux,这一个难题将消除,同时,redux
也使得营造多个扑朔迷离大型的行使成为大概,redux
是可选方案,不过作为读书目的,你相对不要失去!

1二 步 30 分钟,实现用户管理的 CU卡宴D 应用
(react+dva+antd)


本文少禽一步步教导大家怎么创设三个整机的 CUTiguanD
应用,包罗列表、删除、编辑、创设,以及 loading 状态的机关处理等,基于
react, dva 和 antd 。

在 redux
上探究无需刷新前端页面包车型客车后端开采体验


后端应用为前端选用提供了动静(state)。借助
redux,我们得以在服务重视启后再一次拉去数据,替换
action,创设一样标准下的新处境,从而不要求刷新页面来重启前端接纳。那对于以重启分外便捷的脚本语言作为后端语言的施用,并且是还要开始展览前后端支出的景色来讲,能够提供越来越好的支付体验。

简短几步助你优化 React
应用包体


本文从属于作者的 Web 前端入门与顶尖执行 中的 React
入门与超级施行种类。本文首发于轻易几步助你优化 React 应用包体 –
某熊的全栈之路 – SegmentFault,思索到专栏知识系统的完美转载到了那里。

React 起手式: 来写个 TodoList


3个粗略 TodoList 的教程,让初专家能够火速上手并且对 React
有个大致的刺探 😀

是的领会 React 生命周期
(Lifecycle)


1 React 用了这么久,平日遇上的难点是 setState 在此处写合适吗?
二 为何 setState 写在此间产生了再一次渲染数10次?
叁 为何你的 setState 用的这么乱?
肆 组件传入 props 是翻新呢?重新挂载呢?依然什么?

[英] Netflix:使用 React 创设高质量的 电视机用户分界面


Netflix 在 二零一六 年就挑选 React 作为前端架构,那篇小说总计了 Netflix
在化解质量难点的阅历。

[译文] React:
一步一步搭建大型应用


翻译自
https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/
叙述了,从安装开垦环境测试环境,到搭建应用,一步一步怎样搭建答应完整的
react 应用的。

根本一下几地点:

  1. 条件铺排
  2. 类型结构划设想计
  3. react 测试书写
  4. 路由和组件的陈设

涉嫌到的知识:

React,Postcss, Webpack, css modules, react-router, karma, mocha,
enzyme, flexbox

传说 vue+vuex+localStorage
开垦的当地记事本


正文采取vue+vuex+localStorage+sass+webpack,达成三个本土存款和储蓄的记事本。包容 PC
端和移动端。

翻译 | 怎样规模化 React
应用


翻译: 朱乙(沪江前端开采工程师)

笔者们近期颁发了 React Boilerplate
三.0,在发表前多少个月,我们与数百位开采者进行了关系,钻探了她们是何许塑造和规模化
WEB 应用的。上面将我们从中学到的东西分享给大家。

React
实战:模仿卖座电影


2个施用 react、react-router、redux 高仿卖座电影网的项目

[译] 在 setState
中动用函数替代对象


React 中 setState 的新用法!

一个 react+redux
工程实例


这篇作品主要完结贰个简约的例证,难度一点都不大,可是贯穿了 react+redux
基本思维。
她将会是3个总是教程,那只是率先篇,不关乎 redux 中间件,redux
处理异步等内容,也不关乎 react 品质优化,不可变数据 immutable.js
的剧情。但这个不涉及到的始末,都会随着这么些 demo
的复杂度一步一步提高,在此起彼伏章节有分析和行使。

React
的三个概念简介


React 的八个概念简介:Virtual DOM;React 组件;Jsx 语法;Data
Flow(单向数据流)

CSS Modules 详解及 React 中实施 – pure render –
搜狐专栏


CSS Modules 详解及 React 中实践

深刻领悟 React
高阶组件


高阶组件是一种很好的形式,大多 React
库已经认证了其股票总市值。那篇小说中大家将会详细的上书如何是
HOC,你能用它做什么,它有何样局限,怎么样完毕它。

React 中 setState
同步更新攻略


我们在上文中聊起,为了加强质量 React 将 setState
设置为批次更新,便是异步操作函数,并无法以一一调整流的点子设置某个事件,我们也不能依靠于
this.state
来计量未来景色。典型的比如大家目的在于在从服务端抓取数据同时渲染到分界面之后,再隐蔽加载进程条可能外部加载提示:

React 落成的 204八 小游戏
(新手入门~)


根据 React 和 Webpack 开辟的三个 2048 小游戏,相对于干燥的
TodoList,那个只怕更有趣一点。

React.js: web 开荒者的 17个工具和能源


自从 推特(TWTR.US)(TWTCRUISER.US) 在 20一③ 年宣布了库之后,React.js
正在急迅被大面积开采者所承受。它今后已经成为了 GitHub 上被珍藏次数排行第 五的开源项目,越多的店堂正在寻找 React.js
开拓者。本文为周围开垦者介绍了 1四 个工具和能源,助力 web 开拓。

唯恐是注释写的最详细的 React 脚手架 ─
帮忙多入口及援助复杂事业分别


二个两全的 Koa+Webpack+React 集成开垦条件, 实现了多页面使用入口

框架优点

· 帮忙多页面类型的 React 应用开辟
· 实用 Koa 服务器进行营造, 增添性更加强
· 分为付出环境 (Dev) 和上线 (Prod) 环境, 能够自由选用并拓张开拓
· 帮忙 React 热加载, 能够兑现 CSS 及 JS 的热加载效果
· 附加 Postcss 工具, 可完毕 Sass 语法开辟, 自动填充 CSS三 包容方案及 CSS
7-Up图的自动化创设
· 使用了 CSS-Module 技能, 完毕了体制的复用性和平消除决了体制污染

据悉 React 的 fetch 请求测试工具 —
fetch-request


基于 dva antd 和 React 能够挑选三种呼吁类型, 用于在付出中测试接口

在 React.js 中利用 PureComponent
的重要和选拔方法


万一您用 React,请学会运用 PureComponent

前端学习指南 – 广度 +
深度的切磋


一篇鲁人持竿、稳步推进的学习指南,服从曲线,将带你涉足前端开荒进程中整整。若想在前者领域有更加深的盘算,也提供了相应的进阶篇,介绍本事背后的法则解说、架构思想、编制程序方法论等。

用 React+Redux 写一个 RubyChina 山寨版
(二)


React+redux+react-router-redux+antd+es六+redux-thunk 的 RubyChina
山寨版,适合初学 ReactJs,一边写代码一边写文书档案,记录成长的印痕

贰个简短的甘特图 React 组件封装
gantt-for-react


甘特图一般用来做职责、项目管理。直观的看出职务的岁月安插以及凭借关系。

[译] Netflix: 使用 React
创设高质量的电视机用户分界面


那篇文章计算了 Netflix 在利用 React 框架搭建其 UI
框架的进度中,质量优化方面包车型客车片段经历。

一张图学习 ES六 中的 React
生命周期与流程


为了知道 React
在学习生命周期的长河中想要多少个生命周期的图,网上有部分流水生产线,可是望着不够全,就尝试着画了1个,第3回弄,欢迎提意见

React
最少要求知识


2018年 八 月左右,看到了 ThoughtWorks 公布的 201陆年本事雷达,里面首要推荐介绍了 react.js
才具,加上前端本领栈③足鼎立中,react 也占领一席,别的四个分别是 vue.js
及 angular.js,而 react
和别的五个的区别在于,它颠覆了一切本事栈,自成贰只,遗弃了 HTML 和
DOM,引入了 JSX 语法,让程序员能够更令人瞩目于逻辑代码。那总体让自个儿对
react.js 充满了好奇,决定花时间攻读一下,1探终究。

简谈 react + redux
架构的性状和挑战


正文分别从 react 和 redux
各自的性格出发,分析了架构中互相的特色和难点所在。

JS
全栈教程


本学科是基于阮一峰的 js 全栈教程的录像版本,无需付费供大家观望

React 开荒流程——利用 React
构建简单的可搜索产品数据表


React 开辟流程——利用 React 创设轻巧的可搜索产品数量表

基于 Webpack 二 的 React Router
懒加载路由安顿


基于 Webpack 二 的 React Router 懒加载路由安插继承基于 Webpack 二 的 React
组件懒加载,首如若对上1篇文章中的部分论述实行补缺和考订,从属于 Web
前端入门与工程推行。

UXCore
组件单测的一部分事宜


UXCore 是 XUX 团队开源的 PC 端 React UI 套件,作为三个援救集团级应用的
React UI
开源套件,为了保险项指标源源不断集成,出色的单元测试不可或缺。本文来享受一下在编写单元测试的长河中相见的壹部分题目和总计。

React-曼加 多个以 React 达成的漫画
WebApp


行使 React 达成的 WebApp
版开源漫画阅读器。如今已兑现用户登陆注册、提供漫画推荐、漫画寻觅、漫画收藏、漫画阅读、历史记录
等成效。

React Toolbox – 符合 Material Design 规范的 React
组件


符合 Material Design 规范的 React 组件

浅析 React
之事件系统(贰)


小说介绍了 React 的事件系统,相比了与原技艺件的界别和什么客观运用 React
合成事件与原生时间

制作 redux
同构应用


handcrafting-an-isomorphic-redux-application-with-love

React
服务端渲染缓慢原因分析


干什么 React 服务端渲染的品质会这么之差;从筹划意见的角度来看 React
自身专注于跨平台的界面库,其保险较好抽象层次的同时局必会付出一定的代价,并且
推特(TWTR.US)在生养条件中从不普及应用服务端渲染,也就未开销过多的生命力来优化服务端渲染的性质。小编也比较了下
React 与 Preact
有关服务端渲染的贯彻代码,确实中度的虚幻要求卓殊的代码逻辑与指标成立,React
本人并不曾冗余的片段,只是单纯地质大学方的毫秒等级额外对象操作的耗时的丰富导致了最后质量表现的高大反差。我们先是看下
Preact 的 renderToString 的函数实现,其紧耦合于 DOM
环境,以较低的架空程度换取较少的代码达成:

依据 reactjs+redux+postcss+webpack二的单页应用类型模板


依照 reactjs+redux+postcss+webpack贰 的单页应用类型模板,webpack 已进级到
二.二.壹。

选取 mobx 开垦高质量 react
应用


react 作为模块化的 UI
层框架,在前者领域正处在万马奔腾的身价。但就算只是使用 react,往往需求在
UI
层中承载过多的事体逻辑,引进模块化的同时却破坏了分支。为此产业界有广大解决方案,近日最盛行的正是redux,其适用于大型项目。而本文将详细介绍一种更加灵活的、适合于中型小型型应用的数据层框架
mobx。

React 常用面试标题与分析 –
某熊的全栈之路


React 常用面试标题与分析从属于笔者的 Web
前端入门与工程推行,更加多前端思量借鉴 201陆 – 小编的前端之路:
工具化与工程化

React Table – 适用于 React
的轻量级、可扩大的数额表格


优点:轻量,压缩后 七kb;完全定制的 JSX
模板;援助客户端和服务器端的分页和1体系排序;设计简洁,方便大旨化;通过
props 和 callback 来中度定制。

React
爬坑记


趁年假钻探了下 react,写了点坑

通用 React
包容渲染引擎:Rax


Rax 是Ali开源的七个通用的 JavaScript
库。它具有快捷、轻量级的,并可跨浏览器、Weex 和 Node.js
的特征。同时,它有 React 包容的 API ,便于精通 React
的对象们非常快上手。喜欢的朋友能够驾驭下。

用 React+Redux 写一个 RubyChina 山寨版
(一)


React+Redux+react-router-redux+antd+babell+es六 的 RubyChina
山寨版,适合初学 ReactJS,1边写代码1边写文书档案,记录成长的印痕

React-Redux-Appointment


React-Redux 小应用:React-Redux-Appointment

从 react-start 到 co 源码
(二)


那是1个多种小说。首要分为3篇,讲述了 react
开采环境的简要搭建,脚手架的花费以及 co 源码的解析。对读者领会 react 和
generator 有一定的增派。那是第三篇讲述了 react 开拓条件脚手架的支出。

介绍 roadhog —— 让 create-react-app
可配的命令行工具


roadhog 是3个 cli 工具,提供 server 和 build
多个指令,分别用于地点调节和测试和营造。命令行体验和 create-react-app
一致,配置略有分化,比如暗中同意开启 css modules,然后还提供了 JSON
格式的安插情势。

基于 React.js + Node.js 的开源博客框架
phoenix-blog-framework


phoenix-blog-framework 是自己付出的壹款个人博客框架。使用 React.js +
Typescript + CSS-Modules + pug 等技巧做前端,用 Node.js + Mongodb +
Typescript 做后台开辟。用 马克down 做文章写作系统。

使用 React、Node.js、MongoDB、Socket.IO 开辟三个剧中人物投票应用 | 闲散人生
|
idlelife


在本教程里你将学习到怎么利用 Node.js 创设多个 REST API、使用 MongoDB
保存和搜索数据、使用 Socket.IO 追踪在线的访问者,以及采取 React + Flux
和服务端渲染来营造单页面应用,最后将使用陈设到云端。

[译] 编写 React
组件的特级施行


当本身一起初写 React
的时候,小编记得有繁多不1的点子来写组件,种种教程都大分裂。尽管从那现在React 框架已经变得一定的多谋善算者,但就像如故未有一种令人惊讶标写组件的 “正确”
格局……

React 开辟中的 Provider 和 HOC
情势


React 开荒中的 Provider 和 HOC 形式

将 React 应用优化到
60fps


用作 DOM 的悬空,React 自然也依据了资深的架空漏洞定理(详见 2016 –
小编的前端之路: 工具化与工程化),引进 React
导致了在使用本人的习性消耗之外势必会扩充额外的天性损耗。Dan Abramov 在
推特 上提到,React 并不可能担保质量优越原生的 DOM
达成,可是它亦可帮衬多量的日常开拓者营造大型应用的同时不必在早先时代就消耗大批量的肥力在品质优化上,在大许多用户交互分界面上
React
已经能够帮大家实行客观的优化了。可是在利用开垦的进度,尤其是终极的底细优化阶段中,大家须要观望于部分质量瓶颈页面,正确地认识那种范围的因由以及相对应的拍卖方案。本文便是笔者在创设友好的特大型应用中经历的下结论。

 

后台项目利用分享

后台项目采纳分享

webpack + react + redux + antd

策略篇

框架选拔

兼容性IE9+

  • 组件化:React
  • 动静管理:React Redux
  • 前者路由: React Router
  • Ajax请求: Axios
  • UI库:Ant Design
  • 塑造筑工程具:Webpack

组件化开荒

组件?组件!

(讨论)

CSS in JS下的体制开垦思路

  • 体制跟着组件走

button-group.js
button-group.less
  • 选拔工具方法

@import (reference) "~BaseLess";
.username{
    display: inline-block;
    max-width: 200px;
    .text-overflow() //使用单行溢出隐藏方法
}

注:在less文件中援引alias定义或node _modules下的less文件,必要在门路前加~

  • 使用compose落实样式复用

/* components/Button.css */
.base { /* 所有通用的样式 */ }

.normal {
  composes: base;
  /* normal 其它样式 */
}

.disabled {
  composes: base;
  /* disabled 其它样式 */
}
imp
  • 重新载入参数全局样式

.collapsed {
    //anticon类原样输出
    :global(.anticon) {
        font-size: 16px;
        margin-left: 8px;
    }
    :global(.anticon+span),
    :global(.ant-menu-submenu-vertical > .ant-menu-submenu-title:after) {
        display: none;
    }
}

扩充阅读:CSS Modules 详解及 React
中实践

来得组件 VS 容器组件

咱俩先来看一下Redux法定文书档案中的定义:

  展示组件 容器组件
作用 描述如何展现(骨架、样式) 描述如何运行(数据获取、状态更新)
直接使用 Redux
数据来源 props 监听 Redux state
数据修改 从props调用回调函数 向 Redux 派发 actions
调用方式 手动 通常由 React Redux 生成

结合官方概念,大家把组件分为多少个层次:

  • 应用(App)
    整个管理连串是1个利用(单页情势相似唯有二个利用,多页情势也许有四个使用)
  • 容器(Container):能够从路由访问获得的零件叫做容器,类似古板支付方式中的后端页面
  • 组件(Component):容器以外的机件都叫组件

Action/Reducer 应该和组件绑定吗

(讨论)

调试Redux

(演示)

营造二个调节和测试工具配置文件devtool.js

/**
 * redux调试工具
 */

import React from 'react';
import { createDevTools } from 'redux-devtools';
import LogMonitor from 'redux-devtools-log-monitor';
import DockMonitor from 'redux-devtools-dock-monitor';

export default createDevTools(
  <DockMonitor defaultIsVisible={false}
               toggleVisibilityKey="alt-h"
               changePositionKey="alt-q">
    <LogMonitor />
  </DockMonitor>
);

付出环境,在容器root.dev.js中引进调节和测试工具

import React from 'react';
import DevTools from './devtools';
import Layout from 'components/layout';
import style from './style.less'

export default class Root extends React.Component {

  render () {
    return (
      <div className={style.root}>
        <Layout>{this.props.children}</Layout>
        <DevTools />
      </div>
    )
  }
}

付出环境,在store.dev.js中引入调试工具

import DevTools from 'containers/root/devtools'

export default function configureStore(initialState, reducers) {
    const store = createStore(
        ...
        compose(
            ...
            //redux调试工具
            DevTools.instrument()
        )
    );
    ...
    return store
}

规范建议

命名规范

  • 变量名以驼峰格局,如:

const userInfo = {}
  • 类名以大写字母开首,如:

Class UserManager extend from React.Component{
    ...
}
  • 文本(夹)名1律小写,以下划线_或中杠线-用作分隔符
  • 文本(夹)名以下划线_区分种类,如:common_action.js,表示Action
  • 文件(夹)名以圆点.差异环境,如:root.dev.js,表示开采条件

模块规范

  • 一样目录下的模块之间以相对路径的点子引用
  • 分裂目录下的模块之间以绝对路径的措施引用
  • 常用模块以alias的方式引用(推荐alias以大写字母伊始,以分别模块路径引用)

思考:诸如此类设计的收益是什么?

目录划分

build                构建工具及配置
dist                 目标目录
src                  源码目录
mock                 mock数据
public               开发环境临时目录
node_modules         npm包目录
node_shrinkwrap      npm离线包目录

拉开阅读:怎么要有npm离线包?

build:营造筑工程具及布局

build/
    lib/                                     工具库
        *.js
    shell/                                   部署脚本
        *.sh
    webpack.config.common.js                 webpack公共配置
    webpack.config.dev.js                    webpack开发环境配置
    webpack.config.prod.js                   webpack生产环境配置
    webpack.dll.config.js                    webpack.dllPlugin配置
    config.js                                构建配置

config.js示例:

const fs = require('fs');
const path = require('path');

//提取多文件共用配置、项目可定制的配置

const pkg = require('../package.json');
const src = path.resolve(__dirname, '../src');
const dist = path.resolve(__dirname, '../dist/resource')

module.exports = {

    /*
     * 以下配置在项目中通常不需要变动
     */

    //package.json
    pkg,
    //源文件路径,使用绝对路径
    src,
    //导出路径,使用绝对路径
    dist,
    //静态资源目录,使用绝对路径
    contentBase: path.resolve(__dirname, '../public'),
    //导出资源映射表路径,使用绝对路径
    manifest: path.resolve(__dirname, '../dist/manifest'),
    //资源映射表名称,如下配置将根据当前日期生成对应的资源映射表
    manifestFileName: function() {
        return `${new Date().getFullYear()}-${new Date().getMonth()+1}-${new Date().getDate()}.json`
    },
    //dll生成路径
    dllPath: {
        development: path.resolve(src, 'vendor'),
        production: dist
    },
    //dll资源映射
    dllManifest: {
        development: path.resolve(src, 'vendor/dll-manifest.json'),
        production: path.resolve(dist, 'dll-manifest.json')
    },
    //js压缩配置
    UglifyJsOptions: {
        compress: {
            //不输出警告
            warnings: false
        },
        //不输出注释
        comments: false
    },

    /*
     * 以下配置在项目中通常需要定制
     */

    //生产环境中前端资源路径(需要与nginx配置保持一致),可以为域名url
    publicPath: '/Public/',
    //模块别名,相对于conf.src路径配置
    //- 推荐以大写字母开头,以区分非别名
    alias: {
        // 起别名:"module" -> "new-module" 和 "module/path/file" -> "new-module/path/file"
        // "module": "new-module",
        // 起别名 "only-module" -> "new-module",但不匹配 "module/path/file" -> "new-module/path/file"
        // "only-module$": "new-module",
        // 起别名 "module" -> "./app/third/module.js" 和 "module/file" 会导致错误
        // 模块别名相对于当前上下文导入
        // "module": "./app/third/module.js"
        "Coms": "components/common",
        "ActionTypes$": "utils/action_types.js",
        "Api$": "utils/api.js",
        "Helper$": "utils/helper.js",
        "Ajax$": "utils/ajax.js",
        "BaseLess$":"utils/baseless/baseless.less"
    },
    //代理配置
    proxy: {
        "/": {
            target: "http://test-matrix-v2.yileyoo.com",
            changeOrigin: true
        }
    },
    //mock配置
    mock: {
        //mock目录,使用绝对路径
        mockPath: path.resolve(__dirname, '../mock'),
        //支持设置统一接口后缀,如:.do
        apiExt: ''
    },
    //html模板配置
    template: {
        all:{
            title:'Matrix管理平台'
        },
        development:{
            serverOutput:'<script src="/server/output"></script>'
        },
        production:{
            serverOutput:'<script>window.REDUX_STATE = {!! $jsData !!};</script>'
        }
    },
    theme: path.resolve(src, 'theme/red.less')
}

dist:存放创设结果

dist/
    resource
        index_xxx.html
        app_xxx.js
        vendor_xxx.js
        app
    manifest
        2017-x-x.json

src:源码目录

src/
    ----------------------------------------------------
    actions/                Redux Action目录
        *_action.js
    reducers/               Redux Reducer目录
        *_reducer.js
    store/                  Redux Store目录
        index.js
        store.dev.js
        store.prod.js
    ----------------------------------------------------
    routes/                 React路由目录
        index.js
    ----------------------------------------------------
    containers/             React容器目录
        root/
            index.js
            root.dev.js
            root.prod.js
            devtools.js
    components/             React组件目录
        common/             React公共组件目录(alias:Coms)
        page_1/
            index.js
            *.js
            *.less             
        ...                 React页面组件
        page_n/
    ----------------------------------------------------             
    vendor/                 第三方库目录
        vendor.js
        verdor.js.map
        dll-manifest.json
    static/                 静态资源目录
        favicon.ico         
    utils/                  工具目录
        ajax.js             ajax工具(alias:Ajax)
        api.js              api工具(alias:Api)
        action_types.js     action类型工具(alias:ActionTypes)
        helper.js           常用工具方法(alias:Helper)
        baseless/*.less     常用less方法(alias:BaseLess)
    theme/                  主题目录
        *.less 
    ----------------------------------------------------
    config/                 配置目录
        *_config.js         
    ----------------------------------------------------

mock:存放mock数据的目录

mock/
    *.js
    *.json

public:开辟环境权且目录

public/
    index.html                      

npm package:npm包

node_modules                npm包目录
node_shrinkwrap             npm离线包目录

other files:根目录下别的文件

.gitignore                  git忽略配置
.gitlab-ci.yml              gitlab-ci配置
npm-shrinkwrap.json         npm包版本锁定配置
package.json                npm包配置
webpack.config.js           webpack配置入口
README.md                   说明文档

UI篇

怎么样引进ant

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { libraryName: "antd", style: "css" }] // `style: true` 会加载 less 文件
  ]
}

然后只需从 antd
引进模块就能够,无需单独引进样式。等同于上面手动引进的章程。

// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'antd';

哪些定制antd

antd通过less变量提供了较活络的核心定制功能。(参考:修改 Ant Design
的体裁变量

急需修改babel-loader配置:

{
  "plugins": [
    ["import", { 
        libraryName: "antd", 
        style: true // 这里需要修改为`style: true`以实现主题配置
    }]
  ]
}

此处我们做了简便的包装:

1)在src/theme目录建一个核心文件,如:red.less(参考:antd默许宗旨文件

@primary-color: #f00;

2)在build/config.js文本配置大旨文件的不二秘诀

{
    ...
    theme: path.resolve(src, 'theme/red.less')
}

接二连三我们还将生产主题配置监听多主题切换等作用,敬请期待~

最先写三个antd组件

私下在项目中可复用的零件,都得以透过antd组件组合成二个通用(业务)组件。
专注,那里的零部件是Component(见前方的概念)类型。

(演示)

工具篇

devServer什么鬼

  • 一个node express应用
  • 提供静态财富服务
  • 支撑文件监听
  • 支撑热加载
  • 支撑路由代理
  • 补助接口转载

调用形式非常轻便,在命令行实践:

webpack-dev-server --env development --port 3000 --hot --inline --progress --open

webpack中的相关配置:

//开发服务器配置
devServer: {
    //告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。
    //devServer.publicPath 将用于确定应该从哪里提供 bundle,并且此选项优先。
    contentBase: [
        conf.contentBase,
        path.join(conf.src, 'static'),
        path.join(conf.src, 'vendor')
    ],
    //信息显示配置
    stats: "normal",
    //是否显示全屏遮罩
    overlay: true,
    //watch配置
    watchOptions: {
        ignored: /node_modules/,
        aggregateTimeout: 300,
        poll: 100
    },
    //联调模式下,使用数据代理
    proxy: isDebug ? conf.proxy : {},
    //开启浏览器历史
    historyApiFallback: true,
    //扩展devServer
    setup(app) {
        //非联调模式下,使用mock数据
        !isDebug && makeMock(app, conf.mock)
    }
}

当心的HtmlWebpackPlugin

  • 自行引用webpack生成的能源,支持过滤
  • 暗中认可协理ejs模板,能够注入变量,语法亲和
  • 社区生态好,1众扩大插件能够满意各个急需(参考

dllPlugin教程未有教您

课程多数,随便找①篇:怎么着令webpack的营造加速10倍、DllPlugin的用法

不实用!!!

get√到张开药情势后,大家来针对实况做个计算:

  • 分别开垦和生育环境
  开发环境 生产环境
警告信息
内容压缩
文件hash
SourceMap 可选
  • 怎么在页面引用

使用add-asset-html-webpack-plugin插件

{
    plugins:[
        ...
        // 在入口页面中引入静态资源
        new AddAssetHtmlPlugin({
            //通过dllManifest读取dll文件名
            filepath: path.resolve(conf.dllPath[NODE_ENV], `${dllManifest.name}.js`)
        })
    ]
}
  • 加一个库就亟须手写一下entry不需要!!!

 entry: {
   //读取package.json中的依赖
   vendor: Object.keys(conf.pkg.dependencies)
 }
  • 完整的webpack.dll.config.js

const path = require('path');
const webpack = require('webpack');
const conf = require('./config');

module.exports = function( /*通过命令行参数--env传入*/ NODE_ENV) {
  //是否生产环境
  const isProd = NODE_ENV === 'production';
  //文件名(不带后缀)
  const name = `[name]${isProd?"_[chunkhash:8]":""}`;
  //输出文件路径
  const filePath = conf.dllPath[NODE_ENV];
  //输出manifest路径
  const manifest = conf.dllManifest[NODE_ENV];
  //sourcemap配置
  const devtool = isProd ? '' : 'source-map';
  //插件
  let plugins = [
      new webpack.DllPlugin({
        //解析包路径的上下文,这个要跟接下来配置的 webpack.config.js 一致。
        context: __dirname,
        //manifest.json文件的输出路径,这个文件会用于后续的业务代码打包
        path: manifest,
        //dll暴露的对象名,要跟output.library保持一致
        name: name
      })
    ];
  //生产环境使用压缩版
  if (isProd) {
    plugins = plugins.concat([
      //变量定义
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(NODE_ENV)
      }),
      // js压缩配置
      new webpack.optimize.UglifyJsPlugin(conf.UglifyJsOptions)
    ])
  }
  return {
    entry: {
      //读取package.json中的依赖
      vendor: Object.keys(conf.pkg.dependencies)
    },
    output: {
      path: filePath,
      filename: name + '.js',
      //需要与filename保持一致,用于页面引用
      library: name
    },
    devtool,
    plugins
  }
};

扩充阅读:webpack
创设品质优化战术小结

思考:相比较其余方案,dllPlugin的优势在哪个地方?

SourceMap全方案

  • loader中启用SourceMap

{
    loader: 'xxx-loader',
    options: {
        ...
        sourceMap: true
    }
}
  • devtools中配置SourceMap类型

支付条件:唯快不破,最大化知足调节和测试要求

{   
    ... 
    devtool: 'cheap-module-eval-source-map'
}

生育条件:必要缅怀安全性和性质

{    
    ...
    devtool: 'source-map'
}

增加阅读:Webpack devtool source
map

拆分配置文件

webpack.config.common.js       公共配置
webpack.config.dev.js          开发环境配置
webpack.config.prod.js         生产环境配置

拆分原则:

  • module
    resolve在开垦和生育环境中的配置差距性相对较小,十二分适合抽出到集体配置中
  • entryoutputplugins
    相对来讲开荒和生育环境有两样的配备,由此放到devprod分别计划中
  • devtooldevServer 等仅出现在支付条件的配置直接放入dev配置中

协同篇

承载页

纯静态 vs 服务端渲染

  • 纯静态:服务端仅提供数据接口,通透到底不供给后端维护,缺点是心有余而力不足做财富回溯和切换
  • 服务端渲染:服务端提供数据接口,并将部分数据或气象渲染到页面,缺点是耦合了上下端布署逻辑

对服务端渲染的改善:

  • 将后端模板指向前端布署目录的html文件,如: index.html
  • 利用一定的后端模板,将数据或情形以JSON对象的不2诀窍出口
  • 动用HtmlWebpackPlugin,将后端模板注入到自动生成的页面中

build/config中的配置:

//html模板配置
template: {
    all:{
        title:'Matrix管理平台'
    },
    development:{
        serverOutput:'<script src="/server/output"></script>'
    },
    production:{
        serverOutput:'<script>window.REDUX_STATE = {!! $jsData !!};</script>'
    }
}

webpack中的配置:

{
    plugins:[
     ...
     // 根据模板创建入口页面
     new HtmlWebpackPlugin(Object.assign({
         template: path.resolve(conf.src, 'index.ejs'),
         filename: path.resolve(conf.contentBase, 'index.html')
     }, /*全环境模板配置*/conf.template.all, /*当前环境模板配置*/conf.template[NODE_ENV]))
    ]
}

index.ejs模板中援引

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>

<body>
    <div id="root" style="height: 100%"></div>
    <%= htmlWebpackPlugin.options.serverOutput %>
</body>

</html>

能源灰度 & 回溯

使用
assets-webpack-plugin插件,在webpack中生成财富映射json文件

{
    plugins:[
        ...
        //生成资源映射表
        new AssetsPlugin({
            path: conf.manifest,
            filename: conf.manifestFileName(),
            processOutput: function (assets) {
              //注入dll依赖信息
              assets.vendor = {
                'js': conf.publicPath + dllManifest.name + '.js'
              };
              return JSON.stringify(assets);
            }
        })
    ]
}

两种方案:

  • 同五个html模板,仅切换能源。需提供财富映射表
  • 区别html模板,切换模板。须求提供模板映射表

数据接口

文档

——接口定义,告诉我们有哪些接口,接口援救什么http方法,每种接口字段的意思是哪些等

(演示)

mock

——接口未有支付到位,前端依据接口文书档案模拟的数目

(演示)

proxy

——接口已经开荒到位,使用代理的方式贯彻本地接口联调

webpack中的相关安顿:

devServer:{
    ...
    proxy: {
      "/api": "http://localhost:3000"
    }
}

权限调节

页面权限

前端:

  • react-router中定义全数页面包车型地铁路由
  • 页面初叶化时,请求后端接口获取菜单权限
  • 仅呈现全部权限的菜系

后端:

  • 提供获取菜单权限的接口
  • 将经受到的路由请求作过滤,具备权限的则转向前端页面
  • 将40五分四00等悖谬路由转到前端页面

操作权限

前端:

  • 呼吁后端接口获取操作权限
  • 根据操作权限决定操作开关是还是不是出示

后端:

  • 提供获取操作权限的接口

相关文章