巴别塔是一个转码器,目前开发反应,vue项目都要使用到它。它可以把es6 +的语法转换为es5,也可以转换JSX等语法。
我们在项目中都是通过配置插件和预设(多个插件的集合)来转换特定代码,例如env, 0阶段等。
实际上巴别塔可以通过自定义插件的方式实现任何代码的转换,接下来我们通过一个“把es6的<代码>类>
内容如下:
大家应该都配置过babel-core这个加载器,它的作用是提供巴别塔的核心Api,实际上我们的代码转换都是通过插件来实现的。
接下来我们不用第三方的插件,自己实现一个es6类转换插件。先执行以下几步初始化一个项目:
-
<李> npm安装webpack webpack-cli babel-core - d
<李>新建一个webpack.config.js李
<李>配置webpack.config.js李
如果我们的插件名字想叫转换类,需要在webpack配置中做如下配置:
接下来我们在node_modules中新建一个babel-plugin-transform-class的文件夹来写插件的逻辑(如果是真实项目,你需要编写这个插件并发布到npm仓库),如下图:
红色区域是我新建的文件夹,它上面的是一个标准的插件的项目结构,为了方便我只写了核心的index.js文件。
巴贝尔插件其实是通过AST(抽象语法树)实现的。
巴贝尔帮助我们把js代码转换为AST,然后允许我们修改,最后再把它转换成js代码。
那么就涉及到两个问题:js代码和AST之间的映射关系是什么?如何替换或者新增AST ?
好,先介绍一个工具:astexplorer.net
这个工具可以把一段代码转换为AST:
如图,我们写了一个es6的类,然后网页的右边帮我们生成了一个AST,其实就是把每一行代码变成了一个对象,这样我们就实现了一个映射。
再介绍一个文档:babel-types:
这是创建AST节点的api文档。
比如,我们想创建一个类,先到astexplorer.net中转换,发现类对应的AST类型是<代码> ClassDeclaration>
创建其他语句也是一样的道理,有了上面这两个东西,我们可以做任何转换了。
下面我们开始真正编写一个插件,分为以下几步:
-
<李>在index.js中导出一个函数
<李>函数中返回一个对象,对象有一个游客参数(必须叫游客)
<李>通过astexplorer.net查询出<代码>类> ClassDeclaration
<李>在游客中设置一个捕获函数<代码> ClassDeclaration> ClassDeclaration>
<李>编写逻辑代码,完成转换李
代码中有两个参数,第一个<代码>{类型:t} 东西是从参数中解构出变量t,它其实就是babel-types文档中的t(下图红框),它是用来创建节点的:
第二个参数<代码>路径> 路径。节点获得这个节点的AST,在这个基础上进行修改就能完成了我们的目标。
上面都是预备工作,真正的逻辑从现在才开始,我们先考虑两个问题:
我们要做如下转换,首先把es6的类,转换为es5的类写法(也就是普通函数),我们观察到,很多代码是可以复用的,包括函数名字,函数内部的代码块等。
