解决 babel 6 升级后使用 import 关键字报错的问题

有几个项目使用了 es6 + babelify(babel) + gulp 的发布工具,一开始用着还挺好,后来手贱 npm outdated 并升级了几个插件以后,就嗝屁了,编译时提示错误:

如果把 babelify 降级使用倒是可以正常,但是作为一个追新党不能忍,最后通过不懈的搜索终于发现了问题的所在,原来是 babel 升级为 6.0 后,对 es6 的支持从 core 里面分离开来,需要单独安装插件 babel-preset-es2015 和 babel-preset-react,并进行相关配置。安装方法如下:

gulpfile.js 的 transform 中需要添加如下配置(browserify 为例):

详细代码及插件结构参见:package.json, gulpfile.js

解决 Touch 事件与 Scroll 事件的冲突问题

开发移动应用时会遇到一个 UI 里面既可以点击(touchend)又可以滑动(scroll window)的情况,如果同时绑定两个事件就会同时执行,这是我们所不愿意看到的情况。大致解决思路是通过一个变量标记当前的触摸状态,当手指移动时标记为正在拖拽,而没有移动的时候则标记为没有在拖拽。代码如下:

修复 OS X El Capitan 系统 GEM 无法使用的问题

升级了 OS X El Capitan,各种问题纷至沓来,今天使用 compass 的时候就发现提示 – command not found 了,重新安装,也是各种报错,搜了一下有这个问题的人还真不少,解决方案是有的,一说是关闭 rootless 功能,不过这样个人感觉有些激进了,于是继续搜索,找到解决方案如下:

1. 打开终端;
2. 输入命令

3. 输入命令

4. 输入命令

5. 输入命令

问题解决。

修复 Firefox 下本地使用 Bootstrap 3 时 glyphicon 不显示问题

本地开发使用 Firefox 调试,遇到了 glyphicon 图标不显示的问题,期初以为是路径问题,搜索一大圈后找到了答案,原来这是一个安全性的问题,于是问题就好办了,解决方案如下(via):

1. 在Firefox地址栏输入 about:config 回车;
2. 搜索 security.fileuri.strict_origin_policy 双击,把 true 变为 false;
3. 刷新页面

完工。

Dash with Alfred

平时写代码总是会遇到查询相关文档、手册的时候,这时一个个去打开网站略显繁琐,直到我发现了Dash这个工具。

Dash支持市面上几乎所有的主流编程语言的文档本地化,其使用界面大致如下:


这个工具最妙的地方在于,可以跟 Alfred 这个神器结合起来使用,方法如下:

1. 打开Alfred的设置面板;
2. 选择Features->Web Search;
3. 点击右下角的Add Custome Search按钮;
4. Search URL处填入 dash://{query} ,Title随便填,Keyword填写dash,你也可以直接在Search URL处填写如下代码后确定直接导入我的配置

5. 使用的时候,首先激活alfred搜索窗口,然后输入 dash+空格+你的dash查询命令即可

dash的查询命令可以在其设置面板中的docsets面板中进行设置,如果你要搜css文档下的position属性,那么dash中的查询命令是css:position,如果放在Alfred中的命令就是dash css:position。

Hava fun!