- 博客(185)
- 资源 (4)
- 问答 (3)
- 收藏
- 关注
RSS订阅
转载 来和 webpack 谈场恋爱吧
Webpack 是实现前端工程化的一个重要工具。本课程由浅及深，逐步掌握基础知识并具有实战开发能力。幽默风趣的课堂氛围，带给你的都是最前沿的前端技术，进阶前端开发。你将学到的webpack 简介webpack 基础用法webpack 流程图webpack 源码解析webpack 扩展插件企业级项目实战课程介绍webpack 是实现前端工程化的一个重要工具，一些公司甚至会设置一个叫 webpack 工程师的角色，可见 webpack 在前端开发中起到了一个很重要的作用。本次课程将包
2020-10-09 16:51:59
1335
原创 babel从入门到精通
前言前面我们写了几篇很长的文章去介绍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
2347
1
原创 Webpack node、output.jsonpFunction 配置详解
不得不说，webpack5 修复了很多之前留下的坑，配置变得更简单了，如果可以的话，建议升级一下项目的 webpack 版本，可以带来很多性能的优化和避免一些程序异常的发生。希望以上的分享能够给你带来一些小小的帮助。
2023-08-17 01:08:53
2566
原创 微前端 qiankun@2.10.5 源码分析（二）
整个源码分析下来我们会发现，要写出这么牛逼的框架，除了需要很扎实的 js 基础外，还需要有很强的架构意识，真的由衷佩服作者大大，请收下我的膝盖！！！下一个wujie见！！！
2023-05-05 20:58:39
1570
1
原创 微前端 qiankun@2.10.5 源码分析（一）
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。微前端架构具备以下几个核心价值：技术栈无关主框架不限制接入应用的技术栈，微应用具备完全自主权独立开发、独立部署微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新增量升级在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略独立运行时每个微应用之间状态隔离，运行时状态不共享。
2023-05-05 20:55:44
1292
原创 css-loader 我真记住你了！
css-loader 我真记住你了！问题描述准备自己搭一套前端框架，一路都很顺，当遇到 css-loader@6.2.0 去加载样式文件的时候，打包出来之后出现了一些莫名巧妙的文件（我是准备去修改 element-ui 库的主题样式的）。入口文件 (element-variables.scss)：/* 改变主题色变量 */$--color-primary: #409EFF;/* 改变 icon 字体路径变量，必需 */$--font-path: '~element-ui/lib/theme-
2021-08-05 13:50:49
2838
1
原创 快来跟我一起学 React（Day8）
简介我们继续上一节的内容，开始分析 React 官网：https://reactjs.org/docs/accessibility.html 的 “高级指引” 部分，这一部分会涉及到性能优化、Portals、Render Props 等概念的分析，跟上节奏，我们一起出发吧！知识点性能优化PortalsRender Props类型检查准备我们直接用上一节中的 react-demo-day5 项目来作为我们的 Demo 项目，还没有创建的小伙伴可以直接执行以下命令 clone 一份代码：g
2021-04-02 15:44:22
2553
原创 快来跟我一起学 React（Day7）
简介我们继续上一节的内容，开始分析 React 官网：https://reactjs.org/docs/accessibility.html 的 “高级指引” 部分，这一部分会涉及到 Refs 转发、Fragments、高阶组件等概念的分析，比前面章节的难度还是略微大一些的，所以一定要跟上节奏哦，我们一起出发吧！知识点Refs 转发Fragments高阶组件深入 JSX准备我们直接用上一节中的 react-demo-day5 项目来作为我们的 Demo 项目，还没有创建的小伙伴可以直接执
2021-03-30 11:25:27
2399
原创 学了 Vue 还需要学 React 吗？
最近在重学 React，很多小伙伴发出 “学完 Vue 还需要学 React？” 这样的疑问，下面我们就来探讨一下这个问题。首先不管是 React 还是 Vue，当然，还有 Angular 等其它的前端框架，它们都是很优秀的前端框架，目的就是为了让你能够高效、快速地开发一个前端项目，贴一张截止目前为止 React 跟 Vue 在 GitHub 上的 star 排行：可以看到，光从 star 人数来讲，Vue 还是领先于 React 的，当然，我们也不能只看 star 人数，就说 React 不如 Vu
2021-03-26 17:23:21
2712
2
原创 快来跟我一起学 React（Day6）
简介我们继续上一节的内容，开始分析 React 官网：https://reactjs.org/docs/accessibility.html 的 “高级指引” 部分，这一部分会涉及到异步组件、全局上下文对象、错误边界组件等概念的分析，比前面章节的难度还是略微大一些的，所以一定要跟上节奏哦，我们一起出发吧！知识点代码分割异步组件全局上下文对象 Context错误边界组件准备我们直接用上一节中的 react-demo-day5 项目来作为我们的 Demo 项目，还没有创建的小伙伴可以直接执行
2021-03-25 21:13:44
280
原创 快来跟我一起学 React（Day5）
简介上一节我们完成了从 0 开始搭建一个企业级 React 项目的全部内容，项目是有了，但是我们一直都没有近距离接触过 React，所以接下来我们就快速撸一遍 React 官方文档内容，弄清楚一些概念性的东西，为后面的源码分析章节做铺垫。知识点项目搭建核心概念高级指引API 指引hook 指引后面这几节都比较轻松，因为我们基本上把 React 官网：https://reactjs.org/ 的内容跑一遍。让我们开始吧！项目搭建我们直接 clone 一个前面我们搭建的基础项目，然后取
2021-03-22 21:24:50
319
1
原创 快来跟我一起学 React（Day4）
简介上一节我们从 0 开始搭建了一个项目，完成了入口与出口的配置、ts 语法支持、react 基本库的安装、css 样式配置等工作，我们继续上一节的内容。知识点Eslint（代码质量校验）eslint-webpack-plugin（Eslint webpack 插件）eslint-config-react-app（React 官方 eslint 配置）fork-ts-checker-webpack-plugin（ts 语法校验插件）Optimization（分包优化等）准备上一节所有的
2021-03-20 12:33:19
517
原创 快来跟我一起学 React（Day3）
简介上一节我们介绍了 React 官方提供的脚手架（create-react-app），然后用官方脚手架创建了一个 react-demo1 项目，用脚手架创建出来的项目算是 React 官方认为的最佳项目实践了，但是从上一节使用中我们可以看出，官方脚手架可还是有一些弊端，它只提供一些可改的 webpack 配置，如果你想自己添加一个 loader、plugin 什么的，你可能就需自定义 webpack 配置了，就不能在依赖脚手架了，既然是重新学习 React，我们就来挑战一下自己，从 0 开始搭建一个企业
2021-03-19 17:47:40
242
原创 快来跟我一起学 React（Day2）
简介继续我们的 React 的学习，上一节我们介绍了什么是 JSX 语法，并且从 Babel 源码角度分析了 JSX 语法的转换过程，最后我们还用 CDN 的形式搭建了一个简单的 React 项目，这一节我们研究一下 React 官方提供的脚手架create-react-app。知识点React 官方脚手架（create-react-app）react-scriptsreact 项目中的 webpack 配置start 命令build 命令安装 React小伙伴可以先看一下官网的描述：
2021-03-18 19:24:13
374
原创 快来跟我一起学 React（Day1）
简介因为目前公司的技术栈都是 Vue，之前有在 React-Native 的项目中接触过 React，但并没有深入的去了解过， 从现在开始，我就把自己当成一个 React 小白了，决定挑战一下自己，从 0 开始入手 React，中间会不断的跟 Vue 进行对比，跟紧节奏，我们一起出发吧。知识点React 简介JSX 简介Babel 语法转换@babel/preset-react@vue/babel-preset-jsxHello ReactReact 是什么？我就不解释什么是 Rea
2021-03-17 17:11:39
323
原创 一文彻底弄懂 “CommonJs” 与 “EsModule” 区别
一文彻底弄懂 “CommonJs” 与 “EsModule” 区别简介文章中就不具体解释什么是 “CommonJs” 与 “EsModule” 了，我们先简单的描述一下 “CommonJs” 与 “EsModule” 的区别。它们有三个重大差异。CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。CommonJS 模块的require()是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的
2021-03-13 17:02:07
2749
1
原创 大厂前端必备技能 （Vue3），还不会你就要 OUT 啦！！！
抢先了解前沿技术栈，掌握前端必须框架 Vue 3，本课程将带你从源码的角度一探究竟。全程干货满满，让你在掌握 Vue 3 源码后具有实战开发能力，轻松搞定开发任务与面试。从官方宣布 Vue3 开发就开始关注，一直到 2020 年 9 月 18 日正式版发布才去深入了解它，这一次的版本简直就是 “颠覆” 来形容，总结下来就是：“更快”、“类型更友好”、“更小”、“更好的警告信息”、“更好的 API 特性”，官方还称在 2020 年底之前对所有文档链接、分支和资源包标签的默认值转换为 3，当然， Vue 2
2021-02-26 12:57:37
428
原创 Webpack5 踩坑之（html-webpack-plugin）
2021 开工第一天就给我个大大的惊喜。ERROR in Error: The loader "/home/project/vue3-demo/node_modules/html-webpack-plugin/lib/loader.js!/home/project/vue3-demo/public/index.html" didn't return html. - index.js:339 HtmlWebpackPlugin.evaluateCompilationResult [vu
2021-02-18 13:40:55
17587
9
原创 闲聊Vue3.0及2020年终总结
前言最近经常有小伙伴问我一些关于 Vue3.0 的问题，有些甚至恐慌 Vue3.0 发布后自己不会咋办？会不会以后就要失业了呢？当一些新技术的出现，总有些人会对自己不自信，当然，你问我怕不怕？说实话，我是一点都不慌的，别人写出来的东西你去用你还怕啥？无非就是你自己在怀疑你自己能力罢了，年轻人怕啥？干就完了！不过既然有小伙伴问到了 Vue3.0，我还是花了点时间去研究了一下，下面就聊一下当我遇到新技术的时候我是怎么做的。准备工作首先我简单的浏览了一下 Vue3.0 的 官网，然后重点浏览了一下跟 Vue
2020-12-22 22:48:13
1157
原创 Vue 中 keep-alive 组件与 router-view 组件的那点事
最近项目中有小伙伴找到我，问我“为啥他写的页面第一次进去可以触发 onCreate 函数，第二次再进的时候就不触发了呢？”（因为我们项目是一个大型的项目，每个开发可能只接触到自己开发的一小部分），然后我就说你可以试着在 activated 钩子函数中做处理，然后他又接着问我“activated 钩子函数又是怎么调用的呢？”，ok！这小子是问上瘾了，我们下面就来详细解析一下。keep-alive<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <tra
2020-12-01 13:01:27
3725
原创 如何让 Vue 项目快速支持 TypeScript 语法?
简介JavaScript 作为一种弱类型的语言，类型推断只能提供很有限的支持，TypeScript 提供了一种描述对象形状的方法。可以帮助提供更好的文档，还可以验证你的代码可以正常工作，在一些大型的项目中，使用 TypeScript 非常必要，从代码层次就已经避免了很多错误，而且方便文档的书写，最主要的就是后期迭代特别爽，但是对于没有接触过强类型语言（Java、C）的童鞋来说，TypeScript 上手还是有点困难了，单就目前前端发展趋势来说，TypeScript 还是很重要的，想了解更多 TypeScr
2020-11-12 20:43:22
1717
原创 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
6766
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
28157
6
原创 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
5904
2
原创 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
3075
1
原创 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
926
原创 手把手带你撸一遍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
3247
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
3055
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
1759
1
原创 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
3931
1
原创 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
3639
原创 webpack源码解析五
前言我们继续前面的内容，把webpack剩下的配置项撸一遍，推荐大家先看一下前面的文章：webpack源码解析一webpack源码解析二（html-webpack-plugin插件）webpack源码解析三webpack源码解析四配置devtool此选项控制是否生成，以及如何生成 source map。什么是Source map？简单说，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置（source map更多的介绍跟
2020-07-12 18:41:43
1764
原创 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
1602
原创 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
2562
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
2405
1
原创 babel源码解析之（@babel/preset-env）
前言还记得之前写过一篇文章:babel源码解析一,里面把babel的整个流程跑了一遍，最后还自定义了一个插件用来转换“尖头函数”，通过前面的源码解析我们知道，preset其实就是一些插件的集合，这一节我们来介绍一个babel中比较重要的preset“@babel/preset-env”，可能有些小伙伴已经用过了，没用过的话至少也应该见过，废话不多说，我们直接盘它。开始我们从项目创建开始，首先我们创建一个叫babel-demo的项目用来测试babel，然后执行npm初始化npm init 然后我们
2020-06-30 23:11:38
5060
2
原创 前端框架系列之（eslint自定义插件）
开始前面已经写了两篇关于eslint的文章了，想必都对eslint应该有一个简单的认识了，在平常的项目中使用应该是问题不大，面试应该也是问题不大的，大家有兴趣可以看看前面两篇文章：前端框架系列之（eslint入门）前端框架系列之（eslint源码解析）接下来我们更深入的了解一下eslint，我们直接结合demo创建一个我们自己的plugin。我们还是用前面我们的eslint-demo项目，代码已经上传github了大家可以直接clone一份,我们在eslint-demo项目根目录直接创建一个p
2020-06-24 18:10:32
1622
原创 前端框架系列之（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
1633
原创 前端框架系列之（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
1821
原创 前端框架系列之（mvvm）
简介前面我们介绍过了mvc 前端框架系列之（mvc），mvp 前端框架系列之（mvp）,MVP中我们说过随着业务逻辑的增加，UI的改变多的情况下，会有非常多的跟UI相关的case，这样就会造成View的接口会很庞大。而MVVM就解决了这个问题，通过双向绑定的机制，实现数据和UI内容，只要想改其中一方，另一方都能够及时更新的一种设计理念，这样就省去了很多在View层中写很多case的情况，只需要改变数据就行。Model（模型）表示应用程序核心（比如数据库记录列表）。View（视图）显示数据（数据库记录
2020-06-16 21:49:27
900
android连接wifi（比如cmcc）的时候，怎么才能让它不自动打开认证界面？？？
2015-08-03
大神门，连接wifi（比如cmcc）的时候，怎么才能让它不自动打开认证界面？？？
2015-08-03
大神门，连接wifi（比如cmcc）的时候，怎么才能让它不自动打开认证界面？？？
2015-08-03
TA创建的收藏夹 TA关注的收藏夹
TA关注的人