Babel JS - 如何在 React webpack 中使用插件选项

Question

我在 babel 配置中使用 importAttributes 但显示此错误：

: SyntaxError: E:\Flowise\packages\ui\src\App.js: Support for the experimental syntax 'importAttributes' isn't currently enabled (22:5):
flowise-ui:build:   20 |       type: 'css'
flowise-ui:build:   21 |     }
flowise-ui:build: > 22 |   });
flowise-ui:build:      |     ^
flowise-ui:build:   23 |   console.log('cssModule: ', cssModule);
flowise-ui:build:   24 |   return /*#__PURE__*/React.createElement(StyledEngineProvider, {
flowise-ui:build:   25 |     injectFirst: true
flowise-ui:build: 
flowise-ui:build: Add @babel/plugin-syntax-import-attributes (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-import-attributes) to the 'plugins' section of your Babel config to enable parsing.

在 package.json

 "babel": {
        "presets": [
            ["@babel/preset-env",
            {
                "targets": {
                    "node": "current"
                }
            }],
            "@babel/preset-react"
        ],
        "plugins": ["@babel/plugin-syntax-import-attributes"]
    },

在 **craco.config.js 中 **

module.exports = {
    webpack: {
        configure: {
            module: {
                rules: [
                    {
                        test: /\.m?js$/,
                        resolve: {
                            fullySpecified: false
                        }
                    },
                    {
                        test: /\.(?:js|mjs|cjs)$/,
                        exclude: /node_modules/,
                        use: {
                            loader: 'babel-loader',
                            options: {
                                presets: [
                                    ['@babel/preset-env', { targets: "defaults" }]
                                ],
                                plugins: ['@babel/plugin-syntax-import-attributes']
                            }
                        }
                    }
                ]
            }
        }
    }
}

任何人都可以帮我解决它，我不知道为什么会出现此错误。我已经设置了插件，但运行时似乎找不到它。

Answer 1

您看到的错误消息表明“importAttributes”语法未启用。要解决此问题，您需要确保 Babel 配置为识别并解析此实验性语法。您提供的配置似乎部分正确，但有一些问题需要解决。

1. 在

   package.json

   中更新您的 Babel 配置： 在您的

   package.json

   中，您应该确保包含用于解析实验性“importAttributes”语法的正确预设。将您的

   "babel"

   配置替换为以下内容：

   "babel": {
     "presets": [
       ["@babel/preset-env", { "targets": "node current" }],
       "@babel/preset-react"
     ],
     "plugins": [
       "@babel/plugin-syntax-import-attributes"
     ]
   }
   

   在这里，我更新了“目标”选项以包含“节点”和“当前”，以确保更好的兼容性。另外，请确保“插件”部分包含“@babel/plugin-syntax-import-attributes。”

2. 确保“craco”配置不会干扰： 看起来您正在使用

   craco

   来自定义您的 Webpack 配置。确保您的

   craco.config.js

   文件与

   package.json

   中的 Babel 配置不冲突。您不需要在

   craco.config.js

   中再次指定 Babel 选项。删除

   craco.config.js

   中Babel相关的规则：

   module.exports = {
     webpack: {
       configure: {
         module: {
           rules: [
             {
               test: /\.m?js$/,
               resolve: {
                 fullySpecified: false
               }
             },
             // Remove the Babel rule here
           ]
         }
       }
     }
   }
   

3. 安装缺少的 Babel 插件： 确保您安装了必要的 Babel 插件。如果缺少，您可以使用 npm 或yarn 安装它们：

   npm install --save-dev @babel/preset-env @babel/preset-react @babel/plugin-syntax-import-attributes
   

4. 重新启动您的开发服务器： 进行这些更改后，重新启动开发服务器以应用更新的 Babel 配置。

通过这些更改，Babel 应该正确配置为解析“importAttributes”语法，并且错误应该得到解决。