Набор клонирования с использованием оператора распространения приводит к вложенному набору в Гэтсби

Question

Я заметил несогласованное поведение объекта типа Set в обычном приложении javascript и в приложении Gatsby.

В codesandbox.io создайте обычное приложение React и поместите эти строки где-то в начале:

const set = new Set(["A", "B", "C"])
const set2 = new Set([...set, "D"])
console.log(set2)

Консоль печатает:

Set {}
    0: "A"
    1: "B"
    2: "C"
    3: "D"

Затем создайте новое приложение Gatsby и вставьте тот же код. Консоль напечатает:

Set {}
    0: Set
        0: "A"
        1: "B"
        2: "C"
    1: "D"

Почему эти результаты отличаются и как заставить Set в приложении Gatsby вести себя как обычный Set (правильно клонировать с оператором распространения)?

Answer 1

Ух, хорошая находка! Я люблю такие легко воспроизводимые вопросы, как этот.

Проблема возникла из-за использования Гэтсби babel ( исходный код ) в режиме loose . TL; DR в свободном режиме заключается в том, что он может генерировать более быстрый код, но взамен менее совместимый с es6.

Если вы перейдете на Babel repl и включите es2015-loose на левой боковой панели, вы увидите, что ваш код будет преобразован следующим образом:

//original
const set = new Set(['a', 'b', 'c'])
const set2 = new Set([ ...set, 'd'])

//transformed
var set = new Set(['a', 'b', 'c']);
var set2 = new Set([].concat(set, ['d']));

Вы можете увидеть проблему здесь. [].concat(new Set(['a'])) не превратит набор в массив, поэтому мы получили набор [Set, 'd'].

---

Исправить это

Простой способ обойти это в вашем коде:

  const set = new Set(['a', 'b', 'c'])
  const set2 = new Set([ ...Array.from(set), 'd'])
  // Set[ 'a', 'b', 'c', 'd' ]

Или вы можете предоставить Gatsby свою собственную конфигурацию babel, создав .babelrc в корне для обычного:

touch .babelrc

# install new dependencies -- 
# they're probably already installed, 
# but I think it's better to be explicit
yarn add @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties babel-plugin-macros @babel/plugin-syntax-dynamic-import @babel/plugin-transform-runtime -D

И скопируйте конфигурацию по умолчанию Гэтсби, но с выключенным режимом loose:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "corejs": 2,
        "loose": false,
        "modules": false,
        "useBuiltIns": "usage",
        "targets": "> 0.25%, not dead"
      }
    ],
    [
      "@babel/preset-react",
      {
        "useBuiltIns": true,
        "pragma": "React.createElement",
        "development": true
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    "babel-plugin-macros",
    "@babel/plugin-syntax-dynamic-import",
    [
      "@babel/plugin-transform-runtime",
      {
        "helpers": true,
        "regenerator": true
      }
    ]
  ]
}