Как мне использовать опцию babel `useBuiltIns: 'usage' в наборе поставщиков?

Так как мне нужно поддерживать IE11, мне нужно также транспилировать node_modules.

Это конфигурация babel, которую я использую для node_modules:

presets: [
  ['@babel/preset-env', { modules: false, useBuiltIns: 'usage' }],
],

Я использую параметры useBuiltIns, потому что выдает ошибку Symbol is not defined, нужен полифилл.

Однако эта конфигурация прерывается во время компиляции, предположительно из-за того, что она вводит imports в код, вот ошибка:

TypeError: Невозможно назначить только для чтения свойство 'exports' объекта '# ‹Object›'

В основном это не нравится module.exports. Итак, как мне использовать useBuiltIns в комплекте поставщиков?

На данный момент я решил, что всегда требую полифил babel в index.html, однако это не идеально.


babeljs internet-explorer polyfills babel-polyfill
person Pontiacks    schedule 19.09.2018    source источник
comment
Эта ссылка может быть полезной: babeljs.io/docs/en/babel-polyfill   -  person Marian07    schedule 08.03.2019

Ответы (1)


arrow_upward
28
arrow_downward

Babel по умолчанию предполагает, что файлы, которые он обрабатывает, являются модулями ES (с использованием import и export). Если вы запускаете Babel на объектах в node_modules (которые, вероятно, являются модулями CommonJS), вам нужно либо указать Babel обрабатывать все node_modules как сценарии, либо указать Babel угадать тип на основе присутствия import и export. Гадать проще всего, поэтому вы можете добавить

sourceType: "unambiguous"

а также сказать Babel не запускать usage преобразование на самом core-js с помощью

  ignore: [
    /\/core-js/,
  ],

потому что в противном случае преобразование usage будет фактически вставлять ссылки на core-js в себя, вызывая циклы зависимости.

Итак, в конфигурации Babel верхнего уровня вы должны, например,

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

Если вы хотите быть более конкретным, вы также можете сделать

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

чтобы установить флаг только для файлов внутри node_modules, но вряд ли от этого много пользы.

Что касается почему, это исправляет эту ошибку, проблема в том, что, если Babel думает, что что-то является модулем ES, он вставит import операторы. Если вы вставляете операторы import в файл, который также использует вещи CommonJS, например module.exports, это означает, что теперь файл будет использовать обе модульные системы в одном файле, что является большой проблемой и вызывает наблюдаемые вами ошибки.

person loganfsmyth    schedule 20.09.2018
comment
Попробовал, эта ошибка возникла: i.imgur.com/slZtKT5.png, который является прогресс, потому что это другая ошибка! - person Pontiacks; 21.09.2018
comment
кстати, следует отметить, что в этом случае я передаю конфигурацию babel в качестве параметров babel- загрузчик - person Pontiacks; 21.09.2018
comment
@Pontiacks ​​Я добавил еще один excludes в конфигурацию, если вы хотите попробовать. - person loganfsmyth; 21.09.2018
comment
/@babel\b/ также следует исключить, по крайней мере, когда используется transform-runtime - person fabb; 13.01.2019
comment
Престижность для sourceType: "unambiguous", возможно, я не догадалась об этом через несколько дней. Что особенно озадачивает, так это то, что эта проблема появляется только после включения useBuiltins: "usage", а код CJS, который раньше просто работал, начинает давать сбой в этом и других случаях (я сам получил ES Modules may not assign module.exports or exports.*). - person DomQ; 12.07.2021