使用传播算子的克隆集在Gatsby中嵌套集合

Question

我注意到常规javascript应用程序和盖茨比应用中设置的类型对象的不一致行为。

在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"

为什么这些结果有所不同，以及如何使Gatsby应用中的集合表现得像常规集(正确克隆使用传播操作员(？

Answer 1

哇，很高兴找到！我喜欢这样的可再现问题。

问题源于盖茨比在loose模式下使用Babel(源代码(的使用。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' ]

或者您可以通过以前以根部创建.babelrc来为盖茨比提供自己的babel配置：

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
      }
    ]
  ]
}