如何为 Babel 启用导入断言？

Question

在我的 React 应用程序中，我想使用导入断言：

import data from "./json/clients-m.json" assert { type: "json" }

但是，我收到以下错误：

./src/Clients.js 中的错误模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：SyntaxError：E：\ src \ Clients.js：对实验性语法“importAssertions”的支持不是“目前已启用。

将 @babel/plugin-syntax-import-assertions ( https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-import-assertions ) 添加到 Babel 配置的“插件”部分启用解析。

第 1:41 行：解析错误：此实验性语法需要启用解析器插件：“importAssertions”。(1:41)

我已经安装了这个插件：

npm install @babel/plugin-syntax-import-assertions --save-dev

然后我创建了.babelrc.json：

npm install @babel/plugin-syntax-import-assertions --save-dev

还将这个插件添加到package.json：

{
  "plugins": [
    "@babel/plugin-syntax-import-assertions"
  ]
}

但是，我不断收到此错误。

Answer 1

react-scripts默认情况下不加载 babel 配置。安装以下软件包

npm i -D customize-cra react-app-rewired

这些包允许您自定义react-scriptsbabel 的默认配置，以便您可以使用其他插件

现在，更改您的脚本package.json

"scripts": {
-    "start": "react-scripts start",
+    "start": "react-app-rewired start",
-    "build": "react-scripts build",
+    "build": "react-app-rewired build",
-    "test": "react-scripts test",
+    "test": "react-app-rewired test"
  }

config-overrides.js在应用程序的根目录创建一个包含以下内容的文件

"scripts": {
-    "start": "react-scripts start",
+    "start": "react-app-rewired start",
-    "build": "react-scripts build",
+    "build": "react-app-rewired build",
-    "test": "react-scripts test",
+    "test": "react-app-rewired test"
  }

.babelrc现在，在包的根目录下创建

{
  "plugins": [
    "@babel/plugin-syntax-import-assertions"
  ]
}

现在，你的 babel 配置将被正确加载。还有另一个库craco可以让您自定义反应脚本配置