NutUI CLI源码解析

作者:前端开发部——朱志达 前言 NodeJs的出现,让前端工程化的理念不断深入。先是带来了Gulp、Webpack等强大的构建工具,随后又出现了vue-cli和create-react-app等完善的脚手架,提供了完整的项目架构,让我们可以更多的关注业务,而不必在项目基础设施上花费大量时间。 但是,这些现成的脚手架未必就能满足我们的业务需求,也未必是最佳实践,相信每个大公司都有定制开发的的脚手架,今天我们来读一下京东 NutUI 组件库中的内置脚手架 NutUI-CLI NutUI CLI 简介 NutUI-CLI 是一个 Vue 组件库构建工具,通过它可以搭建一套 Vue 组件库 功能 dev 本地调试运行官网和Demo示例 add 快速创建符合NutUI的标准组件 build 构建组件库,生成可用于生产环境的组件代码 build-site 构建组件库官网+Demo示例网站 … 为了让大家快速的了解内部逻辑,我梳理了一个脑图供大家参考 NutUI-CLI 源码地址 https://github.com/jdf2e/nutui/tree/v3-alpha/lib/plugin/cli 具体程序流程顺序可分为 入口命令脚本接受/分发器 > 命令接收器 > 编译逻辑处理 > webpack配置 1. 入口命令脚本接受/分发器 CLI 在 NutUI 中是如何被调用起来的 相信大家对下面 @vue/cli 脚手架的命令并不陌生

NutUI 中使用方式也是如此

我们可以看到 vue/cli执行的实际命令是 […]

NutUI 3.0 中单元测试的探索和实践

作者:宋成林 众所周知,单元测试功能,是组件库开发中必不可少的一部分,负责进行检查和验证,保证了组件的合理性和规范性。本文主要讲的就是单元测试在 NUTUI 组件库 中的探索实践,我们将从如何编写单元测试、持续集成服务、Coveralls 自动测试代码覆盖率三方面进行阐述。如图所示: 如果你对这些内容感兴趣,就和我一起来看一下吧! 单元测试配置 在进入单元测试配置正文之前,我们先来了解下面两个问题。 – 单元测试是什么? – 为什么需要单元测试? 单元测试是什么? 单元测试(unit testing),可以对软件中的最小可测试单元进行检查和验证,是软件开发中重要的一部分。它使得添加新功能和追踪问题更加容易。 为什么需要单元测试? 单元测试在开发的时候很有用,即能帮助开发者思考如何设计一个组件,也能够重构一个现有组件。每次代码发生变化的时候它们都会被运行。有了单元测试,我们可以自信的交付自己的代码,而没有任何的后顾之忧。 组件的单元测试有以下等优点: * 提供描述组件行为的文档 * 减少调试时间,节省手动测试的时间 * 减少研发新特性时产生的 bug,测出功能的隐藏 bug * 减少和快速定位 bug * 促进重构,保证代码重构的安全性 如何编写单元测试? 我们既是单元测试的受益者,同时也是开发者,接下来我们进入正题,来聊一聊,如何在 vue 组件库中,加入单元测试。 单元测试用到的工具大致分为三部分:测试框架、测试运行器、断言库。 测试框架 因为我们是 vue 组件库,所以使用 Vue Test Utils 作为测试框架,它是 Vue 组件单元测试的官方库,有详细的指引和自定义设置用于测试,文档清晰,容易上手。 我们将其作为开发依赖安装在项目中: npm install –save-dev @vue/test-utils 它依赖浏览器环境,可以运行在真实的浏览器或是 Node 虚拟浏览器中,因为在不同的平台上启动真实的浏览器是比较复杂的。所以我们让其运行在 […]

京东风格的移动端Vue组件库NutUI2.0来啦

NutUI 是一套来自京东用户体验设计部(JDC)前端开发部的移动端 Vue 组件库,NutUI 1.0 版本于 2018 年发布。据不完全统计,目前在京东至少有30多个 web 项目正在使用 NutUI。 经过一段时间紧锣密鼓的开发,近期,我们正式发布了 NutUI 的 2.0 版。NutUI 2.0 定位于一个京东风格的移动端精品组件库,并不是 NutUI 1.x 的简单升级版。 (扫描/长按识别二维码可以体验 NutUI 2.0 的组件示例) NutUI 官网同步进行了改版,也欢迎大家访问 https://nutui.jd.com ( PC 端)。 我们来看看 NutUI 2.0 有哪些重要的新特性。 京东APP 7.0 视觉风格 NutUI 2.0 的组件在开发时参考了京东APP 7.0 视觉规范,统一了视觉风格和动效。 如果与你需要的风格有差异,可以通过增加一个自定义 class 来调整样式。如果差异较大,可以替换掉整个组件的默认样式文件,既可达到修改样式的目的,又能减少被覆盖的冗余代码。 定制主题 NutUI 2.0 支持自定义组件库整体主题风格。通过在项目中重置一些样式变量的值,可轻而易举的实现组件换肤。 按需加载 NutUI 1.x 的按需加载是通过自定义构建的方式来实现的,虽可满足需求,但是让用户每次都进 node_modules […]

京东PLUS会员项目前端性能优化实践

作者:Frans 京东PLUS会员项目是国内第一个电商付费会员项目,正式开通的会员数量已破千万。我团队从2016年接手这个项目的前端开发工作,一路见证了它的高速成长,也为此贡献了自己的力量。 这个项目有几个特点: 第一,需求多。移动端使用 H5 开发,曾有人问为什么不用原生或者 RN 开发? 我觉得吧,以这个项目的需求数量和迭代速度来看,连 H5 都难以 hold 的住,还是不要奢望原生和 RN 了。 第二,产品经理多。一般的项目对接一两个产品经理,这个项目我们需要对接一个异地的产品经理“团队”;一般的项目换产品经理一个一个的换,这个项目一批一批的换……我们已经送走好几届PLUS会员产品经理了。铁打的研发,流水的产品经理。 所以说,PLUS会员项目是业务方滴,也是项目经理滴,还是产品经理滴,但终归是俺们研发滴。每念及此,我的耳边总会响起叶倩文的那首老歌:“天地悠悠,过客匆匆,潮起又潮落…”。 书归正传。用户众多和需求迭代频繁,确保线上安全稳定始终是第一要务。所以在架构调整和性能优化方面我们一直都小心翼翼,以一些小修小补为主,只有到大规模改版的时候才会有大的升级改造。不过,平时我们对这些问题的思考和实践却不曾停止过,我们验证了一些行之有效的优化方案,在下一波改版中将会得到应用。 我虽然不完全认同“前端开发每十八个月难度翻一倍”的说法,但这一行发展迭代速度快却是不争的事实。若等到这些优化方案全都应用上再出来念叨,可能就显得不那么新鲜了。所以,我决定先把这些方案拿出来分享,和感兴趣的小伙伴一起讨论,进一步完善。 这些方案主要针对移动端,优化核心方向是提高首页的加载速度,特别是首屏和弱网络环境下的加载速度。从持久化缓存、削减代码量、优化接口请求、提升主观感受等方面下手,比较大的改动是应用 PWA 和升级架构。 PWA 离线缓存可以极大的提升用户体验,不过它对于首次加载速度并无提升作用,还得靠其他优化手段,这是一套组合拳。我们先从架构升级说起吧。 架构升级 项目计划迁移到 Gaea4.0 脚手架[1],这是我们团队基于 webpack 4 开发的一套通用 Vue 单页面应用脚手架,此前的系列版本已经过数十个项目的验证,还是比较稳定的。近期新推出4.0版相较之前版本有着不小的改进。 webpack 升级到了 4.0 Babel 升级到了 7.0 Vue-loader 升级到了 15 重构了上传插件,一键上传到测试服务器更快更稳定 针对我厂手机和电脑位于不同局域网无法互访的问题,集成了自主研发的 Carefree 解决方案[2],方便真机测试调试 集成了 NutUI 组件库[3],可按需加载需要的UI组件 集成了自主研发的基于swagger的数据mock工具SMOCK[4] 支持自动生成骨架屏[5] 支持 PWA … 迁移有几个主要目的: […]

体现工匠精神的Resource Hints

作者:杨磊 背景 八卦图代表了古代算法数术的结晶,主要是为了提供一种预测人类行为的方法论,这种能提前预测的行为古往今来都备受人们追捧,既然预测这个行为那么受欢迎,互联网行业是不是也进行了这方面的技术储备呢?没错互联网行业也已经存在此功能了。 自从互联网兴起之后,网站也越来越漂亮,越来越大,性能就是大家一致追求的方向,大家也都想预测用户下一步行为。从浏览器厂商到各个开发者都想通过各种方式来提升用户的体验,所以提前知道用户的下一步行为,预先加载用户下一个页面的资源就是开发者要追求的下一个技术方向。之前大家都比较习惯使用 JS 来动态控制页面内容,殊不知我们还有一些更好的方案来替换这些方法。 我们这么搞? 简单粗暴的可以直接页签最下端引用加载; 高级一点:我可以在执行的 JS 代码来进行 load 加载; 更高级的替换方案是什么呢? 听小道消息说谷歌这么搞! 当你在谷歌浏览器输入域名一部分时会根据记录提示补全,如下图所示: 你知道吗?这个时候谷歌已经对你有意向访问的域名搞事情了。 因为此阶段,实际上谷歌已经大概知道你即将访问哪个页面,此时浏览器会根据捕获的页面 URL 进行提前操作,如提前解析 DNS,提前加载部分资源等事。具体能预先处理到何种程度,这个我还真的没有实际监控到太确切的数据,把它当成小道消息吧。 这种预先处理页面的方式,不只是开发的程序猿与攻城狮们,浏览器厂商也在想办法去推动这个行为的”合法化“,也就是进入 W3C 的标准,当然路途坎坷,但我们还是见到了一些效果,这个效果就是我们接下来要讲的Resource Hints。 Resource Hints 是什么? Resource Hints 实际上就是“合法化”的提供了使用浏览器原始语言来进行的一些提前预测行为的能力,W3C 也陆续增加了很多功能,主要包含如下: dns-prefetch preconnect prefetch prerender preload 根据 W3C 的记录,最早的草案是在2014年10月21日提出的,中途经过了几十个版本的迭代(好吧,我的确是一个版本一个版本的翻来看的),最新的草案是2018年1月15日发布的。W3C 也针对此进行了多次的优化,虽然现在的使用频率以及兼容性依然还不是特别的完美。 Resource Hints能做什么? 谈了这么多,那 Resource Hints 具体能干什么呢?我们来一个一个的说。 1、dns-prefetch 谈到这里,不得不先介绍一下 DNS 是一个什么东西。 DNS(Domain Name System) – […]

© 2020 JDC. All Rights Reserved.