node如何正确的编译babel

    ES6虽然现在在逐渐普及,但几乎没有浏览器或者node能完全支持ES6代码,相信babel现在对于前端开发者来说并不陌生。最近在写一个小工具,npm安装babel后,在node下build后ES6源码未编译,内心是奔溃的,为啥呢?

一、引起原因

  • 其实是没有添加.babelrc文件,那么.babelrc到底能做什么呢

二、正确编译流程

1.安装babel及插件

1
2
3
4
5
npm install babel-core //babel6
npm install babel-polyfill //支持新API
npm install babel-preset-es2015 //插件
//如果用了异步函数async function, await等,同时需要安装下面插件
npm install babel-preset-stage-2

阅读全文

怎么开发一个npm包

一、注册npm账号

  • 怎么将代码提到github,大家都知道需要一个github账号
  • 同样,开发一个npm包,当然也需要一个npm账号,将npm包发布到npm的托管服务器
  • 注册地址:http://npmjs.org
  • 该实例包含了模块的局部调用和全局调用两种方式

二、开发npm包

1.目录构建

  • npm init
  • 项目结构:
    1
    2
    3
    4
    5
    6
    7
    .
    ├── bin //命令配置
    ├── README.md //说明文档
    ├── index.js //主入口
    ├── src //功能文件
    ├── package.json //包信息
    └── test //测试用例

阅读全文

h5-base库-像写pc一样写h5

    前段时间总结完善了一个H5的基础函数库,包括常用的工具函数,及一些小组件,最终用gulp将zepto和common库打包成h5-base.js和h5-base.css大家有兴趣的可以在git上补充,以后的想法是做成像jquery-ui一样可定制生成base库,需要zepto打包zepto,依赖jquery打包jquery等。

一、函数列表

  • p2m px=>rem的适配
  • getUrlparam 获取url参数
  • getDataUrl 获取图片base64编码
  • judgePlat 判断平台类型
  • isAndroid 判断是否为安卓设备
  • isIOS 判断是否为IOS设备
  • setCookie 设置cookie
  • getCookie 获取cookie
  • delCookie 删除cookie
  • getPhoneCode 获取手机验证码
  • delayGo 延迟处理/跳转

阅读全文

webpack打包输出JS文件过大

最近在做项目的性能优化,项目采用webpack构建,其中有个js文件打包输出后为1.5M,什么鬼?怎么可以这么大~~~~让我们下面来看看原因

1.主要原因分析

(1)图片的base64编码

1
{ test: /\.(?:jpg|gif|png)$/, loader: 'url' }
  • 不对打包图片做限制,会将所有依赖图片打包成base64,前面说的1.5M主要就是4张图片打包成base64造成的
  • base64比原图要大一些,大约大1/3,所以base64只适合小图标,不适合偏大的图

(2)图片打包成base64为什么会变大

base64编码使用八比特表示六比特的内容,所以会偏大

阅读全文