持久化缓存是 webpack5 所带来的非常强大的特性之一。一句话概括就是构建结果持久化缓存到本地的磁盘，二次构建(非 watch 模块)直接利用磁盘缓存的结果从而跳过构建过程当中的 resolve、build 等耗时的流程，从而大大提升编译构建的效率。

@babel/preset-env 主要的功能是依据项目经过 babel 编译构建后产生的代码所对应运行的目标平台。@babel/preset-env 内部依赖了很多插件： @babel/plugin-transform-*。这些插件的工作主要就是 babel 在处理代码的过程当中对于新的 ES 语法的转换，将高版本的语法转化为低版本的写法。例如 @babel/plugin-transform-arro...

在使用 webpack-dev-server 的过程中，如果指定了 hot 配置的话（使用 inline mode 的前提下）， wds 会在内部更新 webpack 的相关配置，即将 HotModuleReplacementPlugin 加入到 webpack 的 plugins 当中。

基于 esm 规范实现的 hmr 不需要单独再去实现一套模块的系统，因此在整个流程当中比较重要的一个点就是如何去实现模块之间的依赖关系，hmr 的更新也是基于模块之间的依赖关系来进行工作的。

@vue/cli 项目编译重复命中缓存问题解析 文章首发于个人blog，欢迎关注~ 背景 最近遇到一个更新了 package，但是本地编译打包后没有更新代码的情况，先来复现下这个 case 的流程： A 同学在 npm 上发布了0.1.0版本的 package； B 同学开发了一个新的 feature，并发布0.2.0版本； C 同学将本地的0.1.0版本升级到0.2.0版本...

文章首发于个人github blog: Biu-blog，欢迎大家关注~ Webpack 系列文章： Webpack Loader 高手进阶（一）Webpack Loader 高手进阶（二）Webpack Loader 高手进阶（三） Webpack Loader 详解 前2篇文章主要通过源码分析了 loader 的配置，匹配和加载，执行等内容，这篇文章会通过具体的实例来学习下如何去实现一个 loade...

上篇文章主要讲了 loader 的配置，匹配相关的机制。这篇主要会讲当一个 module 被创建之后，使用 loader 去处理这个 module 内容的流程机制。首先我们来总体的看下整个的流程：

文章首发于个人github blog: Biu-blog，欢迎大家关注~ Webpack 系列文章： Webpack Loader 高手进阶（一）Webpack Loader 高手进阶（二）Webpack Loader 高手进阶（三） Webpack loader 详解 loader 的配置 Webpack 对于一个 module 所使用的 loader 对开发者提供了2种使用方式： webpack config 配置形式，形如： {代码...

Vue源码是选用了rollup作为bundler，看Vue的源码时发现：npm script对应了不同的构建选项。这也对应了最后打包构建后产出的不同的包。

virtual-dom(后文简称vdom)的概念大规模的推广还是得益于react出现，virtual-dom也是react这个框架的非常重要的特性之一。相比于频繁的手动去操作dom而带来性能问题，vdom很好的将dom做了一层映射关系，进而将在我们本需要直接进行dom的一系列操作，映射到了操作vdom，而vdom上定义了关于真实dom的一些关键的信息，vdom...

首先让我们从最简单的一个实例Vue入手: {代码...} 通过查阅文档，我们可以知道这个options可以接受: 选项/数据 data props propsData(方便测试使用) computed methods watch 选项 / DOM 选项 / 生命周期钩子 选项 / 资源 选项 / 杂项 具体未展开的内容请自行查阅相关文档，接下来让我们来看看传入的选项/数据是如何管理...

Decorate模式 Decorate模式的几个常见的应用场景: throttle(函数节流) debounce(函数防抖) AOP 装饰者模式基本的套路就是在不改变原有的函数提供的功能的情况下，再次封装提供额外的功能 函数防抖即在一定的时间间隔s秒内重复触发某个动作的话，这个动作都会被延迟执行，只有等到这s秒没有再触发这个动作的时候再去执行....

显然，在需要建立依赖关系不多的几个对象中，使用Observer模式可以很好的将不同对象之间进行解耦：定义一个被观察者的主体，然后添加观察者对被观察者的依赖关系。但是需要建立依赖关系的对象一旦多起来，那么大家也可以想象下，自己手动去维护这些依赖关系是多么的蛋疼。

前端技术日新月异，技术栈繁多。以前端框架来说有React, Vue, Angular等等，再配以webpack, gulp, Browserify, fis等等构建工具去满足日常的开发工作。同时在日常的工作当中，不同的项目使用的技术栈也会不一样。当需要对部分项目进行国际化改造时，由于技术栈的差异，这时你需要去寻找和当前项目使用的技术栈相匹配的国...

最近的工作当中有个任务是做国际化。这篇文章也是做个简单的总结。 部分网站的当前解决的方案 不同语言对应不同的页面。在本地开发的时候就分别打包输出了不同语言版本的静态及模板文件，通过页面及资源的url进行区分,需要维护多份代码。 在线翻译 统一模板文件，前端根据相应的语言映射表去做文案的替换。 面对的问题 ...

这里没有使用像airbnb等一些厂发布的代码规范，因为每个团队的都有自己的代码风格，这里选用的javascript-style-standard这个大家用的比较多的风格指南。具体文档请戳我

底下评论说是标题党，或者是光扔个github地址上来的同学我就不说什么了。你们有看看仓库的提交记录么？我还没有吃撑到开个仓库去骗star.我的出发点就是每天更新一部分代码，教大家用我所提到的技术栈搭建一个blog，我的出发点就是这么简单。这个项目才开始2天，就是每天晚上抽点时间写写，速度不会很快，这周末前将前端...

webpack提供的一个非常强大的功能就是code spliting(代码切割)。 在webpack 1.x中提供了 {代码...} 利用require.ensure这个API使得webpack单独将这个文件打包成一个可以异步加载的chunk. 具体的套路见我写的另一篇blog: webpack分包及异步加载套路 一句话总结就是： 在输出的runtime代码中,包含了异步chunk的id及chunk n...

和其他语言相比,javascript中的对于undefined的理解还是有点让人困惑的。特别是试着理解ReferenceErrors错误("x is not defined")以及在编码过程中如何去避免这些错误总让人感到比较困惑。

最近一个小项目是用webpack来进行构建的。其中用到了webpack分包异步加载的功能。今天抽时间看了下webpack打包后的文件，大致弄明白了webpack分包及异步加载的套路。

由于2种机型的默认line-height不一致,这和字体、浏览器的布局模型、操作系统的字体渲染引擎，因此遇到这种情况的时候会选择手动的设置line-height的值，然后再通过margin或者padding去控制2个p标签之间的间距。

继承的话可以进行代码的复用。大白话来说：A有某属性或者方法，而B现在也需要这些属性和方法，这个时候使用继承，B继承于A。那么B就能获取的需要的属性或者方法。

你这样书写的原因是需要对2个promise的结果进行处理，由于then()接收的是上一个promise返回的结果，因此你无法通过链式写法将其连接起来。

Array.from方法主要用于将Array-Like Obj(包括DOM对象document.querySeletorAll(...))和iterable对象转化为数组。和下面说的spread操作符相比，它可以直接将Array-Like obj进行转化，而不需要这个类数组对象是iterable的。

这篇文章主要是记录下HTML5中history提供的pushState, replaceStateAPI。最后通过这些API自己实现小型的路由。

现在正是进入native里面的webview的测试。比如我要测试一个选择城市的组件： 主要的思路就是模拟用户的一系列操作，然后看测试的结果和预期是否符号。 首先还是通过控制台查看相应的DOM节点，通过macaca提供的API去获取相应的DOM元素然后触发用户操作。 以下还是在REPL环境下进行操作： {代码...} 图①: 图②： 图③： 图④...

macaca提供了命令单独启动webdriver server.然后我们在REPL作为client，向server端发送模拟操作命令。 首先启动server: {代码...} 启动server后，接下来首先给server发送命令，让server唤起模拟器： {代码...} ↑图是client和server端进行http通讯的log. 使用REPL去编写测试用例的比较方便的地方就是，整个测试过程不会因...

macaca是阿里开源的基于Node.js开发的自动化测试工具，支持native,hybird,moblie web,关于macaca具体的内容参见官网macaca.

部分基本概念及内容： 单元测试： 以模块为单元，测试你代码的本身，确保你编写的模块还有逻辑正确。只要输入的值不变，输出的值也应该不发生改变 前端自动化测试： 界面回归测试 测试界面是否正常，包括文案，图片等。 功能测试 包括交互逻辑和功能模块是否符合预期。 性能测试 页面性能越来越受到关注，并且性能需要在...

先从一个小题目开始吧： 要实现一个加法函数，这个时候向函数当中传递个数大于0的若干个整形数据，求所有这些数据的和。 Function.prototype.call Function.prototype.apply Function.prototype.bind 其中call方法: {代码...} call和apply的区别就在于传递方式的不同，call在接收指定参数的形式是someMethod.call(obj, a...