CODEWITHSUNDEEP
javascriptrequirejsbabeljsamdes6-modules
John Slegers
John Slegers

Reputation: 47081

@babel/plugin-transform-modules-amd doesn't behave as expected

I have the following package.json :

{
  "name": "watchman",
  "version": "1.0.0",
  "description": "Simple watcher for ES6 to AMD conversion",
  "author": "Luciad NV",
  "license": "MIT",
  "scripts": {
    "build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 babel es6/geometry es6/ria es6/symbology -d release --watch"
  },
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/plugin-transform-modules-amd": "^7.2.0",
    "cross-env": "^5.2.0"
  },
  "dependencies": {
    "@babel/cli": "^7.2.3"
  }
}

I have the following .babelrc :

{
  "plugins": ["@babel/plugin-transform-modules-amd"]
}

I have the following es6 module in my es6/ria folder :

import ProgrammingError from "../error/ProgrammingError";
import Promise from "../util/Promise";

  function Evented(supportedEvents) {
  }

  Evented.prototype = Object.create(Object.prototype);
  Evented.prototype.constructor = Evented;

  Evented.prototype.on = function(event, callback, context, options) {
  };

  Evented.prototype.emit = function(event) {
  };

  export default Evented;

If I run npm run build This produces an AMD module with the following implementation :

define(["exports", "../error/ProgrammingError", "../util/Promise"], function (_exports, _ProgrammingError, _Promise) {
  "use strict";

  Object.defineProperty(_exports, "__esModule", {
    value: true
  });
  _exports.default = void 0;
  _ProgrammingError = _interopRequireDefault(_ProgrammingError);
  _Promise = _interopRequireDefault(_Promise);

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

  function Evented(supportedEvents) {}

  Evented.prototype = Object.create(Object.prototype);
  Evented.prototype.constructor = Evented;

  Evented.prototype.on = function (event, callback, context, options) {};

  Evented.prototype.emit = function (event) {};

  var _default = Evented;
  _exports.default = _default;
});

When I try to load the Evented module with eg. Require.Js, I expect the Evented "class".

Instead I get an object with a default property, which contains the Evented "class".

Is this a bug? Or is it designed this way?

And it it isn't a bug, is there a way to achieve the desired effect?

Is there a way I can convert this ES6 to AMD with the @babel/plugin-transform-modules-amd plugin, so it returns the Evented "class" as expected?

Upvotes: 0

Views: 960

Answers (1)

Damian Dziaduch
Damian Dziaduch

Reputation: 2127

This is how it works. We are using different plugin which work as you want, here https://www.npmjs.com/package/babel-plugin-transform-es2015-modules-simple-amd

Upvotes: 0

Related Questions