-
为什么 webpack4 默认支持 es6 语法的压缩?
在专栏课程里,有位同学提到过一个很有意思的问题:“我没装 babel,js 入口里写了个箭头函数,运行 webpack 构建命令后,也成功编译了。这是为什么?”。今天就带领大家一起去探讨下这个话题。在使用 webpack 的时候,很常见的一个构建优化手段就是缩小构建目标。比如在构建阶段只构建 src 里面的模块代码,对于 node_modules 里面所引入的三方包不进行构建操作。发现问题如果使用的是 webpack 3.x 版本,编写的构建脚本类似这样的,我们通过设置loader 里...…
-
Feflow 架构篇
Feflow是一个前端集成开发环境,最新版本是v0.14.1,托管在Github上:feflow。目前已经在NOW直播、花样直播、花样交友、手Q附近、群视频、群送礼、回音等业务广泛使用。有60+ WEB/IOS/Andriod 稳定用户,累计投入生产项目达到200+。本文将会详细介绍Feflow的技术架构和实现原理。1. 起源Feflow于2017年3月份投入开发,最初只是为了解决项目创建不智能的问题。后面逐步解决了团队的构建、规范、CI和自动化问题,最终随着功能的不断完善而成为团队基础的...…
-
基于docker搭建webpagetest服务
安装Docker Mac安装:下载 Windows安装:下载安装 WPT Agent 和 WPT ServerDocker基本环境配置好后,接下来需要安装 WPT 的包了。WPT 的软件包分为 Agent 和 Server 两个部分,对应: https://hub.docker.com/r/webpagetest/agent/ https://hub.docker.com/r/webpagetest/server/$ docker pull webpagetest/server$ ...…
-
模块化:css模块化的演进
CSS 做为 Web 技术的基石,从一开始就展示出了巨大的潜力。它的入门非常简单,你只需为元素定义好样式属性和值。然而 CSS 特性随着规范的升级越来越丰富,前端业务复杂性的增加也使得工程愈加庞大。在大型 Web 应用里面,CSS 的组织是一件复杂和凌乱的事情,你更改页面上任意一个元素的一行CSS样式都有可能影响到其他页面上的元素。由于 CSS 本身并不编程特性,因此在演变过程中出现了很多优秀的编程思想,本文会带领大家探讨 CSS 模块化的演变历程。CSS 预处理器CSS 预处理器是什...…
-
模块化:javascript模块化的演进
ES2015 在2015年6月正式发布,官方终于引入了对于模块的原生支持,如今 JS 的模块化开发非常的方便、自然,但这个新规范仅仅持续了3年。就在7年前,JS 的模块化还停留在运行时的支持;13年前,通过后端模版定义、注释定义模块依赖。对于经历过的人来说,历史的模块化方式还停留在脑海中,久久不能忘怀。为什么需要模块化模块,是为了完成某一功能所需的程序或者子程序。模块是系统中“职责单一”且“可替换”的部分。所谓的模块化就是指把系统代码分为一系列职责单一且可替换的模块。模块化开发是指如何开发...…
-
Semver(语义化版本号)扫盲
最近Github 10周年在朋友圈里沸沸扬扬刷屏,小编在工作中却惊讶的确发现不少同事对版本号中的beta和rc没有概念,使用npm install package@next时,也不清楚next代表的含义。于是,决定写一篇文章科普一下由 Github 起草的Semver(语义化版本)的相关知识。实际案例首先,我们来看看目前最流行的前端框架之一的React最近5个月的版本发布日志,截图来自npmjs.com:从上图,我们不难得出几个结论: 软件的版本通常由三位组成,形如:X.Y.Z 版本是...…
-
Typescript基础总结
TypeScript(以下简称TS) 是由微软开发的编程语言,是JavaScript的超集,于2013年10月发布第一个正式版0.9。最先代码托管在Codeplex,2014年7月移到了Github。它的代码风格和C#很像,这是因为TS是由C#首席架构师设计并主导开发的。开发环境编辑器首选MS自家开发的VS Code (推荐)。当然,Webstorm在2016年2月推出的版本内置了TS编译器,atom 需要安装 atom-typescript包,sublime需要安装Typescrip...…
-
Webpack4新特性介绍
导语: webpack是一个JS应用打包器, 它将应用中的各个模块打成一个或者多个bundle文件。借助loaders和plugins,它可以改变、压缩和优化各种各样的文件。它的输入是不同的资源,比如:js、css、图片、字体和html文件等等,然后将它们输出成浏览器可以正常解析的文件。当下最流行的模块打包器 webpack 于2018年2月25日正式发布v4.0.0版本,代号legato。从官方的 发布日志 来看, 本次大版本更新带来了很多新特性更新和改善,这将会让webpack的配...…
-
腾讯ivweb前端工程化工具feflow思考与实践
本篇文章主要介绍腾讯IVWEB团队从0到1在工程化的思考和实践。feflow的全称是Front-end flow(前端工作流),致力于提升研发效率和规范的工程化解决方案。愿景是通过feflow,可以使项目创建、开发、构建、规范检查到最终项目上线的整个过程更加自动化和标准化。要解决的问题 项目的目录结构按约定生成 团队有一套开发规范进行约束 支持多种类型的构建,包括Fis构建和webpack构建 团队内部的代码贡献统计、离线包内置App等为了解决上述问题,我们于17年2月底开始投入工...…
-
Fis3构建迁移webpack之路
Webpack从2015年9月第一个版本横空初始至今已逾2载。它的出现,颠覆了一大批主流构建如Ant、Grunt和Gulp等等。腾讯NOW直播IVWEB团队之前一直采用Fis构建,本篇文章主要介绍从Fis迁移到webpack遇到的问题和背后的黑科技,内容包括inline-resource、多页面构建、资源压缩、文件hash、文件目录规则等等。为什么要迁移至webpack?有两个层面的原因: 首先webpack的社区生态火爆,插件齐全并且维护更新的很频繁,遇到了问题,比较容易解决。 we...…