【插件】gbel:es2015脚本 - 0配置高性能的编译工具

说在前头

类似的编译脚本有很多,有人会问,babel都一统江湖了,还管你bubel、gbel什么事?
没错,主打0配置高性能的gbel,终将归入冷门,因为他创建的初衷是我个人团队所用的

当然冷门原因还有其他:

  • 个人开发 - 含有不确定性
  • 覆盖常用的api以及es6语法,但有个人主观意识,例如promise、async就没有
  • 适用性缺乏,不支持vue、react、ag解析,也没有其他扩展支持
  • 需要一定基础实力,例如let、const,我并没有深入解析,增加异常,所以开发人员必须了解其关键字的真实含义才能正确使用,否则以后说const可以被复用的时候我不背这个锅

所以它只能存在于框架、脚手架、底层的研发过程中,不适于随手搭建的web开发

so — 打入冷宫


一、下载

npm安装

npm install gbel --save-dev

yarn安装

yarn add gbel --save-dev

cnpm安装

cnpm install gbel --save-dev


二、如何使用

在package.json中输入以下命令

// package.json

// ...
"scripts": {
  // ...
  "build": "gbel -s ./src/test.js -o ./src/build.js"
  // ...
},
// ...

执行以下命令也就完成了

npm run build


三、API

gbel命令行 — api

Usage: npm [options]

Options:
  -v, --version               output the version number
  -s, --entryFilePath <path>  set file path
  -o, --outFilePath <path>    out build file path
  -h, --help                  output usage information

gbel源文件引用 — api

var gbel = require('gbel')
var code = 'const val = `World`;let a = `Hello ${val}!`'

try {
  str = gbel(code)
} catch (error) {
  console.error(error)
}
/**
  * gbel入参 - 一共可接收三个,以下为默认项
  * 
  * @param code 无语法错误的字符串
  * @type String
  * @example 'const val = `World`;let a = `Hello ${val}!`'
  * 
  * @param acornOptions acorn解析ast配置项
  * @type Object
  * @example {
  *   sourceType: 'module'
  * }
  * 
  * @param escodegenOptions escodegen导出配置项
  * @type Object
  * @example {
  *   format: {
  *     // 指定输出代码的缩进为两个空格
  *     indent: {
  *       style: '  ',
  *     }
  *   }
  * }
*/

四、es6+语法支持情况

  • let、const => var: 无任何意义
  • 箭头函数 => function: 解决this指向问题
  • a = {a () {}} => a = {a: function () {}}: 增添冒号
  • class => function: 注意 - class { a = 1 }、extend、super未解析,因为我暂时用不到(后续升级会优先考虑extend与super)
  • ${b} => ‘’ + b + ‘’: 字符串模板解析
  • for => (function () {}()): 默认闭包,解决let块级作用域
  • … => Object.assign: 解析为合并对象
  • Object.assign => Object.assign: 直接污染全局重写,个人感觉Object.assign的负作用很烂,会影响入参的初始值,所以改为return新值,不影响原本数据
  • .includes => .includes: 有则return,无则添加(String、Array类型)
  • .map => .map
  • .find => .find
  • .forEach => .forEach

你没看错,非常少,就连promise、async、findIndex、some等都没,promise好用吗?事实上是好用的,但绝非每个请求都必须new一个出来,回调地狱?链式调用?不是的,在promise出现之前就已有,他与async都只是语法糖

实现不规范使用的真凶,往往只是开发者本身罢了

所以我并不需要,因为我知道如何正确使用他们(js)


关于

make:o︻そ ╆OVE▅▅▅▆▇◤(清一色天空)

blog:http://blog.csdn.net/mcky_love

掘金:https://juejin.im/user/59fbe6c66fb9a045186a159a/posts

lofter:http://zcxy-gs.lofter.com/

sf:https://segmentfault.com/u/mybestangel

git:https://github.com/gs3170981


结束语

最后再来谈谈性能,全程使用acorn、escodegen以及walk,核心源代码仅仅200余行,大量对象执行循环遍历,减少if消耗,压缩只有5kb,默认配置即可满足插件开发大量需求

后期将会慢慢推出webpack、rollup等扩展插件

如要问为何这些最后再说?当然是为了劝退某些人,如果您也厌烦了babel复杂的编译配置,那咋们就是朋友

为何不开源?等其余扩展开发完毕,该项目稳定了,便开源+发表

Thanks

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值