详解如何用babel转换es6的class语法-创新互联
babel是一个转码器，目前开发react、vue项目都要使用到它。它可以把es6+的语法转换为es5，也可以转换JSX等语法。
成都创新互联公司成立与2013年，先为赤城等服务建站，赤城等地企业，进行企业商务咨询服务。为赤城企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。我们在项目中都是通过配置插件和预设(多个插件的集合)来转换特定代码，例如env、stage-0等。
实际上babel可以通过自定义插件的方式实现任何代码的转换，接下来我们通过一个“把es6的 class 转换为es5”的例子来了解一下babel。
内容如下：
webpack环境配置
大家应该都配置过babel-core这个loader，它的作用是提供babel的核心Api,实际上我们的代码转换都是通过插件来实现的。
接下来我们不用第三方的插件，自己实现一个es6类转换插件。先执行以下几步初始化一个项目：
- npm install webpack webpack-cli babel-core -D
- 新建一个webpack.config.js
- 配置webpack.config.js
如果我们的插件名字想叫transform-class，需要在webpack配置中做如下配置：
接下来我们在node_modules中新建一个babel-plugin-transform-class的文件夹来写插件的逻辑(如果是真实项目，你需要编写这个插件并发布到npm仓库),如下图：
红色区域是我新建的文件夹，它上面的是一个标准的插件的项目结构，为了方便我只写了核心的index.js文件。
如何编写bable插件
babel插件其实是通过AST(抽象语法树)实现的。
babel帮助我们把js代码转换为AST，然后允许我们修改，最后再把它转换成js代码。
那么就涉及到两个问题：js代码和AST之间的映射关系是什么？如何替换或者新增AST？
好，先介绍一个工具：astexplorer.net:
这个工具可以把一段代码转换为AST：
如图，我们写了一个es6的类，然后网页的右边帮我们生成了一个AST，其实就是把每一行代码变成了一个对象，这样我们就实现了一个映射。
再介绍一个文档： babel-types :
这是创建AST节点的api文档。
比如，我们想创建一个类，先到astexplorer.net中转换，发现类对应的AST类型是 ClassDeclaration 。好，我们去文档中搜索，发现调用下面的api就可以了：
创建其他语句也是一样的道理，有了上面这两个东西，我们可以做任何转换了。
下面我们开始真正编写一个插件，分为以下几步：
- 在index.js中export一个函数
- 函数中返回一个对象，对象有一个visitor参数(必须叫visitor)
- 通过astexplorer.net查询出
class对应的AST节点为ClassDeclaration - 在vistor中设置一个捕获函数
ClassDeclaration，意思是我要捕获js代码中所有ClassDeclaration节点 - 编写逻辑代码，完成转换
module.exports = function ({ types: t }) {
return {
visitor: {
ClassDeclaration(path) {
//在这里完成转换
}
}
};
}另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
网页题目：详解如何用babel转换es6的class语法-创新互联
本文来源：http://scjbc.cn/article/cdjsgo.html
