Использование Babel для преобразования модулей ES6 в модули ES5 AMD не работает должным образом

Я надеюсь, что кто-то может помочь.

Я использую grunt-babel для преобразования кода моего модуля ES6 в код модуля ES5 AMD. Вот мой код ES6:

умножить.js

export default function (x,y) {
    return x * y;
};

квадрат.js

import multiply from 'multiply';
export default function (x) {
   return multiply(x,x);
};

app.js

import square from 'square';

var myValue = square(2);
console.log(myValue);

Как видите, все, что я делаю, это создаю модуль «умножить», импортирую его в другой модуль «квадрат», а затем, наконец, использую «квадрат» в моем основном js-файле. Вышеупомянутые 3 файла затем преобразуются в следующее:

умножить.js

define("multiply", ["exports", "module"], function (exports, module) {
    module.exports = function (x, y) {
        return x * y;
    };
});

квадрат.js

define("square", ["exports", "module", "multiply"], function (exports, module, _resourcesJsEs6moduleExampleMultiply) {
    var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };

    var multiply = _interopRequire(_resourcesJsEs6moduleExampleMultiply);

    module.exports = function (x) {
        return multiply(x, x);
    };
});

app.js

define("app", ["exports", "square"], function (exports, _resourcesJsEs6moduleExampleSquare) {
    var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };

    var square = _interopRequire(_resourcesJsEs6moduleExampleSquare);

    var myValue = square(2);
    console.log(myValue);
});

У меня проблема в том, что я ожидал, что файл app.js будет преобразован во что-то вроде этого:

requirejs(['square'],
    function (square) {
        var myValue = square(2);
        console.log(myValue);
    }
);

В моем gruntfile.js моя конфигурация довольно проста:

options: {
    moduleIds: true,
    modules: 'amd',
    blacklist: ['strict']
}

Я делаю что-то неправильно?


amd javascript babeljs ecmascript-6 gruntjs
person Morné Louis de Jongh    schedule 10.03.2015    source источник
comment
Вообще не понимаю, в чем у вас проблема? Я думаю, что ваш код, скомпилированный babel, все-таки работает. babel удобно компилировать код таким образом.   -  person alexpods    schedule 11.03.2015
comment
Привет Алез, спасибо за ответ. Может быть, у меня не хватает опыта во всем этом, но я понял, что define () генерируется только в том случае, если есть «экспорт»? И если есть только «импорт», генерируется requirejs().   -  person Morné Louis de Jongh    schedule 11.03.2015

Ответы (1)


arrow_upward
1
arrow_downward

После некоторого дальнейшего копания я наконец понял, где я ошибся.

В моем текущем стеке я вынужден использовать Almond вместо RequireJS. Из-за этого Almond ожидает наличия файла для инициализации модулей, поэтому я ожидал, что Babel сгенерирует его для меня. Но, как оказалось, код, сгенерированный Babel, будет нормально работать в RequireJS, но чтобы он работал с Almond, мне нужно создать отдельный файл es5 js, просто чтобы инициализировать файлы, сгенерированные Babel.

Что-то вроде этого:

requirejs(['app'],
    function (app) {
        app();
    }
);
person Morné Louis de Jongh    schedule 13.03.2015