【js】Babelコンパイル後のコードでどこが間違っているか分りません

Question

こちらのコードをコンパイルしましたが、どこが間違っているかわかりませんでした。
http://qiita.com/mo4_9/items/306b236a9d16901d6b05

animLeft.play();が動かず描画されません。

そもそも正しくコンパイルができているのか、
コンパイル前のコードが間違っているのか分らない状態です。

よろしくお願いします。

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var _libCustomBodymovinJs = require('./lib/CustomBodymovin.js');

var _libCustomBodymovinJs2 = _interopRequireDefault(_libCustomBodymovinJs);

var animLeft = new _libCustomBodymovinJs2['default']({
	elm: document.getElementById('bodymovin'),
	animationData: 'left01'
});

// たとえばボタンを押してスタート
$('label').on('click', function () {
	animLeft.play();
	console.log('test');
});

},{"./lib/CustomBodymovin.js":2}],2:[function(require,module,exports){
// AEで書き出したanimationDataを外部で管理
'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true
});

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

var _radioJson = require('../radio.json');

var CustomBodymovin = (function () {
  function CustomBodymovin() {
    var opts = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];

    _classCallCheck(this, CustomBodymovin);

    this.elm = opts.elm || document.createElement('div');
    this.animationData = opts.animationData;
    this.WIDTH = 1920;
    this.HEIGHT = 1080;
    this.init();
    this.initListener();
  }

  _createClass(CustomBodymovin, [{
    key: 'init',
    value: function init() {
      this.selectAnimationData();
      this.anim = bodymovin.loadAnimation({
        container: this.elm,
        renderer: "svg",
        loop: false,
        autoplay: false,
        autoloadsegments: true,
        rendererSettings: {
          progressiveLoad: false
        },
        animationData: this.data
      });
    }
  }, {
    key: 'initListener',
    value: function initListener() {
      var _this = this;

      this._onResize();
      window.addEventListener('resize', function () {
        _this._onResize();
      }, false);

      this.anim.addEventListener('complete', function () {
        console.log('complete');
      });
      this.anim.addEventListener('loopComplete', function () {
        // loopが終わるたびに発火
        console.log('loopComplete');
      });
      this.anim.addEventListener('enterFrame', function () {
        // 毎フレームごとに発火するが誤差はあり
        console.log('enterFrame');
      });
      this.anim.addEventListener('segmentStart', function () {
        console.log('segmentStart');
      });
    }
  }, {
    key: 'selectAnimationData',
    value: function selectAnimationData() {
      switch (this.animationData) {
        case 'left01':
          this.data = _radioJson.left01;break;
      }
    }
  }, {
    key: 'play',
    value: function play() {
      this.anim.play();
    }
  }, {
    key: 'stop',
    value: function stop() {
      this.anim.stop();
    }
  }, {
    key: 'pause',
    value: function pause() {
      this.anim.pause();
    }
  }, {
    key: 'destroy',
    value: function destroy() {
      this.anim.destroy();
    }
  }, {
    key: 'setSpeed',
    value: function setSpeed(int) {
      this.anim.setSpeed(int);
    }
  }, {
    key: '_onResize',
    value: function _onResize() {
      var ww = window.innerWidth;
      var wh = window.innerHeight;
      var ratio = ww / this.WIDTH;
      var scaleY = wh / (this.HEIGHT * ratio);
      var $svg = $(this.elm).find('svg');
      $svg.css('transform', 'translate(-50%, -50%) scale3d(1, ' + scaleY + ', 1)');
    }
  }]);

  return CustomBodymovin;
})();

exports['default'] = CustomBodymovin;
module.exports = exports['default'];

},{"../radio.json":3}],3:[function(require,module,exports){
module.exports={"v":"4.6.8","fr":60,"ip":0,"op":60,"w":114,"h":114,"nm":"コンポ 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"シェイプレイヤー 2","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[57,57,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":1,"k":[{"i":{"x":[0.831,0.831,0.833],"y":[0.548,0.548,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p831_0p548_0p167_0p167","0p831_0p548_0p167_0p167","0p833_0p833_0p167_0p167"],"t":0,"s":[0,0,100],"e":[76.978,76.978,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.256,0.256,0.167],"y":[-2.975,-2.975,0.167]},"n":["0p833_0p833_0p256_-2p975","0p833_0p833_0p256_-2p975","0p833_0p833_0p167_0p167"],"t":12,"s":[76.978,76.978,100],"e":[64,64,100]},{"t":40}]}},"ao":0,"shapes":[{"d":1,"ty":"el","s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[0,0]},"nm":"楕円形パス 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":0,"k":[0.1764706,0.6980392,0.4745098,1]},"o":{"a":0,"k":100},"r":1,"nm":"塗り 1","mn":"ADBE Vector Graphic - Fill"}],"ip":0,"op":60,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":2,"ty":4,"nm":"シェイプレイヤー 1","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[57,57,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"d":1,"ty":"el","s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[0,0]},"nm":"楕円形パス 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"st","c":{"a":0,"k":[0.8980392,0.8980392,0.8980392,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":10},"lc":1,"lj":1,"ml":4,"nm":"線 1","mn":"ADBE Vector Graphic - Stroke"}],"ip":0,"op":60,"st":0,"bm":0,"sr":1}]}
},{}]},{},[1]);

Answer 1

パスに変更したところ動作しました。

const animLeft = new CustomBodymovin({
elm: document.getElementById('bodymovinLeft'),
path: 'radio.json'
})