babel转义es6---简单的写，更好的用

2024-02-07 22:14:54

npm init ---初始化环境

npm install ---安装包包

npm install xxx --save-dev安装到devDependencies中，dexDependencies用于本地环境开发的时候

npm install xxx 默认安装到dependencies中 dependencies用于发布环境

用于安装babel的包包

npm install --save-dev @babel/core

npm install @babel/preset-env --save-dev

npm install @babel/cli

package.json中配置调试

"build": "babel src -d dist" 向外添加到dist文件夹中 -d就是--out-dir的意思

执行npm run build就会创建一个dist文件夹，并将转换后的代码放到dist中

转义前的es6代码

const move = ((el, { x = 0, y = 0 } = {}, end = () => {}) => {
    el.style.transform = `translate3d(${x}px,${y}px,0)`;
    el.addEventListener('transitionend', () => {
        end();
    }, false)
});
const movePromise = (el, point) => {
    return new Promise(resolve => {
        move(el, point, () => {
            resolve();
        })
    })
};
const box = document.getElementById("box");
document.addEventListener('click', () => {
    movePromise(box, {
        x: 150
    }).then(() => {
        return movePromise(box, {
            x: 150,
            y: 150
        })
    }).then(() => {
        return movePromise(box, {
            x: 0,
            y: 150
        })
    }).then(() => {
        return movePromise(box, {
            x: 0,
            y: 0
        })
    })
})

通过babel转换后的代码

"use strict";

var move = function move(el) {
  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
      _ref$x = _ref.x,
      x = _ref$x === void 0 ? 0 : _ref$x,
      _ref$y = _ref.y,
      y = _ref$y === void 0 ? 0 : _ref$y;

  var end = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};
  el.style.transform = "translate3d(".concat(x, "px,").concat(y, "px,0)");
  el.addEventListener('transitionend', function () {
    end();
  }, false);
};

var movePromise = function movePromise(el, point) {
  return new Promise(function (resolve) {
    move(el, point, function () {
      resolve();
    });
  });
};

var box = document.getElementById("box");
document.addEventListener('click', function () {
  movePromise(box, {
    x: 150
  }).then(function () {
    return movePromise(box, {
      x: 150,
      y: 150
    });
  }).then(function () {
    return movePromise(box, {
      x: 0,
      y: 150
    });
  }).then(function () {
    return movePromise(box, {
      x: 0,
      y: 0
    });
  });
});

先写简单的es6代码，为了更好的兼容，通过babel将其转换。

最后将转换后的文件(转换后的文件会自动保存到dist文件中，在webpack中有配置到)引入到html文件中,所以html中<script src="../dist/index.js"></script>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用babel编译es6的代码</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    #box {
        width: 300px;
        height: 300px;
        background-color: red;
        transition: all 0.5s;
    }
</style>

<body>
    <div id="box"></div>
</body>
<script src="../dist/index.js"></script>

</html>

码农公寓

相关文章