Это разрешено babel неопределенным в модуле UMD

Я уже опубликовал вопрос по этому поводу, мне удалось решить его с помощью обходного пути, но теперь у меня есть несколько модулей UMD, сторонних модулей, и больше не имеет смысла менять сам модуль, чтобы он был прозрачным.

вот как выглядит мой.babelrc

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

я использую babel 6 с webpack 4. мой webpack.config выглядит так

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 это объект JSON, прочитанный из babelrc с предустановкой "es2015" заменено на ["es2015", { modules: false }] чтобы убедиться, что он работает в режиме сценария и babelrc установлен в false, так что по сути это

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

с этой конфигурацией, файл backbone.fetch-cache.js со следующим содержимым из каталога "vendor"

(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, $)

переходит к этому

(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, $)

обратите внимание, как это стало неопределенным.

как я могу сделать так, чтобы он правильно переносил модули UMD?

1 ответ

Если это кому-то поможет, я заменил устаревший плагин babel-preset-es2015 на babel-preset-env и использовал следующий запрос babel для переноса проблемных модулей umd

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';
Другие вопросы по тегам