古兰精

2021年10月14日

浅析如何共享模块（npm发布共享、微前端、模块联邦）、如何使用Webpack5新特性-模块联邦的具体流程及其适用场景

摘要：一、如何共享模块 1、NPM 方式共享模块想象一下正常的共享模块方式，就是 NPM。正常的代码共享需要将依赖作为 Lib 安装到项目，进行 Webpack 打包构建再上线。对于项目 A 与 B，需要共享一个模块时，最常见的办法就是将该模块抽成通用依赖并分别安装在各自项目中。 2、微前端方式共享模阅读全文

posted @ 2021-10-14 15:19 古兰精阅读(2987) 评论(1) 推荐(0)

浅析了解实现微前端的3种模式（自组织Nginx路由分发、基座容器模式、模块加载模式）、webpack5 Module Federation（模块联邦）是什么、基于模块联邦实现微前端的方案学习

摘要：一、什么是微前端？微前端将微服务理念扩展到前端开发，一般来讲一个微服务架构中会有多个后端团队开发不同的业务服务，而前端通常只有一个团队，集中维护一个 SPA 单页应用，随着时间累加，前端团队维护的 SPA 会随着业务增长越来越大，变得难以维护（项目启动耗时、CI\CD 耗时等）; 微前端可以帮助我阅读全文

posted @ 2021-10-14 13:49 古兰精阅读(1229) 评论(0) 推荐(0)

2021年10月13日

浅析如何升级npm及更新npm之后报错(node:15920) ExperimentalWarning: The fs.promises API is experimental 的解决

摘要：一、vue-cli 创建项目报错我想用 vue-cli 4.5 创建一个 vue3 项目，但由于我之前的 node npm 之类的都是很早之前就安装的，所以出现了这样报错： You are using an outdated version of NPM. there may be unexpec 阅读全文

posted @ 2021-10-13 17:19 古兰精阅读(3774) 评论(0) 推荐(0)

浅析nvm介绍、安装与使用以及遇到的问题解决

摘要：一、nvm 是什么 nvm 全名 node.js version management，是一个 nodejs 的版本管理工具。通过它可以安装和切换不同版本的 nodejs，主要解决 node 各种版本存在不兼容现象。在工作中，我们可能同时在进行2个或者多个不同的项目开发，每个项目的需求不同，进而不阅读全文

posted @ 2021-10-13 15:21 古兰精阅读(8336) 评论(0) 推荐(1)

npm安装vue-cli报错internal/modules/cjs/loader.js（Error: Cannot find module 'D:\Program\nodejs\node_global\node_modules\vue-cli\bin\vue'）

摘要：一、vue-cli 安装遇到问题安装新版 vue-cli 命令：npm install -g @vue/cli，安装成功之后使用 vue -V 检查版本号，发现报错： PS D:\Program\nodejs\node_global> vue -V internal/modules/cjs/loa 阅读全文

posted @ 2021-10-13 11:55 古兰精阅读(13984) 评论(0) 推荐(0)

浅析如何升级vue-cli以及使用npm卸载包时遇到问题：npm ERR! code EEXIST（npm ERR! File exists: D:\Program\nodejs\node_global\vue-list.cmd - npm ERR! Move it away, and try again.）

摘要：我的 vue-cli 还是 2.9.6，想建个 vue3 项目但是需要 vue-cli 4.5.0 以上，因为开始升级 vue-cli 之旅。使用 npm install -g @vue/cli 升级显示成功之后，查看 vue -V 还是 2.9.6，不知道什么原因。后来查到说需要先卸载旧版本，再阅读全文

posted @ 2021-10-13 11:32 古兰精阅读(1974) 评论(0) 推荐(0)

2021年10月12日

浅析如何实现根据图片自动切换背景色功能：提取图片主题色方案探索 - CSS提取（filter: blur + transform: scale）、Color Thief 工具库提取、对象存储的智能多媒体服务提供图片处理功能

摘要：问题背景来自于这篇文章《如何搞定Banner背景自动换色的功能？》- https://mp.weixin.qq.com/s/c3lv_OjSsUl8365WepOMhw 一、CSS 提取图片主题色功能探索一种纯 CSS 实现的方案。在《小技巧！CSS 提取图片主题色功能探索 - https://w 阅读全文

posted @ 2021-10-12 15:43 古兰精阅读(1327) 评论(0) 推荐(0)

2021年10月11日

浅析Storage事件及StorageEvent对象介绍、如何使用storage事件及注意事项、storage事件的应用场景

摘要： H5 标准新增的本地存储 localStorage 已经很熟悉了，但是还有个 storage 事件监听确实比较陌生，这个事件可以通过更新 localstorage 来触发，而且当前在同一个浏览器下打开的所有同源页面都可以监听得到！下面我们就来具体了解一下：一、Storage事件介绍 1、stora 阅读全文

posted @ 2021-10-11 16:23 古兰精阅读(3408) 评论(0) 推荐(0)

2021年10月10日

浅析前端广播式通信频道Broadcast Channel是什么、通信方式、如何使用、前端跨页面通信BroadcastChannel（广播频道监听/同源）与window.postMessage（点对点/可跨域）的区别

摘要： BroadCast Channel 可以帮我们创建一个用于广播的通信频道。当所有页面都监听同一频道的消息时，其中某一个页面通过它发送的消息就会被其他所有页面收到。它的API和用法都非常简单。下面我们来简单了解一下：一、Broadcast Channel 是什么 1、首先，我们想一个问题：在前端如何阅读全文

posted @ 2021-10-10 22:58 古兰精阅读(1769) 评论(0) 推荐(0)

2021年10月9日

浅析hash特点、hashchange事件介绍及其常见应用场景（不同hash对应不同事件处理、移动端大图展示状态后退页面问题、原生轻应用头部后退问题、移动端自带返回按钮二次确认问题）

摘要：一、hash、hashchange 事件介绍 1、hash 是什么？ hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分，一般有当前页面中 href 中 # 地址触发。hash 即 URL 中 # 字符后面的部分，具有如下特点：使用浏览器访问网页时，如果网页URL中带有hash，页阅读全文

posted @ 2021-10-09 22:43 古兰精阅读(1586) 评论(0) 推荐(0)

公告