Почему использование babel preset-env с `useBuiltIns:" using "` вызывает ошибку в harmony-module? - PullRequest
Новая
       21

Почему использование babel preset-env с `useBuiltIns:" using "` вызывает ошибку в harmony-module?

1 голос
/ 16 февраля 2020

Я пытаюсь настроить babel preset-env для автоматической инъекции полизаполнений в соответствии с указанным списком целевых браузеров.

В документации говорится, что настройка предустановки preset-env со свойством в форма "useBuiltIns": "usage" будет делать именно это.

(я заметил, что указание только этого свойства вызвало предупреждение, отображаемое в консоли, однако указывалось, что я должен указать версию core- js для использовать, поэтому я тоже добавил это.)

Поэтому мой babel.config.js выглядит так: 

module.exports = {
  "presets": [
    "@babel/preset-react",
    "@babel/preset-typescript",
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ],
  "plugins": ['macros'],
};

Fantasti c! Это должно быть очень просто!

Однако, после перекомпиляции с веб-пакетом, мое приложение теперь умирает в браузере с консольным сообщением: 

Uncaught TypeError: __webpack_require__(...) is not a function
at Module../node_modules/webpack/buildin/harmony-module.js (harmony-module.js:24)

Я провел некоторое исследование (стоит всего около 3 часов!), и я понимаю, что это результат того, что babel пытается передать babel, или что-то в этом роде ... что мне нужно добавить некоторые файлы в список игнорируемых файлов, которые не будут переданы, или вдвойне -перечислено, возможно.

В моем конфиге веб-пакета я поместил следующее. (Обратите внимание на записи исключения). 

module: {
  rules: [
    {
      test: /\.(js|jsx|ts|tsx)$/,
      exclude: [/core-js/, /regenerator-runtime/],
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: babelConfig.presets,
            cacheDirectory: babelCacheDir
          }
        },
        'eslint-loader'
      ]
    }
  ]
}

Я также попытался добавить несколько вариантов в шаблон игнорирования, но у меня все еще есть фатальные ошибки консоли.

Еще одна вещь, которую я пробовал , игнорирует папку node_modules, но тогда у меня есть большие куски кода, которые вообще не передаются. то есть в IE11 я получаю синтаксические ошибки относительно функций стрелок ES6, которые происходят из непереданных сценариев вендора.

Если кто-нибудь сможет объяснить, почему __webpack_require__ изменяется нежелательным образом, я был бы очень признателен, так как точное решение, которое требуется для этой проблемы, является весьма устойчивым к исследованиям.

Редактировать: после предполагает, что babel должно быть сделано, чтобы игнорировать core-js, что кажется очень разумно Он предлагает использовать в файле конфигурации babel следующее: 

{
  ignore: [
    /\/core-js/,
  ],
  sourceType: "unambiguous",
  presets: [
    ['@babel/preset-env', { modules: false, useBuiltIns: 'usage' }],
  ],
}

Однако это вызывает еще одну справедливую, казалось бы, не указанную c ошибку: 

has.js:4 Uncaught TypeError: Cannot convert undefined or null to object
    at hasOwnProperty (<anonymous>)
    at push../node_modules/core-js/internals/has.js.module.exports (has.js:4)
...