Detailed explanation of steps to convert babel to es6

This time I will bring you a detailed step-by-step guide to converting babel to es6. What are the precautions for converting babel to es6? The following is a practical case, let’s take a look.

class to es5”.

webpack environment configuration

1. npm install webpack webpack-cli babel-core -D

2. Create a new webpack.config.js

3. Configure webpack.config.js

How to write a babel plug-in

addAST?

object, so that we implemented a mapping.

ClassDeclaration. Okay, let’s search in the documentation and find that just calling the following api is enough:

1. Export a function in index.js

2. The function returns an object, the object has a visitor parameter (must be called visitor)

3. Query through astexplorer.net

   Outputclass corresponding The AST node is ClassDeclaration

4. Set a capture function

   ClassDeclaration in the vistor, which means I want to capture all in the js code ClassDeclaration Node

5. Write logic code and complete the conversion

module.exports = function ({ types: t }) {
 return {
  visitor: {
   ClassDeclaration(path) {
    //在这里完成转换
   }
  }
 };
}

There are two parameters in the code. The first {types:t} thing is to deconstruct the variablet from the parameters, which is actually t in the babel-types document (red box in the picture below), which is used to create nodes:

The second parameter path, it It is the information corresponding to the captured node. We can obtain the AST of this node through path.node, and modify it on this basis to achieve our goal.

How to convert es6 class to es5 class

The above are all preliminary work, the real logic starts from now, let’s first Consider two questions:

We need to do the following conversion. First, convert es6 classes into es5 class writing (that is, ordinary functions). We have observed that many codes can be reused, including functions. Names, code blocks inside functions, etc.

If the constructor method in class is not defined, the JavaScript engine will automatically add an empty constructor for it () method, which requires us to do compatibility processing.

Next we start writing code, the idea is:

1. Get the old AST node

2. Create an array with To hold the new AST node (although the original class is only one node, it will be replaced by several function nodes after replacement) Initialize the default constructor node (mentioned above, the class may not be defined constructor)

3. Loop the AST object of the old node (several function nodes will be looped out)

4. Judge whether the type of the function is constructor, if so, create a normal function node by getting the data, and update the default constructor node

5. to process the rest that are not constructor node, create a function of type prototype through data, and place it in es5Fns

6. End of the loop, put constructor The node is also placed in es5Fns

7. Determine whether the length of es5Fns is greater than 1. If it is greater than 1, use replaceWithMultiple This API updates the AST

module.exports = function ({ types: t }) {
 return {
  visitor: {
   ClassDeclaration(path) {
    //拿到老的AST节点
    let node = path.node
    let className = node.id.name
    let classInner = node.body.body
    //创建一个数组用来成盛放新生成AST
    let es5Fns = []
    //初始化默认的constructor节点
    let newConstructorId = t.identifier(className)
    let constructorFn = t.functionDeclaration(newConstructorId, [t.identifier('')], t.blockStatement([]), false, false)
    //循环老节点的AST对象
    for (let i = 0; i < classInner.length; i++) {
     let item = classInner[i]
     //判断函数的类型是不是constructor
     if (item.kind == &#39;constructor&#39;) {
      let constructorParams = item.params.length ? item.params[0].name : []
      let newConstructorParams = t.identifier(constructorParams)
      let constructorBody = classInner[i].body
      constructorFn = t.functionDeclaration(newConstructorId, [newConstructorParams], constructorBody, false, false)
     } 
     //处理其余不是constructor的节点
     else {
      let protoTypeObj = t.memberExpression(t.identifier(className), t.identifier(&#39;prototype&#39;), false)
      let left = t.memberExpression(protoTypeObj, t.identifier(item.key.name), false)
      //定义等号右边
      let prototypeParams = classInner[i].params.length ? classInner[i].params[i].name : []
      let newPrototypeParams = t.identifier(prototypeParams)
      let prototypeBody = classInner[i].body
      let right = t.functionExpression(null, [newPrototypeParams], prototypeBody, false, false)
      let protoTypeExpression = t.assignmentExpression("=", left, right)
      es5Fns.push(protoTypeExpression)
     }
    }
    //循环结束，把constructor节点也放到es5Fns中
    es5Fns.push(constructorFn)
    //判断es5Fns的长度是否大于1
    if (es5Fns.length > 1) {
     path.replaceWithMultiple(es5Fns)
    } else {
     path.replaceWith(constructorFn)
    }
   }
  }
 };
}

Optimizing inheritance

In fact, classes also involve inheritance, and the idea is not complicated. It just determines whether there is any in the AST superClass attribute, if any, we need to add one more line of code Bird.prototype = Object.create(Parent), of course don’t forget to handle the super key Character.

Packaged code

Runnpm start After packaging, we see the packaged file class

The syntax has been successfully converted into es5 functions one by one.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to upgrade vue cli to webapck4

Detailed steps for AngularJS application modularization

vue-cli 3.0 What beginners need to know

The above is the detailed content of Detailed explanation of steps to convert babel to es6. For more information, please follow other related articles on the PHP Chinese website!