Extra define with transform-es2015-modules-amd via grunt-babel

Question

Input file

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;
    }
}

Output file, via 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;
    });
});

Output file, via 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"]
}

I'm running into this odd behavior where an extra define() is being added to my ES5 source when I do the transformation via the grunt-babel plugin. I've forked the repo and updated babel-core and babel-preset-es2015 to the latest versions and that didn't help.

Digging in to babel-grunt it looks like babel.transformFileSync is used to do the transformation. In the babel-cli package it looks like babel.tranform is used. But babel.transformFileSync just reads a file and passes the contents to babel.tranform.

I feel like I am missing some small configuration option or something somewhere. Can anyone see what I am missing?

Answer 1

I've found my issue. In my Gruntfile.js I was reading and passing the JSON string from my .babelrc file into the options object. This appears to have been causing the double define. Once I removed that the issue resolved itself.

Not sure why that was causing this behavior but it is now taken care of.