分类: frontend

storybook使用指南

概述storybook 在应用之外,为 UI 组件提供了独立的开发、调试环境。react-transition-group 类库的测试工作即通过 storybook 实现。 storybook 支持调试 react, vue, angular, react-native 组件。storybook官网 操作指南 全局安装 @storybook/cli 项目目录安装依赖:react 项目为 @stor

浅析react-transition-group源码

react-transition-group 1 版本回顾react-transition-group 1 版本在子组件创建、删除过程通过添加 class 控制 css 动效。 介于 css transition 动效在元素添加到页面过程就会执行,因此这个过程无需调控动效的执行。而当有元素被移除时,我们需要容器组件驻留被删除的子组件,等到动效执行完成后,才实际删除该子组件。 针对这一问题,reac

webpack插件指南

HotModuleReplacementPlugin内置为 webpack.HotModuleReplacementPlugin,热替换插件。 12345new webpack.HotModuleReplacementPlugin({ multiStep: boolean,// 设置为 true 时,插件会分成两步构建文件。首先编译热加载 chunks,之后再编译剩余的通常的资源 f

webpack加载器指南

加载器在 webpack 编译前预处理文件,链式调用多个加载器。 babel-loaderbabel-loader将 es6 降级为 es5。 参考文档: Babel是如何编译JS代码的及理解抽象语法树(AST) options 选项参考文档: babel options。 12345678910111213141516171819202122232425262728293031323334353

浅析webpack-merge源码

merge方法webpack-merge 类库的 merge 方法基于 lodash 类库的 mergeWith 方法实现。 mergeWith 方法用于遍历数组项或对象属性,通过尾参 customizer 定制化数据处理函数,获得新的数组项或对象属性。customizer 函数的参数为 (objValue, srcValue, key, object, source, stack)。 webpa

webpack配置指南

3.10.0参考文档:webpack 3.10.0 官方文档webpack 3.5.5 中文文档 content 上下文配置用于定位入口文件、loader的绝对路径,默认为工程目录。在基于webpack开发的打包工具中,content属性可设置为该类库的目录路径,以便于查找该类库加载的loader,入口文件采用绝对路径的方式引入。 context: path.resolve(__dirname,

浅析async-validator源码

这篇文章旨在于分析async-validator数据校验模块(1.8.1版本)的实现。如果这篇文章也能给读者带去裨益,那是笔者的荣幸。 基本校验在async-validator源码中,src/rule文件夹下各代码文件实现了最基础的数据校验能力,因此也可以被称为基础校验规则。 类型校验要分析async-validator模块的实现,容笔者先从类型校验说起。 在async-validator模块中,