React Native 0.60.3 babel-plugin-transform-remove-console 不工作答案

【问题标题】：React Native 0.60.3 babel-plugin-transform-remove-console not workingReact Native 0.60.3 babel-plugin-transform-remove-console 不工作
【发布时间】：2019-08-28 12:20:45
【问题描述】：

我正在尝试从我的 react-native 应用程序的输出中删除 console.log 输出，但是当我运行时

ENVFILE=.env.production react-native run-android --variant=release

和

adb logcat

我仍然看到我的应用程序的数据正在记录到控制台。

我使用了以下文档：https://facebook.github.io/react-native/docs/performance.html#using-consolelog-statements。

这是我的 .babelrc 文件：

{
  "presets": ["react-native"],
  "env": {
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}

我错过了什么？我在 react-native 0.60.3 并使用 "babel-plugin-transform-remove-console": "^6.9.4",

【问题讨论】：

您找到解决方案了吗？我也得到了这个，但是我正在使用babel.config.js
对不起，伙计，不得不继续前进。我一直在使用以下方法作为解决方法。这是一个糟糕的解决方法，但我仍然有我的工作。函数 noop () {} if (process.env.NODE_ENV === 'production') { console.log = noop;控制台.warn = noop;控制台.error = noop; }
谢谢！我最终在我的 babel.config.js 中这样做了，因为它可以导出一个函数：module.exports = function(api) { api.cache(true); if (process.env.NODE_ENV === 'production' || process.env.BABEL_ENV === 'production') { return { "presets": ["module:metro-react-native-babel-preset"], "plugins": ["react-native-paper/babel", "transform-remove-console"] } } else { return { "presets": ["module:metro-react-native-babel-preset"], } } } 对不起单行，在评论哈哈。似乎工作正常
添加为答案
@ThembelaniM 您可能已经继续前进，但接受一个有效的答案仍然是个好主意！ :) 谢谢

标签： reactjs react-native babeljs

【解决方案1】：

我有"@babel/core": "^7.5.5" 和"react-native": "^0.60.5"
React Native Documentation 中描述的方法对我不起作用。

经过多次尝试和错误并在 GitHub 上探索问题后，我得到了它的工作：

在 babel.config.js 中添加这个 -

module.exports = api => {
  const babelEnv = api.env();
  const plugins = [];
  //change to 'production' to check if this is working in 'development' mode
  if (babelEnv !== 'development') {
    plugins.push(['transform-remove-console', {exclude: ['error', 'warn']}]);
  }
  return {
    presets: ['module:metro-react-native-babel-preset'],
    plugins,
  };
};

使用npm start -- --reset-cache查看更改

更多信息请访问

【讨论】：

你救了我的命！
npm start -- --reset-cache 评论也很有帮助。直到我运行它，更改才可见。谢谢！
@Matt，我一直被这个问题困扰。运行 npm start -- --reset-cache 命令，它运行良好。谢谢！

【解决方案2】：

使用babel.config.js而不是.babelrc，似乎process.env.BABEL_ENV用于确定是否包含env.production下列出的配置。但是，process.env.BABEL_ENV 在构建期间设置为 undefined。

为了解决这个问题，我将返回一个不同的对象，具体取决于 process.env.BABEL_ENV 或 process.env.NODE_ENV 是否表示生产版本。

YMMV.

module.exports = function(api) {
  api.cache(true); // necessary
  if (process.env.NODE_ENV === 'production' || process.env.BABEL_ENV === 'production') {
    return {
      "presets": ["module:metro-react-native-babel-preset"],
      "plugins": ["react-native-paper/babel", "transform-remove-console"]
    }
  } else {
    return {
      "presets": ["module:metro-react-native-babel-preset"],
    }
  }
}

【讨论】：

【解决方案3】：

安装babel-plugin-transform-remove-console

yarn add babel-plugin-transform-remove-console -D

然后像这样在 babel.config.js 中添加后续代码

module.exports = function (api) {
  const babelEnv = api.env();
  api.cache(true);
  const plugins = [
    [];
  if (babelEnv === 'production') {
    plugins.push(['transform-remove-console', {exclude: ['error', 'warn']}]);
  }
  return {
    presets: ['babel-preset-expo'],
    plugins,
  };
};

然后运行这个命令

yarn start --reset-cache

注意：

这将删除 production 构建中的 console.log。如果您想在 development 中进行测试，您可以通过 development 而不是 production

【讨论】：

来自文档注意：这个函数在内部使用了上面提到的 api.cache 来确保 Babel 知道这个构建依赖于一个特定的 envName。您不应该将它与 api.cache.forever() 或 api.cache.never() 一起使用。