通过 grunt-babel 使用 transform-es2015-modules-amd 进行额外定义

Question

输入文件

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

通过 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;
    });
});

通过 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"]
}

我遇到了这种奇怪的行为，当我通过 grunt-babel 插件进行转换时，额外的 define() 被添加到我的 ES5 源代码中。我已经分叉了 repo 并将 babel-core 和 babel-preset-es2015 更新到了最新版本，但这并没有帮助。

挖掘到 babel-grunt 看起来 babel.transformFileSync 用于进行转换。在 babel-cli 包中，它看起来像使用了babel.tranform。但是babel.transformFileSync 只是读取一个文件并将内容传递给babel.tranform。

我觉得我缺少一些小的配置选项或某处。谁能看到我错过了什么？

Answer 1

我发现了我的问题。在我的Gruntfile.js 中，我正在读取我的.babelrc 文件中的JSON 字符串并将其传递到选项对象中。这似乎导致了双重定义。一旦我删除，问题就会自行解决。

不知道为什么会导致这种行为，但现在已经解决了。