我想使用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在我的项目根目录中的存在会神奇地使所有这些工作正常进行,但显然情况并非如此。
1条答案
按热度按时间epggiuax1#
CreateReactApp没有像您预期的那样直接考虑.babelrc文件。CreateReactApp有其内置的babel配置,因此package.json中的.babelrc和babel都将被忽略。
控制CreateReactApp的方法有两种以上。
一旦弹射出去,就回不去了
然后你可以把你的babel配置添加到package.json中,如下所示:
并且您的代码将如您所期望的那样工作。