【插件】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