前端每周清单第48期：SlackWebpack构建优化，CSS定名范例与用户追踪，Vue.js单元测试

前端每周清单专注前端范畴内容，以对外文材料的汇集为主，协助开辟者相识一周前端热门；分为新闻热门、开辟教程、工程实践、深度浏览、开源项目、顶峰人生等栏目。迎接关注【前端之巅】微信民众号（ID: frontshow），及时猎取前端每周清单。

新闻热门

国内外洋，前端最新动态

• ECharts 4.0 宣布: 2018 年 1 月 16 日，百度的 ECharts 团队对产物举行了更新，宣布了时隔两年的大版本 4.0。在 ECharts 4.0 新版本中，主要在机能功用、易用性及扩大运用范围三个大的方面举行了八项晋级：带给用户更壮大的机能和功用，让开辟者运用 ECharts 变得越发轻松，让更多的人在更多的场景都能接见运用 ECharts 制造的可视化产物。
• Puppeteer 1.0 宣布: Puppeteer 是由 Google Chrome 团队开源的，Headless Chrome 操纵接口库，已成为事实上的 Headless 浏览器操纵范例。本周 Puppeteer 1.0 正式宣布，为我们带来了 Chromium 65，page.coverage API，page.pdf() 支撑自定义头部与脚部，XPath 支撑加强，target.createCDPSession() 兼容原生协定等特征变化。
• jQuery 3.3.0 宣布: jQuery 仍然是许多 Web 开辟事情中不可或缺的部份，自上次 jQuery 大版本更新以来，其中心团队更多地着眼于应当移除什么部份，而不是增加新的功用特征，来保证 jQuery 的玲珑易用性。该版本中移除了部份过期的 API，而且为 .addClass(), .removeClass(), 以及 .toggleClass() 这几个函数支撑输入某个款式类名数组作为参数。
• Angular 5.2 宣布: Angular 5.2 宣布，其可以直接替换之前的 5.1 版本，包含了部份毛病修复与机能提拔。新版本中，优化了关于模板的范例搜检，增加了关于 TypeScript 2.6 的支撑，优化了 Router 参数与数据继续。

开辟教程

稳扎稳打，控制基本妙技

• 无缝为 create-react-app 项目增加 SSR + 代码支解特征: create-react-app 是异常不错的原型化东西，可以疾速搭建 React 基本运用。本文等于引见在无需弹出设置的状况下，为 create-react-app 建立的项目增加效劳端衬着与代码支解异步加载的特征；本文顺次引见了效劳端衬着、基于 react-loadable 的代码支解、效劳端代码支解、应用 Webpack 的 chunkNames 特征等内容。更多 React 进修参考 React 与前端工程化实践。
• Vue Devtools 4.0 新特征引见: 日前 Vue Devtools 宣布了 4.0 大版本更新，引入了一系列的新特征与提拔，本文等于对这些变化举行深切解读。本文引见的新特征包含了组件数据可编辑、在外部编辑器中翻开组件、展现原始组件名、优化组件检察体式格局、依据组件过滤事宜、可伸缩的检察器等；更多 Vue.js 进修材料参考 Vue Reference。
• CSS 定名范例，加快你的代码调试: 保护大型的 CSS 代码库并非易事，迥殊是那些随便涣散未经构造的 CSS 代码极易变成一团乱麻；本文则深切浅出地引见了 CSS 定名范例，来协助开辟者编写优良的代码。本文起首议论了连字符与 camelCase，然后引见了 BEM 的寄义与用法，末了议论了怎样设置适宜的 JS 操纵类；更多 CSS 进修材料参考 Web 开辟基本与工程实践。
• 纯 CSS 的网页追踪计划: 我们经常会从用户接见的网页中，收集某些用户相干的偏好数据，比如他们关于某些链接的点击状况等等。本文则是提出了一种不运用 JS，地道依赖于 CSS 来举行网页追踪与剖析的计划，其依赖于用户点击某个链接或许悬停在某个元素以后，浏览器增加的默许款式类；该计划现在可以用于收集用户的接见与检察状况，更多 CSS 进修材料参考 Web 开辟基本与工程实践。

工程实践

驻足实践，提示实际水平

• 菜鸟收集前端全栈化之路: WEB 前端开辟在开辟体系内里是一个迥殊的群体，阿里初期给前端的定义是“D2”，D2 的寄义是：developer & designer。这么一个定位就直接致使了基本教育阶段的人才是空缺的，也致使了前端优秀人才迥殊少，雇用难的题目，随之带来的题目往往会成为全部研发链路的瓶颈。别的近几年跟着无线的疾速生长，前端在 PC 传统流域的上风逐步在损失，而无线端跟着无线动态化手艺的生长，web 前端又再次遭到生长空间的挤压。在如许的状况下前端这个岗亭实在须要一些比较大的打破和转变。而 web 前端传统代价的中台化和新范畴的拓展变的尤为重要。本日我要分享的就是菜鸟是怎样实行前端手艺中台化和推进开辟全栈的一些履历。
• 来自 Slack 的 Webpack 构建机能优化: Webpack 已然是主流的前端打包东西之一，不过其繁华的第三方插件生态反而会使得，优化 Webpack 的构建机能成为了一件不容易的事变。本文等于来自 Slack 的工程师，分享的他们在重构全部前端过程当中积累的，怎样优化 Webpack 构建机能的履历；本文主要从权衡而且剖析构建耗时的构成、并行化构建流程、削减构建事情、运用缓存、优化硬件等几个方面。更多 Webpack 进修材料参考 Webpack Reference。
• 编写 Vue.js 单元测试时须要躲避的五个圈套: 单元测试是运用开辟中不可或缺的部份，本文作者会循规蹈矩地，以详细的例子来引见一样平常开辟中会用到的 Vue.js 单元测试的例子。作者愿望在本文中讲清晰怎样测试、应当测试哪些，并提示开辟者注重防止五个坑：比及末了再测试，测试了不适当的内容，搞混了 Test Doubles，构造过分耦合，过分寻求测试覆蓋率等；更多 Vue.js 进修材料参考 Vue Reference。

深度浏览

深度思索，升华开辟伶俐

• 明白 React 源代码: React 为我们供应了直接易用的，以状况为中心的前端运用开辟体式格局，本系列文章则着眼于剖析 React 内部事情道理。顺次议论了 React 中简朴组件、类组件等衬着流程；更多 React 进修参考 React 与前端工程化实践。
• Node.js 内建模块加载机制: 本系列文章着眼于剖析 Node.js 内部道理，首篇文章议论了 Node.js 的主历程是怎样启动的。接下来作者又剖析了在主历程初始化过程当中，是怎样加载内建模块的，然后还深度剖析了 os 包的完成；更多 Node.js 进修参考深切浅出 Node.js 全栈架构。
• 未曾相识的 JS 特征: 本文作者在通读了 MDN 文档以后，惊奇地发现了许多他未曾相识的 JS 特征与 API；本文等于作者的读后总结分享，JS 也是学无止境啊。作者在本文中引见了 Label Statements，void 操纵符，Comma 操纵符，with 前提操纵符，国际化 API，管道操纵符，setTimeout 参数等等；更多 Javascript 进修参阅当代 Javascript 开辟基本。

开源项目

乐于分享，共推前端生长

• After.js: After.js 是类似于 Next.js 的 React 效劳端衬着框架，不过其是由了 React Router 作为路由体系，而不像 Next.js 那样自建路由体系。After.js 一样践行了组件即路由的理念，支撑基于路由的代码支解、基于路由的变更、剖析、数据加载、数据预加载等。
• dialog-polyfill: 上周的清单中我们引见过 HTML 5.2 中引入的 dialog 标签，dialog-polyfill 则是由 Google 开源的，dialog 的适配库。差别于第三方组件或许框架供应的弹窗功用，原生的 dialog 标签更加简朴易用，而且其可接见性也更好，浏览器也可以针对该标签举行优化。
• JARVIS: J.A.R.V.I.S. (Just A Rather Very Intelligent System) 是 Webpack 及时监控东西，其可以将开辟环境或临盆环境下的 Webpack 构建信息及时展现到浏览器中。JARVIS 自创了 Webpack Dashboard 等盛行的 Webpack 监控东西，然后供应了可优化的 ES Harmony 模块统计、将资本支解为差别的种别等扩大功用。
• 1Backend: 1Backend 是自布置的 Serverless 平台，其设想目的是简化 Lambda 函数与微效劳的布置、运转、保护流程。1Backend 使得开辟者可以疾速开辟效劳，其支撑 Go，Javascript，TypeScript，MySQL 等罕见的手艺栈。
• Prisma: Prisma 可以将数据库转化为 GraphQL API；其许可用户自定义数据模型，然后疾速地转化为可用的 GraphQL 效劳器。Prisma GraphQL API 供应了壮大的数据笼统与构建块，来辅佐开辟天真可扩大的 GraphQL 效劳端，包含了范例平安的 API，声明式 DSL 的数据模型、及时接口、与盛行前端框架无缝兼容等。

顶峰人生

• 对话 AI 专家嘹亮劼：此次，我们全方位聊聊人工智能: 嘹亮劼，极客时候《AI 手艺内参》专栏作者，电子商务平台 Etsy 数据科学主管，前雅虎研究院高等研发司理。历久处置机械进修与人工智能的基本以及运用研究，积累了雄厚的学术研究和产业实践履历，对引荐体系、搜索引擎、盘算广告学、交际收集以及自然语言处置惩罚等范畴有异常深切的明白。本文从人工智能的落地、看法、人才培养与雇用、进修等几个角度来聊聊人工智能。

前端之巅

「前端之巅」是 InfoQ 旗下关注前端手艺的垂直社群，到场前端之巅进修群请关注「前端之巅」民众号后复兴 “ 加群 ”。投稿请发邮件到 editors@cn.infoq.com，说明 “ 前端之巅投稿 ”。