Web工程化
文章平均质量分 73
布瑞泽的童话
这个作者很懒,什么都没留下…
展开
-
写给小白的ChatGPT和AI原理
以上就是生成式AI的基本工作原理,通过深度学习算法处理大量的文本数据,从而学习语言的语法和语义规律,并能够自动生成符合语法和语义的文本。在生成文本时,生成式AI会基于上下文信息生成一个语言模型,然后利用随机采样或贪心搜索方法生成文本序列。原创 2023-06-25 19:00:00 · 25096 阅读 · 2 评论 -
基于git-bisect来快速找到bug所在提交记录
git bisect是一个用于快速找出引入bug的提交的工具。它的基本原理是使用二分法在提交历史中搜索,每次检出一个中间的提交,让用户测试是否有bug,然后根据用户的反馈缩小搜索范围,直到找到第一个有bug的提交。原创 2023-05-17 15:58:20 · 225 阅读 · 0 评论 -
远程文件下载采坑指南
Content Disposition附件头是从浏览器下载文件的最佳首选方式。它具有更好的跨浏览器兼容性,不会有任何内存限制,也不需要任何JavaScript。主流平台都是采用这个方式来进行下载(CSDN/minio等等)最好的方式是方案一,如果方案一没有条件,有存在足够技术能力的话就用方案五,自己私有化html和sw(单独短暂弹框的交互是无法解决的)。否则就退而求其次用方案二或者三来直接打开(牺牲pdf、图片等文件的下载体验,它们会直接打开)。原创 2023-02-13 16:16:42 · 792 阅读 · 0 评论 -
一文讲清大屏适配(大到四个屏幕也不怕)
政企项目少不了大屏适配的场景,如何打造完美的大屏适配解决方案呢?原创 2022-09-06 10:22:53 · 2291 阅读 · 3 评论 -
三方包依赖node版本过高,构建失败解决方案
前端生态众多,开发中会用到各种各样的三方包。但是构建平台往往是统一的node版本,如果遇到构建机node版本太低,而某些三方包语法报错、或者某些三方库有bug的情况怎么办呢?原创 2022-06-01 10:53:50 · 2466 阅读 · 2 评论 -
Mac安装不同版本git
前言Mac安装不同版本git方法,网上大多数都是brew 下载,但是这样只支持最新版的git,而有时候xcode或者操作系统版本限制,导致不能用最新版或者只想用指定版本时,就不奏效了。这里介绍下比较简单的解决方案。解决方案首先访问git-osx-installer Activity,这个网站。找到指定的版本的dmg,安装即可。通过git --version来验证是否安装成功。...原创 2022-05-13 09:47:59 · 826 阅读 · 1 评论 -
SourceTree基本使用指南
新公司的git规范对rebase的使用大大增加,之前都是merge一把刷子干的,而为了能够更好的查看git记录树,可视化工具sourcetree是不错的选择,故而整理下常见的使用方法。原创 2022-05-09 09:51:53 · 3268 阅读 · 0 评论 -
如何封装CI专用的基础镜像
前言本文将介绍基于docker、gitlab CI、k8s、rancher的构建部署生态下,如果通过封装一个基础镜像来完成对发布者的通知触达。整体思路首先需要理清表现形式,由于基于gitlab CI,所以肯定是在CI过程中的某些Job或者stage中,通过shell来发送信息给开发者。shell的封装可以通过node来提供一个cli命令行工具,发送信息的渠道可以选择邮件、微信等等具有api的通信,由于我们是网易,所以就选择popo,对应不同的任务应该发送给不同的目标,所以具体发送命令的表现形式应该如原创 2021-07-05 19:28:23 · 569 阅读 · 0 评论 -
云原生下的企业级前端构建实践
前言容器、k8s、云原生现在越来越流行,在云原生时代下的前端项目构建发布有什么变化呢?相比传统的构建部署平台,云原生有哪些区别?如果对传统构建部署平台下的企业级项目构建感兴趣,可以先看看[统一部署平台下的企业级前端构建实践]。今天这里主要讲的是基于开源轮子的云原生构建方案(docker/k8s/rancher/gitlab ci)完整流程完整流程如下图所示:1、代码托管在gitlab,借用gitlab 的ci cd;2、gitlab的ci主要负责工程自身的build打包,以及对docker镜像的原创 2021-05-18 09:48:07 · 401 阅读 · 0 评论 -
统一部署平台下的企业级前端构建实践
前言不同的公司有不同的前端资源构建发布方式,这里主要介绍下网易内部NDP平台下基于Ant构建前端企业级项目的实践。企业级的含义就是追求至高的可维护性和尽可能的降低个性化。如果你看过egg、umi、ssr、next等项目的话,应该知道对于多人团队来说,约定优于配置的重要性。传统的Ant构建传统的前端工程,NDP是基于Ant语法来构建的,Ant语法晦涩难懂,需要额外增加学习成本和心智负担。这里可以举个例子,先看看入口文件:<project> <!--property 相对与原创 2021-05-18 09:46:14 · 538 阅读 · 0 评论 -
前端全局替换图片服务cdn的解决方案
前言主要介绍下当我们的产品中依赖的某一个cdn如图片服务下线后,有哪几种方案来解决和处理这种情况。分别就手动代码层替换、全局异常监控、样式图片资源处理、nginx映射修改和serviceworker的各种方法进行对比。解决方案首先,一个cdn服务如果即将下线,我们需要把资源批量导到另一个cdn中。如果资源本身都不存在了,也没有办法解决这个问题了。手动代码替换cdn服务的图片,我们在代码中...原创 2019-10-14 14:29:42 · 2973 阅读 · 2 评论 -
serviceworker运用与实践
前言本文首先会简单介绍下前端的常见缓存方式,再引入serviceworker的概念,针对其原理和如何运用进行介绍。然后基于google推出的第三方库workbox,在产品中进行运用实践,并对其原理进行简要剖析。前端缓存简介先简单介绍一下现有的前端缓存技术方案,主要分为http缓存和浏览器缓存。http缓存http缓存都是第二次请求时开始的,这也是个老生常谈的话题了。无非也是那几个http...原创 2019-01-24 09:33:36 · 12782 阅读 · 0 评论 -
Photoshop切图
切图,顾名思义,将图片切成若干块,以供web开发使用。 原始图片如下: 直接使用切片工具简单的切图工作我们可以直接使用切图工具。比如我们需要切出左上角第二张图片。首先我们选中切片工具:shift加鼠标拖动是构建一个正方形,然后进行微调。蓝色部分就是切出来的图片,切完后存储为web所用样式即可。根据参考线切片如果是较为复杂的切图需求,建议先建立参考线。比如我们要刚才那片图片的中间四个子图片。我们首原创 2015-11-17 22:00:05 · 1203 阅读 · 1 评论 -
Grunt插件autoprefixer使用指南
在grunt安装、配置和应用中,我介绍了几种插件的使用。今天再介绍一个为兼容各大浏览器自动添加前缀的插件autoprefixer。要想使用它得先安装 Browserslist caniuse-db num2fraction 等插件,具体安装方法见上一篇文章。 该插件的github地址为:autoprefixer 环境配置好了后,gruntfile.js文件配置如下:module.exports原创 2015-11-29 18:24:39 · 4552 阅读 · 0 评论 -
Sublime2配置less2css插件教程
我们可以通过在Sublime2中集成less2css插件来完成less文件自动转换成css文件的过程。首先,我们在sublime下载中心下载:less2css插件我们需要less2css插件来将less文件保存后自动生成css文件,less插件来将less代码高亮显示。将插件放到sublime的插件文件目录中: 由于less2css**对lessc.cmd有依赖**,所以需要下载less.js原创 2015-12-04 10:42:19 · 4020 阅读 · 0 评论 -
Grunt插件jshint使用指南
简单介绍下grunt的javascript语法验证插件jshint的使用。 插件官方使用地址:jsHintGrunt的插件安装过程看这篇文章:grunt安装 package.js配置如下:{ "name":"jshint-study", "version":"0.1.0", "author":"刘放", "private":true, "devDepend原创 2015-12-06 21:15:00 · 2477 阅读 · 0 评论 -
git入门教程
本文介绍linux下git的基本命令行操作,windows平台类似。git是一个版本控制系统,和svn不同,它是分布式的,也就是说每一台主机上都有完整的代码。git还有着功能强大的分支系统,这个后面会详细讲到。这里不详细讲解理论知识,主要偏重于应用实验。如果未安装git,请自己先行安装。创建版本库首先选择一个合适的地方,创建空目录:使用git init命令将这个目录变成git可以管理的仓库:我们编写原创 2015-12-08 09:55:13 · 1897 阅读 · 2 评论 -
Webpack打包React报错Unexcepted token <
其根本原因在于我们使用大于6.0版本的babel时没有正确下载完全。babel升级后拆分了模块 。你需要 npm install babel-loader babel-core babel-preset-es2015 babel-preset-react —save-dev然后 在webpack.config.js中配置:loader: "babel?presets[]=react,presets[原创 2016-02-03 22:18:49 · 3158 阅读 · 0 评论 -
Fiddler+willow使用指南
Fiddler是一个网络抓包工具,willow是一个Fiddler的插件,提供重定向和host主机等功能。安装Fiddler的安装包地址:fillder+willow解压后安装fiddler4和willow1.4.*版本。 安装成功后,启动fiddler后会出现willow插件按钮: 说明安装成功。重定向willow重定向进入willow界面后,通过右键->Add Project ->Add R原创 2015-12-13 19:12:56 · 19481 阅读 · 5 评论 -
Ant之build.xml配置详解
前言国内关于build.xml的配置资料太零散了,实在是受不了,故而将自己的笔记整理成博文,方便大家查阅和理解。build.xml配置参数构建文件默认叫build.xml,其有很多配置参数。project每个构建文件都有一个project标签,有以下属性: - default:表示默认的运行目标,这个属性是必须的。 - basedir:表示项目的基准目录。 - name:表示项目名。原创 2017-06-01 10:05:48 · 59676 阅读 · 4 评论 -
charles的一些用法整理
前言charles是常用的抓包工具,这里整理一下自己在使用过程中的一些经验。 首先说明,我使用的是mac端的3.11.2版本的charles。抓取Https如果不设置,默认抓取https的页面,返回值是乱码的。 1.首先下载证书 Help SSL Proxying Install Charles Root Certificate 2.信任改证书 证书下载后,会出现在系统的钥原创 2017-09-03 13:16:05 · 4254 阅读 · 0 评论 -
Grunt安装、配置及应用
Grunt是前端自动化工具,其作用就是将压缩、单元检测、编译等重复性操作自动化完成。只要配置好配置文件,任务机就可以自动完成项目中的重复性任务。现在主流的工具有Grunt和Gulp,还有国内百度开源的一个FIS。Gulp比Grunt用起来更加方便,而FIS本身集成了很多东西,比较容易上手。但是我们还是以Grunt作为起点来认识前端自动化吧。安装需要安装Grunt,首先需要安装node。 node安原创 2015-10-13 17:43:07 · 4339 阅读 · 0 评论