盖茨比配置在Javascript文件中给出错误??操作符

Question

我正在尝试运行盖茨比网站，但当我做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:Codingweb-blogsrcinfrafeed.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 ?这是一个新的语言特性吗?

Answer 1

null合并运算符(??)是ECMAScript 2020的一个功能(参见TC39提案)。您可以通过修改babel配置或安装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中是什么?

空合并运算符(??)，如果左值为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版本支持。看起来??操作符在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"]
}
}
]
]
}

确保您正在运行Node 14。x支持ES2020特性