reactjs babel插件预处理器在React 18中不工作(带 typescript )

yhuiod9q  于 2023-02-18  发布在  React
关注(0)|答案(1)|浏览(128)

我想使用babel-plugin-preprocessor从我的React应用程序中删除console.log()调用。我的应用程序是使用create-react-app创建的,并且使用了Typescript。
我按照https://www.npmjs.com/package/babel-plugin-preprocessor的说明安装了插件:

npm install -D babel-plugin-preprocessor

我将文件babel.config.json添加到项目的根目录中,它包含以下内容:

{
"plugins" : [
["preprocessor", {
  "symbols": { "IS_BROWSER": false },
  "directives": { "DEBUG": false }
}]
  ]
  }

以上代码直接来自网站,但我将两个值设置为“false”而不是默认值“true”,因为我希望看到console.log行被删除。网站要求将以上代码放入“the babel configuration file”,我假设这意味着基于此babel页面将一个名为babel.config.json的文件添加到我的项目根目录中:https://babeljs.io/docs/en/configuration
然后将以下内容添加到项目中的 *.tsx文件:

// #if IS_BROWSER
console.log('Home.tsx IS_BROWSER is true');
// #else
console.log('Home.tsx IS_BROWSER is not true');

然后我用npm-start在本地主机上启动这个项目,但是两行都打印到了我的控制台上,我只希望打印第二行;我以为第一行会被删除。
我错过了什么?我只是假设babel.config.json在我的项目根目录中的存在会神奇地使所有这些工作正常进行,但显然情况并非如此。

epggiuax

epggiuax1#

CreateReactApp没有像您预期的那样直接考虑.babelrc文件。CreateReactApp有其内置的babel配置,因此package.json中的.babelrc和babel都将被忽略。
控制CreateReactApp的方法有两种以上。

  1. CreateReactApp原生命令npm run eject。此命令将内建配置解压缩到项目路径,然后您可以控制它。
  2. craco创建React应用程序配置覆盖,一个简单易懂的create-react-app配置层。Babel override

一旦弹射出去,就回不去了

然后你可以把你的babel配置添加到package.json中,如下所示:

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "preprocessor",
        {
          "symbols": {
            "IS_BROWSER": true
          },
          "directives": {
            "DEBUG": true
          }
        }
      ]
    ]
  },

并且您的代码将如您所期望的那样工作。

相关问题