webpack 2 入门

webpack 2将在文档完成后将正式发布(webpack 2.2 中文文档)。 但这并不意味着你现在不能开始使用版本2,如果你知道如何配置它的话。

webpack 2.2 已经正式发布! 现在通过 npm 安装 webpack 会自动安装 v2 版本。

什么是 webpack ?

简单来说,webpack 是一个针对 JavaScript 代码的模块打包工具。然而,自从它的发布,它逐渐发展成为所有前端代码的管理工具(不管是其本身有意还是社区的意愿)。 继续阅读

webpack 2中的Tree Shaking

Tree Shaking 是一个术语,字面的理解就是摇一摇树,树上的枯叶就会掉下来,留下绿叶。

Rich Harris 的模块打包器 Rollup 普及了 JavaScript 圈内一个重要的特性:Tree shaking,即是指消除JavaScript上下文中无用代码,或更精确地说,只保留有用的代码。它依赖于ES6模块 import / export  模块系统的静态结构(static structure)来检测哪一个模块没有被使用,因为,import 和 export 不会在运行时改变。说的再直白一点就是Tree shaking 从模块包中排除未使用的 exports 项。

webpack 2 内置引入的 Tree-shaking 代码优化技术。

示例

看一下官方文档提供的示例:

考虑一个 maths.js 库文件导出两个函数,squarecube

// 这个函数不在任何地方被使用
export function square(x) {
    return x * x; //平方
}

// 这个函数被其他脚本使用
export function cube(x) {
    return x * x * x; //立方
}

在我们的 main.js 中,我们选择性地导入 cube继续阅读

Chrome DevTools 中文文档

Chrome DevTools 中文文档地址:http://www.css88.com/doc/chrome-devtools/

Chrome 开发者工具是一套内置在Google Chrome中Web开发和调试工具。使用开发者工具来重演,调试和剖析您的网站。

注意:寻找最新版本的Chrome 开发者工具,Chrome Canary总是有最新的DevTools。

打开Chrome 开发者工具

  • 在Chrome菜单中选择 更多工具 > 开发者工具
  • 在页面元素上右键点击,选择 “检查”。
  • 使用快捷键 Ctrl+Shift+I (Windows) 或者 Cmd+Opt+I (Mac)。

继续阅读

2017前端开发者必学清单

前端生态系统高速发展,我们把时间花费在尝试新技术并在网上讨论它们。我并非指不该如此,但也许我们可以放缓脚步,去多关注下那些变化不大的东西。这些东西能很大程度改善工作质量,提升工作价值,帮我们去理解新的工具。

这篇文章里有我自己过往的经验也有新年的计划,同时也希望能收到你们的反馈。

学习如何编写可读的代码

我们大多数的工作不是写新代码,而是维护既有的代码。这也就意味着你读代码的时间要远多于写码的时间,因而你需要为你下一位维护代码的同事来优化代码,而非为解释器来优化。

我推荐大家阅读这几本很棒的书,由薄到厚,按下面顺序来阅读:

继续阅读

Chrome DevTools – 测试响应和设备特定可视窗口

更新后的Device Mode(设备模式)(从Chrome 49开始)是现在“移动优先”开发工具的一个组成部分,并扩展了主要的DevTools 工具条。了解如何使用其控件来模拟各种设备或完全响应式。

TL;DR

  • 使用Device Mode(设备模式)的屏幕模拟器测试你的网站的响应式布局。
  • 保存自定义预设,以便以后轻松访问它们。
  • 设备模式不能完全代替真实设备的测试。 注意其局限性。 继续阅读

Chrome DevTools – 使用设备模式模拟移动设备

使用 Chrome 开发者工具的Device Mode(设备模式)来构建移动优先,完全响应式的网站。了解如何使用它来模拟各种设备及其功能。

简而言之

一个健壮且可扩展的 CSS 架构所需的8个简单规则

这是一份清单,里面列出了在我多年的专业 Web 开发期间,在复杂的大型 Web 项目中学习到的有关管理 CSS 的事项。我多次被人问起这些东西,所以写一份文档记录下来听起来是个不错的主意。

我已经尽力尝试用简短的语言去解释它们了,然而这篇文章本质上还是长文慎入:

  1. 总是类名优先
  2. 组件代码放在一起
  3. 使用一致的类命名空间
  4. 维护命名空间和文件名之间的严格映射
  5. 避免组件外的样式泄露
  6. 避免组件内的样式泄露
  7. 遵守组件边界
  8. 松散地整合外部样式

介绍

如果你正在开发前端应用,那么最后你肯定需要关心样式方面的问题。尽管开发前端应用的技术水平持续增长,CSS 仍然是给 Web 应用赋予样式的唯一方式(而且最近,在某些情况下,原生应用也一样)。目前在市面上有两大类样式解决方案,即:

  • CSS 预编译器,已经存在很长时间了(如 SASSLESS 及其他)
  • CSS-in-JS 库,一个相对较新的样式解决方案(如 free-style 和很多其他的

两种方法间的抉择不在本文过多赘述,并且像往常一样,它们都有各自的支持者和反对者。说完这些,在下面的内容里,我将会专注于第一种方法,所以如果你选择了后者,那么这篇文章可能就没什么吸引力了。

主要目标

但更具体地说,怎样才能被称为健壮且可扩展呢? 继续阅读

Chrome DevTools – 检查资源

按框架、域、类型或其他标准来组织管理资源。

TL;DR

  • 使用 Application(应用)面板的Frames(框架)窗格按frame(框架)组织管理资源。
  • 您还可以在Sources(源文件)面板中,通过禁用group by folder(按文件夹分组)选项,来按frame(框架)查看资源。
  • 要按域和文件夹查看资源,请使用Sources(源文件)面板。
  • Network(网络)面板中可以按照名称或其他条件过滤资源。

按frame(框架)组织管理资源

Application(应用)面板的Frames(框架)窗格中,以frame(框架)方式表示您的页面资源。 继续阅读

Chrome DevTools – 检查和删除 Cookie

Application(应用)面板中检查和删除 cookie。

TL;DR

  • 查看有关cookie的详细信息,例如其名称,值,域,大小等。
  • 删除单个Cookie,所选网域中的Cookie,或所有域中的所有Cookie。

概述

使用Cookie窗格查看和删除 cookie。 您不能修改cookie值。

cookie窗格 继续阅读

Chrome DevTools – 检查和管理Storage, Databases 和 Caches

Application(应用)面板检查和管理Storage(存储)、 Databases(数据库)和Caches(缓存)。

TL;DR

  • 查看和编辑本地和会话存储。
  • 检查和修改 IndexedDB 数据库。
  • 在Web SQL数据库上执行语句。
  • 查看 Application 和 Service Worker 缓存。
  • 单击按钮,清除所有存储,数据库,缓存和service workers。

Local storage(本地存储)

如果您使用local storage(本地存储)来存储键值对(KVP),您可以在Local Storage(本地存储)窗格中检查,修改和删除这些键值对(KVP)。

本地存储窗格 继续阅读