说在前头
类似的编译脚本有很多,有人会问,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