Gatsby Config 在 Javascript 文件中给出错误 ??操作员

Question

我正在尝试运行一个 Gatsby 站点，但是当我这样做时 npm run develop，我收到了这个错误：

> gatsby develop

 ERROR #10123  CONFIG

We encountered an error while trying to load your site's gatsby-config. Please fix the error x try again.



  Error: D:\Coding\web-blog\src\infra\feed.js:28
  description: post.intro ?? post.description,
                           ^

代码：

const item = {
                title: sanitizeTitle(post.title),
                description: post.intro ?? post.description,
                url: `${site.siteMetadata.siteUrl}/${post.slug}`,
                guid: `${site.siteMetadata.siteUrl}/${post.slug}`,
                categories: post.tags,
                author: site.siteMetadata.author,
                date: post.date,
            }

Javscript 中的 ?? 运算符是什么？是新的语言功能吗？

Answer 1

无效合并运算符（??）它是 ECMAScript 2020 的一项功能（see TC39 proposal). You can add it by modifying the babel configuration or by installing the gatsby-plugin-nullish-coalescing-operator 插件。

如果您选择第一个版本，请在项目的根目录中添加一个 .babelrc 并使用以下内容填充它：

{
  "plugins": [
    ["@babel/plugin-proposal-nullish-coalescing-operator"]
  ],
  "presets": [
    [
      "babel-preset-gatsby",
      {
        "targets": {
          "browsers": [">0.25%", "not dead"]
        }
      }
    ]
  ]
}

注意：您需要安装 @babel/plugin-proposal-nullish-coalescing-operator 依赖项。

What is this operator in Javascript?

nullish 合并运算符 (??)，如果左边是 null 或 undefined，则使用右边的值。 OR 运算符 (||) 之间的主要区别在于虚假值，在 ""、0 或 false 值（有更多虚假值，例如 -0、NaN 等，但这些是常见的）。所以：

description: post.intro ?? post.description,

只要post.intro存在，你就会使用，否则（如果post.intro是null或undefined），你就会使用post.description。

Answer 2

gatsby-config.js 文件和任何插件代码（或它需要的代码）在 Gatsby 加载它之前不会被 Babel 编译，所以你使用的任何语法都必须得到你使用的 Node.js 版本的支持已安装。它看起来像 the ?? operator is supported in Node.js 14+ 所以通过运行 node --version.

检查你的 Node 版本

我最喜欢的升级 Node 的方式（我猜你需要这样做）是 https://www.npmjs.com/package/n

Answer 3

添加依赖项以使用 ES2020 功能进行空合并。

npm install --save-dev babel-preset-gatsby
npm i gatsby-plugin-nullish-coalescing-operator @babel/core

添加具有以下配置的 .babelrc 文件：

{
    "plugins": [
      ["@babel/plugin-proposal-nullish-coalescing-operator"]
    ],
    "presets": [
      [
        "babel-preset-gatsby",
        {
          "targets": {
            "browsers": [">0.25%", "not dead"]
          }
        }
      ]
    ]
  }

确保你是运行节点 14.x 支持 ES2020 特性

Gatsby Config 在 Javascript 文件中给出错误 ??操作员

Gatsby Config gives error in Javascript file for ?? operator

javascript

gatsby

gatsby-plugin