1

I had already posted a question about this, i managed to solve it with a workaround but now i have multiple UMD modules, third party modules, and it no longer makes sense to change the module myself to make it transpile.

this is what my .babelrc looks like

{
  "presets": [
    "react",
    "es2015",
    "es2017",
    "stage-1"
  ],
  "plugins": [
    "react-hot-loader/babel",
    "transform-decorators-legacy",
    "add-module-exports",
    "transform-runtime"
  ]
}

i'm using babel 6 with webpack 4. my webpack.config looks like this

module: {
    rules: [{
          test: /\.jsx?$/,
          exclude: /(node_modules|vendor)/,
          loader: 'babel-loader'
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          include: /vendor/,
          loader: 'babel-loader',
          query: JSON.stringify(babelrcWithoutModules)
        },

babelrcWithoutModules is the JSON object read from babelrc with the preset "es2015" replaced with ["es2015", { modules: false }] to make sure it operates in script mode and babelrc set to false, so essentially this

{
  'presets': [
    'react', ['es2015', {
      modules: false
    }],
    'es2017',
    'stage-1'
  ],
  babelrc: false,
  'plugins': [
    'react-hot-loader/babel',
    'transform-decorators-legacy',
    'add-module-exports',
    'transform-runtime'
  ]
}

with this config, the file backbone.fetch-cache.js with the following contents from from the "vendor" directory

(function(root, factory) {
    if (typeof define === 'function' && define.amd) {
      // AMD. Register as an anonymous module and set browser global
      define(['underscore', 'backbone', 'jquery'], function(_, Backbone, $) {
        return (root.Backbone = factory(_, Backbone, $));
      });
    } else if (typeof exports !== 'undefined' && typeof require !== 'undefined') {
      module.exports = factory(require('underscore'), require('backbone'), require('jquery'));
    } else {
      // Browser globals
      root.Backbone = factory(root._, root.Backbone, root.jQuery);
    }
  }(this, function(_, Backbone, $)

transpiles to this

(function(root, factory) {
  if (typeof define === 'function' && __webpack_require__( /*! !webpack amd options */ "./node_modules/webpack/buildin/amd-options.js")) {
    // AMD. Register as an anonymous module and set browser global
    define(['underscore', 'backbone', 'jquery'], function(_, Backbone, $) {
      return root.Backbone = factory(_, Backbone, $);
    });
  } else if (typeof exports !== 'undefined' && "function" !== 'undefined') {
    module.exports = factory(__webpack_require__( /*! underscore */ "./node_modules/underscore/underscore.js"), __webpack_require__( /*! backbone */ "./node_modules/backbone/backbone.js"), __webpack_require__( /*! jquery */ "./node_modules/jquery/dist/jquery.js"));
  } else {
    // Browser globals
    root.Backbone = factory(root._, root.Backbone, root.jQuery);
  }
})(undefined, function(_, Backbone, $)

notice how this became undefined.

how can i make it properly transpile the UMD modules?

Rick
  • 4,030
  • 9
  • 24
  • 35
kfc
  • 291
  • 7
  • 24

1 Answers1

0

if it helps someone, i replaced the deprecated plugin babel-preset-es2015 with babel-preset-env and used the following babel query to transpile the problematic umd modules

const babelrc = JSON.parse(fs.readFileSync('.babelrc'));
const babelrcWithoutModules = Object.assign({babelrc: false}, babelrc);

const indexOfEnvPreset = babelrcWithoutModules.presets.findIndex(s => Array.isArray(s));
const envPreset = babelrcWithoutModules.presets[indexOfEnvPreset];
envPreset[1].modules = 'umd';
kfc
  • 291
  • 7
  • 24