yushare

查看 single-spa demo 1. 微前端概述 Why Not Iframe 1.1 什么是微前端 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。 微前端建构与框架无关，每个微应用都可以使用不同的框架，甚至不使用框架。 1.2 微前端的价值 增量迁移迁移是一项非常耗时且艰难的任务，比如有一个管理系统使用 JQuery 开发维护已经有... 阅读全文…

年前的最后一个礼拜，由于所负责项目的暂停版本排期，于是乎有几天的空闲的时间，就想着把项目的代码质量搞上去。背景是，半年前我开始负责这个项目的前端开发，发现当时代码质量不理想，就想着做一些事情，把之前的代码规范下，也为了后面自己开发更顺利。 代码质量-1 代码质量-2 代码质量-3 技术栈: Vue 2.6.10 Vue-Router 3.0.6 Vuex 3.1.0· @vue/cli... 阅读全文…

代码质量-1 代码质量-2 代码质量-3 技术栈: Vue 2.6.10 Vue-Router 3.0.6 Vuex 3.1.0· @vue/cli-service 4.4.4 webpack 4.0.0 本文主要介绍，如何使用 commitlint 在开发过程中规范提交 1. CommitLintcommitlint是一个可校验提交信息的工具 1.1. 安装 commitlint1... 阅读全文…

缘起node_modules很久以前，前端圈子里就流传着这么一张关于node_modules的图 node_modules困境 这就是当时的node_modules困境，当使用 npm... 阅读全文…

公司项目，因为一些特殊原因，需要兼容到 IE，最低还要兼容到 chrome 33，记录一下解决过程。 起因是在项目中引入了一个新包 crypto-js，其中的一个文件 enc-base64url.js 中的 parse 和 stringify 方法使用ES6的默认参数语法，导致低版本浏览器无法解析：12parse: function (base64Str, urlSafe=true)
... 阅读全文…

前端工程化-初识前端工程化 前端工程化-自动化构建工具gulp gulp 是一个前端自动化构建工具。他可以将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。 查看本文对应的的演示项目请点击这里 hello-gulp。 gulp的特点 简单：代码优于配置、node 最佳实践、精简的 API 集，gulp 让工作前所未有的简单。 高效：基于 node 强大的流(s... 阅读全文…

前端工程化-初识前端工程化 前端工程化-自动化构建工具gulp 在进行前端开发之前，让我们试想这样一些场景： 想使用ES6+新特性，但是兼容性有问题 想使用Less/Sass/PostCSS增强CSS的编程性，但是运行环境不能直接支持 想使用模块化的方式提高项目的可维护性，但运行环境不能直接支持 部署上线前需要 手动 压缩代码以及资源文件，部署过程需要 手动 上传代码到服务器 多人协同开... 阅读全文…

在微信小程序中使用sass，需要自己做一些相关配置，这里有一个demo，这里介绍两种常见的配置方式，亲测可用。 查看本文对应的的演示项目请点击这里 wechat-miniprogram-scss。 使用VSCode的插件进行配置(推荐) 安装 easy sass 插件 修改 settings.json 配置12345678910"easysass.formats": [ { ... 阅读全文…

说到捕获JS中错误的方法，我们首先想到的就是try/catch了，这也是我们在实际业务中最常用到的。本文我们看看如何在async/await中优雅的捕获错误。 什么是async/await async/await是ES7中提出来的新特性，他是基于Promise来使用的，常见的用法：123456789import userLogin from '../api/user/login';async... 阅读全文…

在日常的前端开发过程中，我们少不了会使用npm包。光会用是不行的，那如何发布一个自己的npm包呢？ 创建并发布一个npm package 首先在本地创建一个初始化的包： 12345# 创建一个初始的文件夹mkdir initial-package && cd initial-package# 使用默认配置初始化一个package.json文件npm init --yes 执... 阅读全文…