1

我在ES6中创建了一些类并将其转换为ES5。但我无法通过ES5访问这些对象。如何在ES5中使用转储的ES6?

的ES6文件

import Util from "./utilities"; 

export default class Dom { 
    construtor(){} 

    static byId(s){ 
     if(s !== null) { 
      return document.getElementById(s); 
     }else{ 
      throw `${Util.functionName()} needs paramater`; 
     } 
    } 
} 

而且

export default class Util { 
    constructor(){} 

    static functionName(){ 
     let name = arguments.callee.toString(); 
     name = name.substr('function '.length); 
     name = name.substr(0, name.indexOf('(')); 

     return name; 
    } 
} 

将被transpiled的一个

import Dom from "./Dom"; 

console.log(Dom.byId("test")); 

的transpiled结果

(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"; 

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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } 

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

var _utilities = require("./utilities"); 

var _utilities2 = _interopRequireDefault(_utilities); 

var Dom = (function() { 
    function Dom() { 
     _classCallCheck(this, Dom); 
    } 

    _createClass(Dom, [{ 
     key: "construtor", 
     value: function construtor() {} 
    }], [{ 
     key: "byId", 
     value: function byId(s) { 
      if (s !== null) { 
       return document.getElementById(s); 
      } else { 
       throw _utilities2["default"].functionName() + " needs paramater"; 
      } 
     } 
    }]); 

    return Dom; 
})(); 

exports["default"] = Dom; 
module.exports = exports["default"]; 

},{"./utilities":3}],2:[function(require,module,exports){ 

"use strict"; 

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

var _Dom = require("./Dom"); 

var _Dom2 = _interopRequireDefault(_Dom); 

console.log(_Dom2["default"].byId("h1")); 

},{"./Dom":1}],3:[function(require,module,exports){ 

'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 Util = (function() { 
    function Util() { 
     _classCallCheck(this, Util); 
    } 

    _createClass(Util, null, [{ 
     key: 'functionName', 
     value: function functionName() { 
      var name = arguments.callee.toString(); 
      name = name.substr('function '.length); 
      name = name.substr(0, name.indexOf('(')); 

      return name; 
     } 
    }]); 

    return Util; 
})(); 

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

},{}]},{},[2]) 


//# sourceMappingURL=helpers.js.map 

那么如何在正常的ES5(控制台或js文件)中使用DomUtil,因为我得到undefined变量?

谢谢。

+2

'window.Dom = Dom'? – Pavlo

+0

你需要一个模块加载器。 Babel默认使用CommonJS语法输出模块,因此您需要支持该模块的模块。 http://stuk.github.io/require1k/ – CodingIntrigue

+0

@Pavlo'Dom'没有在窗口范围中定义。它看起来像是从可怜的缩进 – CodingIntrigue

回答

2

如果要“出口”的东西在全球范围内,将其分配给window对象的属性:

window.Dom = Dom; 

但要注意,声明全局变量被认为是不好的做法(read why)。

+0

啊......我明白了......但是像'window。{aContainer} .Dom'这样的东西更容易被接受? – Xlander

+0

是的,不要这样做。 –