在express中使用es2015的新特性

在前端开发中使用es2015及正在stage中的js特性已经屡见不鲜,但是在express中使用还是第一次尝试,稍微配置下也是可以的。有没有坑,等使用后再补齐。

安装babel

1
2
3
"babel-cli": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",

###根目录下创建.babelrc文件

1
2
3
4
{
"presets": ["es2015", "stage-2"],
"plugins": []
}

安装nodemon

不使用supervisor是因为配合不了babel

1
npm install nodemon -g

修改package.json

1
2
3
"scripts": {
"start": "nodemon ./bin/www.js --exec babel-node"
},

之后就可以使用es新的语法特性了~

分享到 评论

hexo+Travis-ci+github构建自动化博客

Travis CI:是目前新兴的开源持续集成构建项目,它与jenkins,GO的很明显的特别在于采用yaml格式,简洁清晰。

tarvis-ci是远端服务器构建,跟jenkins 不一样,不用自己搭建一个jenkins服务器。tarvis-ci是用的远端官方提供的服务器。用hexo 搭建博客,然后将博客源码提交到 Git上,用travis-ci 编译git 上的源码,然后将编译后的文件,推送到Github.io仓库下,达到自动化编译构建。


构建自动化博客的步骤

由于需要搭建hexo 和本地搭建Travis 所以本地需要有ruby 和 node 环境。本地搭建Travis 是为了和Travis-ci 服务器进行加密解密获得密匙,获得一次即可。

  1. 安装rubu 和node.js

  2. 搭建hexo

  3. 安装 travis

  4. 配置git 的ssh key

  5. 配置Travis

  6. 验证


查看更多

分享到 评论

react中context的使用

使用 Context 的原因

为了有时候想传递数据通过组件树,但是不想给每一层级的组件手动传递属性,那么 context 就能帮你 “越级” 传递数据到组件树中你想传递到的深层次组件。

查看更多

分享到 评论

使用ES2015全局对象--webpack下添加polyfill

公司使用的技术栈是react全家桶,使用axios进行ajax通信,axios使用的基于Promise实现。在现代浏览器上使用并没有什么问题,但是IE全系列不支持Promise,包括IE11…

本来想着使用babel后,将代码转换为es5,应该在IE10以上兼容运行,但是实际运行时,报错,没有Promise…orz

长话短说,解决方案:babel-polyfill

查看更多

分享到 评论

调试手机端微信X5浏览器

移动调试

移动端网页的表现,通常和桌面浏览器上有所区别,包括样式的呈现、脚本的逻辑等等,这会给开发者带来一定的困扰。现在,微信安卓客户端 webview 已经开始全面升级至 X5 Blink 内核,新的内核无论在渲染能力、API 支持还是在开发辅助上都有很大进步。通过微信 web 开发者工具中的远程调试功能,实时映射手机屏幕到微信 web 开发者工具上,将帮助开发者更高效地调试 X5 Blink 内核的网页,具体步骤如下:

  1. 准备工作
  2. 安装0.5.0或以上版本的微信 web 开发者工具
  3. 确认移动设备是否支持远程调试功能
    打开微信 web 开发者工具,选择“移动调试”tab,点击验证移动设备是否支持。随后使用移动设备扫描弹出的二维码,在设备上即可获得支持信息。
  4. 打开移动设备中的 USB 调试功能
  5. 打开移动设备,进入“设置”->“开发人员选项”
  6. 勾选“USB 调试功能”
    usb调试
    需要注意的是,Android 4.2 之后的设备,开发人员选项默认是隐藏的,通过以下步骤可以打开:
  7. 打开移动设备,进入“设置”->“关于手机”
  8. 找到并单击“内部版本号”7次
  9. 安装移动设备 USB 驱动
  10. 打开 X5 Blink 内核的 inspector 功能
    打开微信 web 开发者工具,选择“移动调试”tab ,使用设备扫描“调试步骤”中的二维码。
    如下图,勾选“是否打开 TBS 内核 Inspector 调试功能”,并重启微信。
    微信设置

    查看更多

分享到 评论