自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

vv_bug

Where there's a will there's a way.

  • 博客(169)
  • 资源 (4)
  • 问答 (3)
  • 收藏
  • 关注

转载 来和 webpack 谈场恋爱吧

Webpack 是实现前端工程化的一个重要工具。本课程由浅及深,逐步掌握基础知识并具有实战开发能力。幽默风趣的课堂氛围,带给你的都是最前沿的前端技术,进阶前端开发。你将学到的webpack 简介webpack 基础用法webpack 流程图webpack 源码解析webpack 扩展插件企业级项目实战课程介绍webpack 是实现前端工程化的一个重要工具,一些公司甚至会设置一个叫 webpack 工程师的角色,可见 webpack 在前端开发中起到了一个很重要的作用。本次课程将包

2020-10-09 16:51:59 306

原创 babe从入门到精通
原力计划

前言前面我们写了几篇很长的文章去介绍babel源码、preset-env、runtime,babel源码解析一babel源码解析之(@babel/preset-env)babel源码解析之(@babel/plugin-transform-runtime)在babel配置中我们可能用过@babel/polyfill、core-js、core-js-pure、@babel/runtime、@babel/runtime-corejs2、@babel/runtime-corejs3、@babel/pl

2020-07-02 20:29:14 1042 1

原创 闲聊Vue3.0及2020年终总结

前言最近经常有小伙伴问我一些关于 Vue3.0 的问题,有些甚至恐慌 Vue3.0 发布后自己不会咋办?会不会以后就要失业了呢?当一些新技术的出现,总有些人会对自己不自信,当然,你问我怕不怕?说实话,我是一点都不慌的,别人写出来的东西你去用你还怕啥?无非就是你自己在怀疑你自己能力罢了,年轻人怕啥?干就完了!不过既然有小伙伴问到了 Vue3.0,我还是花了点时间去研究了一下,下面就聊一下当我遇到新技术的时候我是怎么做的。准备工作首先我简单的浏览了一下 Vue3.0 的 官网,然后重点浏览了一下跟 Vue

2020-12-22 22:48:13 204

原创 Vue 中 keep-alive 组件与 router-view 组件的那点事

最近项目中有小伙伴找到我,问我“为啥他写的页面第一次进去可以触发 onCreate 函数,第二次再进的时候就不触发了呢?”(因为我们项目是一个大型的项目,每个开发可能只接触到自己开发的一小部分),然后我就说你可以试着在 activated 钩子函数中做处理,然后他又接着问我“activated 钩子函数又是怎么调用的呢?”,ok!这小子是问上瘾了,我们下面就来详细解析一下。keep-alive<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <tra

2020-12-01 13:01:27 427

原创 如何让 Vue 项目快速支持 TypeScript 语法?

简介JavaScript 作为一种弱类型的语言,类型推断只能提供很有限的支持,TypeScript 提供了一种描述对象形状的方法。可以帮助提供更好的文档,还可以验证你的代码可以正常工作,在一些大型的项目中,使用 TypeScript 非常必要,从代码层次就已经避免了很多错误,而且方便文档的书写,最主要的就是后期迭代特别爽,但是对于没有接触过强类型语言(Java、C)的童鞋来说,TypeScript 上手还是有点困难了,单就目前前端发展趋势来说,TypeScript 还是很重要的,想了解更多 TypeScr

2020-11-12 20:43:22 188

原创 Vue 各个资源包之间的区别(vue.common.dev.js、vue.runtime.esm.js 等等)

问题描述今天有童鞋在用 vue 项目写代码的时候,问我为啥会出现以下报错?[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.(found in <Root>

2020-11-09 21:22:36 579 2

原创 一文让你彻底弄懂 “vue-style-loader” 跟 “style-loader” 区别

一文让你彻底弄懂 “vue-style-loader” 跟 “style-loader” 区别简介用过 vue-cli 脚手架搭建 vue 项目都知道,vue-cli 中内置了 vue-style-loader 去加载样式模块,最后通过 <style> 标签把样式加载到页面,但是 style-loader 同样可以达到同样的效果,那么 vue 官方为啥还封装一个 vue-style-loader 库呢?那么它们到底有啥区别?平时项目中又该如何选择呢?下面先看一下它们各自官网的简介。开始

2020-10-24 15:35:17 3475 3

原创 css-loader导致vue中样式失效(坑坑坑!!)

问题描述vue文件中的样式失效环境vue-cli 4.4.6css-loader 4.2.1vue-style-loader 4.1.2原因vue-cli 4.4.6vue-cli 4.4.6默认对css-loader配置为空css-loader 4.2.1css-loader4.0后默认对esModule设置的是truevue-style-loader 4.1.2vue-style-loader 4.1.2默认接收的是commonjs的结果,也就是默认接收的是“css-load

2020-08-21 15:42:32 2252 1

原创 mini-css-extract-plugin源码解析

前言前面我们写过几篇关于webpack的文章:webpack源码解析一…webpack源码解析七(optimization)然后结合之前babel、eslint知识搭了一个比较复杂的vue项目:webpack实战之(手把手教你从0开始搭建一个vue项目)手把手教你从0开始搭建一个vue项目(完结)在实战demo中我们有用到一个css的插件mini-css-extract-plugin,今天我们结合demo来分析一下源码。简介This plugin extracts CSS in

2020-08-19 22:59:41 504

原创 rem、vw可伸缩布局框架(fpx)

前言前面我们分析了webpack,最后还实战了一个vue的项目:webpack实战之(手把手教你从0开始搭建一个vue项目)手把手教你从0开始搭建一个vue项目(完结)强烈推荐大家去阅读一下前面的文章哈!今天我们带来点干货,我们利用前面的知识撸一个h5移动端适配的框架,我们取名为"fpx-css-loader"。说到h5移动端适配的,大家都会想到rem跟vw,我们去caniuse看一下这两个方案的兼容性:rem可以看到,绝大多数的浏览器是兼容的,平时项目用它完全是没毛病!vwvm

2020-08-05 20:53:06 278

原创 手把手带你撸一遍vue-loader源码

前言前面写过两篇webpack实战的文章:webpack实战之(手把手教你从0开始搭建一个vue项目)手把手教你从0开始搭建一个vue项目(完结)强烈建议小伙伴们去看一下前面几个章节的内容,这一节我们研究一下vue-loader。介绍Vue Loader 是什么?Vue Loader 是一个 webpack 的 loader,它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件:<template> <div class="example">

2020-07-31 21:53:20 891 1

原创 手把手教你从0开始搭建一个vue项目(完结)

前言上一节webpack实战之(手把手教你从0开始搭建一个vue项目)最后我们完成了css样式的配置:webpack.config.js:const path = require("path");const config = new (require("webpack-chain"))();const isDev = process.env.WEBPACK_DEV_SERVER;config .context(path.resolve(__dirname, ".")) //webpack

2020-07-28 15:50:09 759 1

原创 webpack实战之(手把手教你从0开始搭建一个vue项目)

前言我们前面从前端架构:前端框架系列之(装饰器Decorator)前端框架系列之(vue-class-component)前端框架系列之(vue-property-decorator)前端框架系列之(mvc)前端框架系列之(mvp)前端框架系列之(mvvm)到项目工程化工具eslint、babel、webpack等,分别结合demo跟源码做了具体的分析:前端框架系列之(eslint源码解析)前端框架系列之(eslint自定义插件)babe从入门到精通…webpack源码解析七

2020-07-27 22:55:32 628

原创 webpack源码解析七(optimization)

前言前面我们写了几篇文章用来介绍webpack源码,跟着官网结合demo把整个webpack配置撸了一遍:webpack源码解析一webpack源码解析二(html-webpack-plugin插件)webpack源码解析三webpack源码解析四webpack源码解析五webpack源码解析六(webpack-chain)今天我们结合demo来看一下webpack的Optimization配置。demo还是前面几节中的: https://github.com/913453448/we

2020-07-23 22:53:12 344

原创 webpack源码解析六(webpack-chain)
原力计划

前言前面我们写了几篇文章用来介绍webpack源码,跟着官网结合demo把整个webpack配置撸了一遍:webpack源码解析一webpack源码解析二(html-webpack-plugin插件)webpack源码解析三webpack源码解析四webpack源码解析五今天我们说一下一个关于webpack配置的第三方库webpack-chain,为什么要讲它呢? 可以借助IDE可以做到智能提示,让我们配置起来不容易出错,而且完全链式语法,用起来比较爽!开始我们还是接着我们之前章节的w

2020-07-13 16:31:46 751

原创 webpack源码解析五
原力计划

前言我们继续前面的内容,把webpack剩下的配置项撸一遍,推荐大家先看一下前面的文章:webpack源码解析一webpack源码解析二(html-webpack-plugin插件)webpack源码解析三webpack源码解析四配置devtool此选项控制是否生成,以及如何生成 source map。什么是Source map?简单说,Source map就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置(source map更多的介绍跟

2020-07-12 18:41:43 554

原创 webpack源码解析四
原力计划

前言我们接着前面的文章webpack源码解析二继续往下探索webpack的配置,demo的github地址:https://github.com/913453448/webpack-demo.git。DevServerwebpack的devServer配置主要是针对webpack/**webpack-dev-server跟webpack/webpack-dev-middleware**的配置,因为webpack-dev-server依赖webpack-dev-middleware。我们首先在我们的因

2020-07-12 16:16:06 400

原创 webpack源码解析三
原力计划

前言前面写了一篇文章webpack源码解析一梳理了一遍webpack的编译过程,今天我们结合demo来过一遍webpack的所有配置项。开始为了更好的了解每一个选项的用法我们首先clone一份webpack的源码(demo用的是5.0.0-beta.7版本):git clone https://github.com/webpack/webpack.git源码clone完毕后在当前页面执行setup操作并且安装webpack-cli:yarn setup && yarn add

2020-07-09 18:00:53 940 1

原创 babel源码解析之(@babel/plugin-transform-runtime)
原力计划

前言前面我们用了一篇很长的文章介绍了@babel/preset-env,感兴趣的可以去看我之前的一篇文章babel源码解析之(@babel/preset-env),今天我们要分析的是babel的一个插件,叫@babel/plugin-transform-runtime.简介我们看一下官网对它的描述:A plugin that enables the re-use of Babel’s injected helper code to save on codesize.很简短的一个描述信息,翻译一

2020-07-02 13:42:50 690

原创 babel源码解析之(@babel/preset-env)
原力计划

前言还记得之前写过一篇文章:babel源码解析一,里面把babel的整个流程跑了一遍,最后还自定义了一个插件用来转换“尖头函数”,通过前面的源码解析我们知道,preset其实就是一些插件的集合,这一节我们来介绍一个babel中比较重要的preset“@babel/preset-env”,可能有些小伙伴已经用过了,没用过的话至少也应该见过,废话不多说,我们直接盘它。开始我们从项目创建开始,首先我们创建一个叫babel-demo的项目用来测试babel,然后执行npm初始化npm init 然后我们

2020-06-30 23:11:38 964 2

原创 前端框架系列之(eslint自定义插件)

开始前面已经写了两篇关于eslint的文章了,想必都对eslint应该有一个简单的认识了,在平常的项目中使用应该是问题不大,面试应该也是问题不大的,大家有兴趣可以看看前面两篇文章:前端框架系列之(eslint入门)前端框架系列之(eslint源码解析)接下来我们更深入的了解一下eslint,我们直接结合demo创建一个我们自己的plugin。我们还是用前面我们的eslint-demo项目,代码已经上传github了大家可以直接clone一份,我们在eslint-demo项目根目录直接创建一个p

2020-06-24 18:10:32 513

原创 前端框架系列之(eslint源码解析)

开始我们直接clone一份eslint的源码git clone https://github.com/eslint/eslint.git为了更好的理解源码,我直接贴一张自己整理的eslint的流程图,我们对照流程图再一步步解析源码bin我们首先找到了eslint命令的入口文件bin/eslint.js:...(async function main() { ... process.exitCode = await require("../lib/cli").execute(

2020-06-23 18:00:14 736

原创 前端框架系列之(eslint入门)

创建工程我们创建一个叫eslint-demo的工程,然后执行npm初始化https://github.com/913453448/eslint-demonpm init安装使用安装eslint$ npm install eslint --save-dev创建配置文件执行eslint的初始化npx eslint --init执行完毕后可以看到一个配置文件,我选的是json格式的配置文件,还有package.json中直接引用、yaml、js格式的配置文件,后面我们会讲到。.esli

2020-06-22 21:23:53 531

原创 前端框架系列之(mvvm)

简介前面我们介绍过了mvc 前端框架系列之(mvc),mvp 前端框架系列之(mvp),MVP中我们说过随着业务逻辑的增加,UI的改变多的情况下,会有非常多的跟UI相关的case,这样就会造成View的接口会很庞大。而MVVM就解决了这个问题,通过双向绑定的机制,实现数据和UI内容,只要想改其中一方,另一方都能够及时更新的一种设计理念,这样就省去了很多在View层中写很多case的情况,只需要改变数据就行。Model(模型)表示应用程序核心(比如数据库记录列表)。View(视图)显示数据(数据库记录

2020-06-16 21:49:27 238

原创 前端框架系列之(mvp)

简介前面我们介绍过了mvc 前端框架系列之(mvc),最后其实view跟controller的耦合度还是没有完全分离,所以会导致一大堆逻辑还是在view视图层了,所以为了解决这个问题,就把controller换成了presenter。Model(模型)表示应用程序核心(比如数据库记录列表)。View(视图)显示数据(数据库记录)。Presenter(代理)负责逻辑的处理我们再看一下mvc的设计图:再看一下mvp的设计图:MVP跟MVC很相像,我们把MVP当成MVC来看也不为过,pres

2020-06-16 16:26:18 250

原创 前端框架系列之(mvc)

前言前面我们写了三篇关于es装饰器的文章了,感兴趣的可以去看看:前端框架系列之(装饰器Decorator)前端框架系列之(vue-class-component)前端框架系列之(vue-property-decorator)简介MVC 是一种使用 MVC(Model View Controller 模型-视图-控制器)设计创建 Web 应用程序的模式:Model(模型)表示应用程序核心(比如数据库记录列表)。View(视图)显示数据(数据库记录)。Controller(控制器)处理输

2020-06-16 13:11:39 230

原创 前端框架系列之(vue-property-decorator)

简介:这节我们继续解析一个叫vue-property-decorator的第三方库,首先可以看它官网的一个介绍:This library fully depends on [vue-class-component](https://github.com/vuejs/vue-class-component), so please read its README before using this library.也就是说它是基于vue-class-component库的,在上一篇文章中我们介绍了如何在v

2020-06-15 11:20:53 703

原创 前端框架系列之(vue-class-component)

简介:说到函数式组件跟类组件在react官方就有提供,具体差异的话大家可以自行查阅react开发文档,下面我们看一下在react中怎么使用这两种方式定义组件:函数式组件:function Welcome (props) { return <h1>Welcome {props.name}</h1>}类组件:class Welcome extends React.Component { render() { return ( <h1>

2020-06-14 22:58:23 998

原创 前端框架系列之(装饰器Decorator)

简介:装饰器是ES2016 stage-2的一个草案,但是在babel的支持下,已被广泛使用,有点类似java里面的注解。提案地址Class and Property Decorators用法:如果我们要在我们项目中使用最新的stage-2的装饰器提案怎么做呢?Preset: babel-preset-stage-1Plugins: babel-plugin-transform-decorators, babel-plugin-transform-decorators-legacyFirst

2020-06-14 19:44:59 317

原创 js基础练习(二)

void 0;void会把后面变量都置成undefined;函数声明后面不可以跟括号,函数表达式可以所以我们经常看到比如:(function(){})();或者!function(){}();"!"跟"()"强制把函数声明变成表达式最好是加一个void,因为void符合语意,在java中表示没有返回值比如:void function(){}();...

2020-05-22 17:04:16 118

原创 js基础练习(一)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script> /** * 转十进制 * @param str 进制字符串 * @param n 目标进制

2020-05-22 17:02:25 129

原创 秒懂NPM依赖包版本号~和^的区别

你是不是也和我一样,总忘记~和^的区别?(哈哈,或者你压根就不知道?)哈哈,不瞒你们说,今天忍住没看源码只盯着semver的api看了很久(????真是的又长又丑),终于是看到它的规律了(已经懂了的大牛就略过哈)我们常见的大概有这些:~1.0.0(^1): >=1.0.0 <1.1.0 ( >=1.0.0 <2.0.0)~1.0.1(^1.0.1): >=1.0...

2020-04-16 22:34:52 271

原创 babel源码解析一

parse–>AST(解析源码为ast)if (ast) { if (ast.type === "Program") { ast = t.file(ast, [], []); } else if (ast.type !== "File") { throw new Error("AST root must be a Program or File no...

2020-01-12 21:59:28 2542

原创 js设计模式之(传输对象模式)

传输对象模式传输对象模式(Transfer Object Pattern)用于从客户端向服务器一次性传递带有多个属性的数据。传输对象也被称为数值对象。传输对象是一个具有 getter/setter 方法的简单的 POJO 类,它是可序列化的,所以它可以通过网络传输。它没有任何的行为。服务器端的业务类通常从数据库读取数据,然后填充 POJO,并把它发送到客户端或按值传递它。对于客户端,传输对象是只...

2020-01-06 17:35:35 219

原创 js设计模式之(状态模式)

状态模式在状态模式(State Pattern)中,类的行为是基于它的状态改变的。这种类型的设计模式属于行为型模式。在状态模式中,我们创建表示各种状态的对象和一个行为随着状态对象改变而改变的 context 对象。介绍意图:允许对象在内部状态发生改变时改变它的行为,对象看起来好像修改了它的类。主要解决:对象的行为依赖于它的状态(属性),并且可以根据它的状态改变而改变它的相关行为。何...

2020-01-06 17:33:24 161

原创 js设计模式之(解释器模式)

解释器模式解释器模式(Interpreter Pattern)提供了评估语言的语法或表达式的方式,它属于行为型模式。这种模式实现了一个表达式接口,该接口解释一个特定的上下文。这种模式被用在 SQL 解析.符号处理引擎等。介绍意图:给定一个语言,定义它的文法表示,并定义一个解释器,这个解释器使用该标识来解释语言中的句子。主要解决:对于一些固定文法构建一个解释句子的解释器。何时使用:如...

2020-01-06 17:28:31 201

原创 js设计模式之(命令模式)

命令模式命令模式(Command Pattern)是一种数据驱动的设计模式,它属于行为型模式。请求以命令的形式包裹在对象中,并传给调用对象。调用对象寻找可以处理该命令的合适的对象,并把该命令传给相应的对象,该对象执行命令。介绍意图:将一个请求封装成一个对象,从而使您可以用不同的请求对客户进行参数化。主要解决:在软件系统中,行为请求者与行为实现者通常是一种紧耦合的关系,但某些场合,比如需...

2020-01-06 17:25:36 297

原创 js设计模式之(桥接模式)

桥接模式桥接(Bridge)是用于把抽象化与实现化解耦,使得二者可以独立变化。这种类型的设计模式属于结构型模式,它通过提供抽象化和实现化之间的桥接结构,来实现二者的解耦。这种模式涉及到一个作为桥接的接口,使得实体类的功能独立于接口实现类。这两种类型的类可被结构化改变而互不影响。介绍意图:将抽象部分与实现部分分离,使它们都可以独立的变化。主要解决:在有多种可能会变化的情况下,用继承会造...

2020-01-06 17:22:45 268

原创 webpack源码解析二(html-webpack-plugin插件)

我们接着上一节从源码研究一下html-webpack-plugin插件,感兴趣的童鞋可以看一下我上一篇文章 webpack源码解析一文章开始先上一下源码:html-webpack-plugin源码地址,不废话,我们开车咯~~首先安装:yarn add html-webpack-plugin配置webpack.config.js: plugins: [ new HtmlPlugin(...

2019-12-17 01:55:58 1906

原创 webpack源码解析一

先上一张流程图,小伙伴可以跟着这个流程图结合代码往下走:图片来源于:细说webpack之流程篇开始git clone https://github.com/webpack/webpack.gityarnyarn setup打包node ./bin/webpack.jsbin/webpack.js//判断有没有安装webpack-cli,没有话的就提示是否需要安装con...

2019-12-13 18:19:25 677 1

ReactNative智能提示.jar(WebStorm)

ReactNative智能提示.jar(WebStorm)

2017-03-09

React Native继承Redux笔记

集成Redux笔记

2017-03-09

Android开关效果(兼容低版本)

各种开关效果,兼容低版本

2016-10-09

三种方式实现Android侧滑菜单

三种方式实现Android侧滑菜单

2016-08-21

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除