React Native 0.77 Metro将移除JS日志，需替换console.log？求简便方法

核心说明 #

这个警告是指Metro调试控制台将不再显示原生JavaScript的console.log输出，但你完全不需要把所有console.log都替换掉：

• 原生平台的控制台（Android的Logcat、iOS的Xcode控制台）依然会正常显示这些日志；
• 只有在Metro的调试界面（比如Chrome DevTools、RN Debugger）里看不到console.log的内容了。

如果需要在Metro调试环境中查看日志，才需要改用React Native官方支持的日志方式，比如console.debug、console.warn、console.error，或者LogBox提供的日志方法。

简便替换方案 #

1. IDE全局批量替换 #

直接用IDE的全局替换功能（比如VS Code按Ctrl+Shift+H），把项目里的console.log(批量替换成console.debug(——开发环境下console.debug会被Metro正常转发到调试界面，生产环境下可以通过打包配置移除这类日志。

如果要区分环境，也可以替换成带条件判断的写法：

if (__DEV__) {
  console.debug('你的日志内容');
}

2. 自定义全局日志函数 #

写一个统一的日志工具函数，后续项目里都用这个函数替代console.log，方便后续统一修改：

// utils/logger.js
import { LogBox } from 'react-native';

export const log = (...args) => {
  if (__DEV__) {
    // 用console.debug或者LogBox.log都可以
    console.debug(...args);
    // LogBox.log(...args);
  }
};

使用时直接导入调用：log('用户点击了按钮')。

3. Babel插件自动转换 #

通过Babel插件在编译阶段自动转换console.log，不用手动修改代码。在babel.config.js中添加配置（需先安装对应的插件，比如babel-plugin-transform-replace）：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    process.env.NODE_ENV === 'development' && [
      'babel-plugin-transform-replace',
      {
        replacements: [
          {
            original: 'console.log',
            replacement: 'console.debug'
          }
        ]
      }
    ]
  ].filter(Boolean)
};

内容的提问来源于stack exchange，提问作者Tuqui