Question

我已经发布了一个question信息，我设法通过一种解决方法解决了这个问题，但是现在我拥有多个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是从babelrc读取的JSON对象，其预设"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'
  ]
}

使用此配置，文件“ boneer.fetch-cache.js”具有来自“供应商”目录的以下内容

(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模块？

Answer 1

如果有帮助，我将deprecated插件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';

babel将其解析为UMD模块中的undefined

1 个答案: