babel插件编写

gax javascript, 前端技术

    之前项目上遇到一个问题，服务器请求api回来的对象如果位空的时候是｛list:null, name:null｝, 我们期望的值是{list:[], name:""} ,但是后台由于某些原因并没有帮我们做到过滤。于是我们在敲业务代码的时候，经常由于数据问题，导致整个页面挂掉。比如

    let obj =｛list:null, name:null}; //这是服务器返回的，不可控
        obj.list.map(()=>{}) //list为null 报错
        obj.name.length //name为null 报错

        虽然说可以在使用之前调用以下判断代码，确保安全

        obj.list ＝ obj.list===null?[] || obj.list
        obj.name ＝ obj.name===null? "" || obj.name;

    但是人为代码难免遗漏，数据难预测，多层嵌套等原因，很难杜绝这种问题。于是有一天突然想到能不能用babel插件彻底解决这个问题呢？(其实babel不是最好的方法，这里是针对babel写的解决方案)

    比如在运行

    function hello(){
        obj.list ＝ obj.list===null?[] || obj.list;   //编译的时候，babel插件帮我加上这句话
        return obj.list.map(v=>{
        }) ;
    }

    这样就几乎能杜绝这个问题。

    于是边开始了这个课题：babel插件编写

    开始之前先看看资料

    

    从零开始写babel插件

    http://eux.baidu.com/blog/2017/12/how-to-write-babel-plugin?utm_source=tuicool&utm_medium=referral

    Babel插件开发指南

    https://github.com/brigand/babel-plugin-handbook/tree/master/translations/zh-Hans

    AST 辅助工具

    http://astexplorer.net/

    我开发的例子

    https://github.com/gaxking/babel-plugin-gax-killnull

    上手要点：

    1. 一定要在 node_modules 编写插件

    2. plugin 和 preset 的排序问题

  • Plugin 会运行在 Preset 之前。

  • Plugin 会从第一个开始顺序执行。

  • Preset 的顺序则刚好相反(从最后一个逆序执行)。

    3. 多尝试http://astexplorer.net/，了解AST语法构造，因为截取代码和插入代码都需要它的知识

    

发表评论