1

我已经发布了一个关于此的问题，我设法通过解决方法解决了它，但现在我有多个 UMD 模块、第三方模块，并且我自己更改模块以使其转换不再有意义。

这就是我的 .babelrc 的样子

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

我正在使用带有 webpack 4 的 babel 6。我的 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'
  ]
}

使用此配置，来自“vendor”目录的具有以下内容的文件主干.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 模块？

4

1 回答 1

0

如果它对某人有帮助，我将已弃用的插件 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';
于 2018-07-19T14:57:09.997 回答