简介:本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。

阅读全文 »

背景

  • 痛点: 项目的代码写得太乱了,风格不统一。团队成员的编辑器格式化设置也不一样,经常在提交记录出现大量的格式化代码风格修改,影响日志追溯。
  • 动机:npm script(prettier)似乎不起作用,虽然有 git hooks,项目也没有安装 eslint,也缺少 stylelint。
  • 预期:团队统一代码风格,统一设置好编辑器,安装必要的编辑器插件,尽量用工具去自动整理代码
  • 原则:让工具去管理规范,配置好相应的工具就行,让开发者少操心格式问题,把精力多放点在代码的实现
  • 结果:预期想法基本满足。
阅读全文 »

前言

如今主流开发模式前后端分离已是普遍的开发模式,相对于传统的前后端耦合,前后端各拥有自己的一套开发环境。开发完成后,又一起部署到是测试/线上环境。

因为后端的API服务并不部署在前端的开发环境上,所以在开发时,经常会遇到需要跨域的场景;即便是部署到测试/线上环境,也不一定是部署到同一台服务器(单体、集群式服务)。

内容:介绍跨域、同源策略的基本概念;收跨域影响的场景;常用的跨域方案、代理;反向代理、正向代理;开发、线上环境配置代理。

阅读全文 »

前言

浏览器中引用图片是一种很常见的情况,使用方式的不同,他们的意义也不同。比如————作为“内容主体”、“背景”、“图标”等,而设计师有时候也会提供不同的格式图片(img/png/svg/)。在不同的场景,我们对同一份图片素材,要根据图片在web界面中的意义合理运用。个人会列举浏览器常用使用图片的方式。

  • img
  • background-image
  • icon-font
  • svg
  • webpack 与 img
  • base64
阅读全文 »

这是一次资料整理,关于vue的生态圈。包括工具、插件,这里不按照库的类型分类。

思维导图体现的是这些库由什么原理实现,或者说深入了解库会接触到的一些关键点。

官方也整理了生态圈,不过修改记录是两年前。

阅读全文 »

前言

官方文档介绍的渲染函数似乎有点太过偏重表现而放轻原因。已经看过这部分好几次,还是有点不知所以然。这也不是第一次看不明白文档的介绍了,还是需要自己整理下知识点。所以,这里的内容是对文档做降级处理,好让这一块知识点更容易理解一点。文档有的东西,这里不会再重复。

建议阅读顺序:先粗略浏览下官方文档;精读这篇文章同时结合文档。

阅读全文 »

简介

部分重要概念。

  • HEAD
  • Working Directory / Repository / Stage
  • branch
  • remote
  • tag
  • repo
阅读全文 »
0%