Как преобразовать код из Babel в дефолтный js?

Question

[Aison]

Ребят, как это можно преобразовать в стандартный JS?

С Babel совсем незнаком, если использовать преобразователь на их сайте, то код получается сломанным.

Comments

[Aison]

Максим Зайцев, использовал этот и

получилось так

// Let's make something cool!2

var _window = window;
var debounce = _window._.debounce;
var _window$Matter = _window.Matter;
var Body = _window$Matter.Body;
var Render = _window$Matter.Render;
var Engine = _window$Matter.Engine;
var World = _window$Matter.World;
var Bodies = _window$Matter.Bodies;
var Events = _window$Matter.Events;
var _window$gsap = _window.gsap;
var random = _window$gsap.utils.random;
var to = _window$gsap.to;
// eslint-disable-next-line

console.clear();

var ORIGINAL_SIZE = 76;
var TEXTURES = ['https://assets.codepen.io/605876/bear--default-badge-large.png', 'https://assets.codepen.io/605876/bear--gold-badge--large.png', 'https://assets.codepen.io/605876/bear--silver-badge--large.png', 'https://assets.codepen.io/605876/bear-bronze-badge-large.png', 'https://assets.codepen.io/605876/bear-emerald-badge-large.png', 'https://assets.codepen.io/605876/bear-purple-badge-large.png'];

var canvas = document.querySelector('canvas');

var engine = Engine.create({
  enableSleeping: true
});

var render = Render.create({
  element: document.body,
  canvas: canvas,
  engine: engine,
  options: {
    background: 'transparent',
    wireframeBackground: 'transparent',
    wireframes: false,
    width: window.innerWidth,
    height: window.innerHeight
  }
});

// Create the ground
var ground = Bodies.rectangle(0, window.innerHeight - 10, 10000, 1, {
  isStatic: true,
  render: {
    opacity: 0
  }
});

// add all of the bodies to the world
World.add(engine.world, [ground]);

// run the engine
Engine.run(engine);

// run the renderer
Render.run(render);

var addBear = function addBear() {
  var HEADS = [];
  var amount = 100;

  var _loop = function _loop(h) {
    var SIZE = random(25, 76);
    var HEAD = Bodies.rectangle(random(0, window.innerWidth), -100, SIZE, SIZE, {
      angle: random(0, 360) * (Math.PI / 180),
      render: {
        strokeStyle: '#ffffff',
        sprite: {
          texture: TEXTURES[Math.floor(random(0, TEXTURES.length))],
          xScale: SIZE / ORIGINAL_SIZE,
          yScale: SIZE / ORIGINAL_SIZE
        }
      }
    });
    if (Math.random() > 0.5) to(HEAD, {
      angle: (Math.random() > 0.5 ? '-' : '+') + '=' + 360 * Math.PI / 180,
      repeat: -1,
      duration: random(0.2, 2)
    });
    Events.on(HEAD, 'sleepStart', function () {
      World.remove(engine.world, HEAD);
      if (engine.world.bodies.length < 80) mixed();
    });
    HEADS.push(HEAD);
  };

  for (var h = 0; h < amount; h++) {
    _loop(h);
  }
  World.add(engine.world, HEADS);
};

var mixed = function mixed() {
  return addBear();
};
var bear = function bear() {
  return addBear(0);
};
var golden = function golden() {
  return addBear(1);
};
var silver = function silver() {
  return addBear(2);
};
var bronze = function bronze() {
  return addBear(3);
};
var green = function green() {
  return addBear(4);
};
var purpleRain = function purpleRain() {
  return addBear(5);
};
var clear = function clear() {
  return World.clear(engine.world, true);
};

document.body.addEventListener('click', mixed);
window.addEventListener('resize', debounce(function () {
  World.clear(engine.world, true);
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  Body.setPosition(ground, {
    x: 0,
    y: window.innerHeight - 10
  });
  mixed();
}, 500));

mixed();

только то, что раньше было константами.. я не пойму, что там ещё переделать нужно

[Aison]

Максим Зайцев, если бы. ругается на _.debounce; и на var engine = Engine.create({

[Aison]

Максим Зайцев, да, я знаю про это. невнимательность моя снова обыграла меня) Спасибо

Answer 1

[Александр]

Это и есть обычный JS, просто ES6+. А Babel просто отдельно транспилирует файл, и на странице выполняется уже он (на CodePen так).