Zusatz definieren mit transformations es2015-modules-amd über grunt-babel

Question

Eingabedatei

import Logger from "logger"; 
export default class Greeter { 
    constructor(name) { 
     this.name = name || ''; 
     console.log('Hello', name); 
    } 

    notify() { 
     console.log('It is my duty to inform you that this JS is ES6!'); 
    } 

    getName() { 
     Logger.log('Called getName'); 

     return this.name; 
    } 
} 

Ausgabedatei über grunt

define([], function() { 
    define(['exports', 'logger'], function (exports, _logger) { 
     'use strict'; 

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

     var _logger2 = _interopRequireDefault(_logger); 

     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 _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; 
      }; 
     }(); 

     var Greeter = function() { 
      function Greeter(name) { 
       _classCallCheck(this, Greeter); 

       this.name = name || ''; 
       console.log('Hello', name); 
      } 

      _createClass(Greeter, [{ 
       key: 'notify', 
       value: function notify() { 
        console.log('It is my duty to inform you that this JS is ES6!'); 
       } 
      }, { 
       key: 'getName', 
       value: function getName() { 
        _logger2.default.log('Called getName'); 

        return this.name; 
       } 
      }]); 

      return Greeter; 
     }(); 

     exports.default = Greeter; 
    }); 
}); 

Ausgabedatei über CLI

define(['exports', 'logger'], function (exports, _logger) { 
    'use strict'; 

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

    var _logger2 = _interopRequireDefault(_logger); 

    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 _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; 
     }; 
    }(); 

    var Greeter = function() { 
     function Greeter(name) { 
      _classCallCheck(this, Greeter); 

      this.name = name || ''; 
      console.log('Hello', name); 
     } 

     _createClass(Greeter, [{ 
      key: 'notify', 
      value: function notify() { 
       console.log('It is my duty to inform you that this JS is ES6!'); 
      } 
     }, { 
      key: 'getName', 
      value: function getName() { 
       _logger2.default.log('Called getName'); 

       return this.name; 
      } 
     }]); 

     return Greeter; 
    }(); 

    exports.default = Greeter; 
}); 

.babelrc

{ 
    "presets": ["es2015"], 
    "plugins": ["transform-es2015-modules-amd"] 
} 

Ich laufe in dieses seltsame Verhalten, wo eine zusätzliche define() meiner ES5 Quelle hinzugefügt wird, wenn ich die Transformation über das Grunzen-babel Plugin tun. Ich habe das Repo gegabelt und Babel-Core und Babel-Preset-Es2015 auf die neuesten Versionen aktualisiert und das hat nicht geholfen.

Graben in Babel-Grunt es sieht aus wie babel.transformFileSync wird verwendet, um die Transformation zu tun. Im babel-cli Paket sieht es aus wie babel.tranform wird verwendet. Aber babel.transformFileSync liest nur eine Datei und übergibt den Inhalt an babel.tranform.

Ich fühle mich wie ich einige kleine Konfigurationsoption oder etwas irgendwo fehlt. Kann jemand sehen, was ich vermisse?

Answer 1

Ich habe mein Problem gefunden. In meinem Gruntfile.js las ich und übergab den JSON-String aus meiner .babelrc Datei in das Optionsobjekt. Dies scheint die Doppeldefinition verursacht zu haben. Sobald ich das entfernte, löste sich das Problem selbst.

Nicht sicher, warum das dieses Verhalten verursacht hat, aber es ist jetzt gesorgt.