riddle1981的博客

相比于webpack的通用性来说，rollup更专用于esmodule的处理。这在某些场景下会需要一些额外的配置来处理特殊场景。但是如果你使用的这个三方库没有默认default，则需要配合@rollup/plugin-commonjs使用。这是因为rollup打包会处理相对路径，对于npm包的绝对路径引用是不会做任何处理的。这种情况可以用插件处理。此时不出意外的话，第三方模块已经顺利打包进bundle包了。rollup在打包时是不会处理process环境的，这种情况需要插件额外处理。至此配置就全部完成了。

webpackMode如果不写的话，模块是不会单独打包成一个独立模块的。因为使用本地真实路径，node_modules的相关配置都会失效的。其中symlinks配置是用来标识是否将模块引入解析为真实路径。如果你需要打包的模块是自己用npm link链接的模块记得关闭。对于懒加载来说，不是独立模块是没办法在需要的时候单独加载的。./conf.base.cjs 基础配置。

在开始进行仓库合并之前先大致梳理一下合并的原理，这样才能在出错的时候找到合理的解决方案。如果想直接看操作，看部分即可。

如果用户进入指定的链接，隐藏的这个页面就会立马进入用户的视线。用户代理应尽可能尝试启动预连接并执行完整的连接握手（DNS+TCP 用于 HTTP，DNS+TCP+TLS 用于 HTTPS 源），但允许选择执行部分握手（DNS 仅用于 HTTP , 和 DNS 或 DNS+TCP 用于 HTTPS 来源），或完全跳过它，由于资源限制或其他原因。作为元素 的属性 rel 的值，是为了提示浏览器，用户未来的浏览有可能需要加载目标资源，所以浏览器有可能通过事先获取和缓存对应资源，优化用户体验。

每当我们提起原型链时不免会想到原型对象，对象的原型，还有众多的继承方式。于是prototype、[[prototype]]、constructor等等难免在头脑中打架。然而原型其实并不是什么高大上的内容，事实上随处可见。每当我们尝试调用对象方法或者获取对象属性时。js引擎都会检测对象上是否存在这个方法或属性，如果没有会检查他的原型链上是否存在这个方法或属性。直到检查到了结果或者遍历完了整条原型链都没有找到。除了对象，例如数组或函数本质上也都是对象，因此原型在js中其实是一个很基础但重要的内容。本文尝试用

引言其实关于浏览器缓存的内容网上已经不胜枚举，之所以产出本文的目的是，遇到缓存相关的问题后，在网上看到的所有相关内容大都雷同对细节的描述都不够全面。因此阅读了缓存相关的RFC文档及浏览器内核的实现文档等对缓存相关内容进行整理。在了解浏览器缓存之前，我们不妨先谈谈缓存的意义。这里引用RFC文档上的一句话：缓存如果不能用以提升性能，那么它就毫无用处。以HTTP缓存为例，如果缓存未过期那么就减少了网络请求，如果缓存通过验证那么就减少了传输资源大小。而关于过期与验证机制的讲解将在下文中展开。顺便一提，本文详细

前言我入行的时候前端框架就盛行，react、angular、vue等框架大行其道。这些框架的好处是十分显然的，便捷、快速且稳定。如果框架搭建的足够便捷不熟悉业务的人也能够快速上手项目，拿vue-cli来说，现成的脚手架已经集成了webpack、eslint、bable等常见框架的基础配置，而这些配置未必最优却通用性很强，对于初学者来说甚者可以不去了解这些常见框架就可以直接上手开发了。正是由于框架的便捷性，使得框架更加流行。vue-cli3更是直接把配置内置在了第三方插件里，让你在工作目录中完全看不到基础配

web 开发者们一直以来想在 Web 中使用音频和视频，自21世纪初以来，我们的带宽开始能够支持任意类型的视频。传统的 web 技术（如 HTML ）不能够在 Web 中嵌入音频和视频，所以一些像 Flash (后来有 Silverlight ) 的专利技术在处理这些内容上变得很受欢迎。这些技术能够正常的工作，但是却有着一系列的问题，包括无法很好的支持 HTML/CSS 特性、安全问题，以及可行性问题。传统的解决方案能够解决许多这样的问题，前提是它能够正确的工作。幸运的是，几年之后 HTML5 标准提出，其

问题描述滑动穿透：浮层上的触控会导致底层元素滑动。问题探究：1、给body加overflow:hidden,pc端可以锁scroll，移动端无效pc端可以直接overflow:hidden解决2、给body加overflow:hidden及绝对定位，背景会定位到顶部，如果是单屏页面可以，长页面不适用如果弹出浮层时背景本来就没有滚动距离，可以overflow:hidden加绝对定位解决...

前言合格的开发者知道怎么做，而优秀的开发者知道为什么这么做。这句话来自《web性能权威指南》，我一直很喜欢，而本文尝试从浏览器渲染原理探讨如何进行性能提升。全文将从网络通信以及页面渲染两个过程去探讨浏览器的行为及在此过程中我们可以针对那些点进行优化，有些的不足之处还请各位不吝雅正。一、关于浏览器渲染的容易误解点总结关于浏览器渲染机制已经是老生常谈，而且网上现有资料中有非常多的优秀资料对...

目录概要手势封装的兼容问题与解决方案TouchEvent事件详解（译自W3C）手势封装的实现一、手势封装的兼容实验在微信浏览器及手机自带浏览器当中的自带手势会影响事件的触发微信的自带手势包括但不仅限于页面顶部下拉刷新长按弹出菜单上下滑动翻动页面双指缩放在有默认手势时可能出现的问题有无法正常触发touchend事件，使用小米、vivo、oppo、苹果进行实验，实验结果...

注：没有标注书名只有页数的参考来源均指代《Javascript权威指南第六版》,其他参考均有书名或网址标注。 一、易产生误区知识点记录 1、[] == ! [] 所有对象都转化为true（P52），数组是对象，因此空数组[]转化为布尔值为真。而空数组转化为数字时为0.因此左式Number([])=0。 “!”运算符首先将操作数转换为布尔值，然后再对布尔值求反（P81),因此右式为!Bool...

根据vue官方文档，对于重定向有详细的示例，但是关于使用方法动态重定向的描述却不多，重定向部分的描述如下：重定向 重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ]})重定向的目标也可以是一个命

要说跨域首先了解同源策略： 同源策略，它是由Netscape提出的一个著名的安全策略。 现在所有支持JavaScript 的浏览器都会使用这个策略。 所谓同源是指，域名，协议，端口相同。实现跨域通常用以下三种方法JSONP：网页通过添加一个script元素，向服务器请求JSON数据，这种做法不受同源政策限制WebSocket : ws://（非加密）和wss://（加密）作为协议

vue的v-model为表单的完成提供了极大的便利，可以进行数据绑定，例如将input框的值和span值绑定，只要重新输入显示值会立即更改。下面我们来分析这一命令是如何实现的。在官方文档中解释这一名令实际仅是一个语法糖。那么首先我们来看看语法糖的概念： 语法糖：指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减...

当浏览器拿到一个网页是如何进行渲染的呢？ 首先浏览器渲染页面前需要先构建 DOM 和 CSSOM 树。因此，我们需要确保尽快将 HTML 和 CSS 都提供给浏览器。 下面来看浏览器绘制DOM 树的过程：HTML解析器输出的树是由DOM元素和属性节点组成的，它是HTML文档的对象化描述，也是HTML元素与外界（如Javascript）的接口。DOM与标签有着几乎一一对应的关系。 可以看到DOM

JS代码规范 1注释 代码注释需要说明“函数功能”、“入口参数”、“返回值”2 类型、字段、属性、方法、事件的命名统一使用英文。如果实在找不到合适描述可以使用中文但必须是全拼。使用中文是不符合要求的。 命名规范统一使用驼峰法（函数名中的每一个逻辑断点都有一个大写字母来标记）。并且所有类型、方法、参数、变量的命名不得使用缩写，包括大家熟知的缩写，例如msg。 3、 使用Tab作为缩进，并设置缩

一、新式布局案例1、垂直分割布局2、块状分割布局3、单屏布局二、网页布局的结构类型 T型布局 这是一个形象的说法，是指页面的定不是“网站标志+广告条”，左面是主菜单，右面是主要内容。这种布局的优点是页面结构清晰、主次分明，是初学者最容易上手的布局方法；缺点是页面呆板，如果不注意细节上的色彩，很容易让人“看之乏味”。“同”字形布局 所谓“同”字形结构，就是整个页面布局类似“同”字，页面顶部是主

扁平化设计风格带给受众的是一种干净、简洁的设计情绪。这种设计风格现在已经得到了大量的应用。那么什么是扁平化设计呢？扁平化设计是指放弃渐变、阴影、高光等拟真视觉效果，从而更加简单直接的将信息展示出来。一、扁平化设计的五大特点 1、拒绝特效 扁平化设计概念最核心的地方就是放弃一切装饰效果，诸如阴影、透视、纹理、渐变等等能做出 3D 效果的元素一概不用。所有的元素的边界都干净俐落，没有任何羽化、渐变

一、渐变背景色方案 *括号内为浅色渐变方案就是有白色字体的模块1、#008F6C渐变到#1B18AF（#02CB9F到#2623FA） 2、#9F365F渐变到#1B18AF（#E5508A到#05BEA7） 3、#D0BA0C渐变到#038859（#F8DF0C到#02CF86） 4、#332175渐变到#048181（#442E9A到#05D1D3） 5、#BC1C41渐变到#002B

对于内容描述性的网页及网页模块，最重要的内容，就是文字。出现了文字，就会出现文字排版、字体选择、字体颜色大小粗细等细节。而这些细节，往往是非常重要的细节。不同的字体和选色往往对整个页面都有着非常大的影响，这是我在自己进行页面设计中感受很深的一点。一、设计要点 1.字体样式不能太繁复，避免显得页面太过杂乱。 2.使用的字体应该容易识别，而且最好是通用字体这样可以避免在不同浏览器上显示的效果与设计差

一、色论1、原色、间色和复色原色：也叫“三原色”。即红、黄、蓝三种基本颜色。自然界中的色彩种类繁多，变化丰富，但这三种颜色却是最基本的原色，原色是其他颜色调配不出来的。把原色相互混合，可以调和出其他种颜色。间色：又叫“二次色”。它是由三原色调配出来的颜色。红与黄调配出橙色；黄与蓝调配出绿色；红与蓝调配出紫色，橙、绿、紫三种颜色又叫“三间色”。在调配时，由于原色在份量多少上有所不同，所以能产生丰富

目录： 一、什么是JWT 二、我们为什么要使用JWT（与传统的session认证有何区别） 三、如何使用JWT 四、JWT的构成及原理 五、JWT加解密实例一、什么是JWT JWT——Json web token 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准，可实现无状态、分布式的Web应用授权。二、我们为什么需要JWT？ 首先，当前后端分离时我们会因为同源策略

前言　　以前学习浏览器的渲染机制时，对浏览器的渲染概念就是html解析成DOM，css形成样式规则。两者共同构建渲染树。浏览器根据渲染树的样式进行布局和渲染。后来再次回过头去看这些概念时发现很多知识点都是非常深的。 　　比如浏览器如何解析CSS形成样式树，那么浏览器究竟如何解析？了解这些并非没有意义，比如当了解css解析是自右向左后，就知道在写css样式时应该避免嵌套。了解解析顺序就知道如何

一篇持续更新的干货贴♪（＾∀＾●）ﾉｼ **1. 解决div中文字和图片水平对齐问题**当div同时出现img和span，会出现图片高于文字的现象，用以下三种方法可以解决这个问题。1、第一种方法是使用vertical-align: middle首先设置图片和文字的vertical-align: middle这个时候要注意，如果图片大小和文字大小不一样，比如20px的图片和16px的字，一定要设置文字的l

关于路由信息对象的hash属性定义如下 看了文档以后自己输出路由信息对象 url：localhost:8080/#/2输出路由信息对象和location.hash此时路由信息对象的hash是空串，也就是说没有hash值，按照我的理解觉得r档期路由的hash应该也是#/2 在多方查找资料无果后决定自己去查vue源码。源码如下： vue-router.jsfunction c

Async/Await应该是目前最简单的异步方案了，这里我们将使用它进行数据库操作。先来说一下它的基本规则： async 表示这是一个async函数，await只能用在这个函数里面。 await 表示在这里等待promise返回结果了，再继续执行。 await 后面跟着的应该是一个promise对象（当然，其他返回值也没关系，只是会立即执行，不过那样就没有意义了…）这里我们选择No

一、外边距折叠：指的是毗邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距。1、折叠的结果 ①毗邻兄弟元素参加折叠的margin都是正值：取其中 margin 较大的值为最终 margin 值。参与折叠的 margin 都是负值：取的是其中绝对值较大的，然后，从 0 位置，负向位移。参与折叠的 margin 中有正值，有负值：先取出负 margin 中绝对值中最大的，然后，

一、什么是BFC BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。 中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局不