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

问题描述

我正在尝试运行 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,}

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

解决方法

空合并运算符 (??) 它是 ECMAScript 2020 (see TC39 proposal) 的一项功能。您可以通过 modifying the babel configuration 或安装 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 依赖项。

Javascript 中的这个运算符是什么？

空合并运算符 (??)，如果 left 是 null 或 undefined，则使用正确的值。 OR 运算符 (||) 之间的主要区别在于假值，在 ""、0 或 false 值中使用时可能会导致一些错误（有更假的值，例如 -0、NaN 等，但这些都是常见的）。所以：

description: post.intro ?? post.description,

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

,

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

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

,

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

df["amount"] = df.apply(
    lambda row: 500 if row.amount > 500 else row.amount,axis=1
)

使用以下配置添加 npm install --save-dev babel-preset-gatsby npm i gatsby-plugin-nullish-coalescing-operator @babel/core 文件：

.babelrc

确保您运行的是支持 ES2020 功能的 Node 14.x