uni-app将字符串中的console编译成了__f__内置函数

uni-app将字符串中的console编译成了__f__内置函数

示例代码：

let code = `console.log(123)`
console.log(code)

操作步骤：

直接真机运行复现

预期结果：

直接打印原字符串 console.log(123)

实际结果：

f('log','at pages/index/index.vue:37',123)

bug描述：

编译时会把字符串中的console编译成uniapp内置的调试函数

预想结果：把console写在字符串中，想发送到webview中，在webview打印结果。

实际效果：uniapp把字符串中的console编译成了内置函数f('log','at pages/index/index.vue:37',123)

附件图片

Image 1

Image 2


更多关于uni-app将字符串中的console编译成了__f__内置函数的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

感谢反馈，我试了一下没能复现，请提供一下可以复现的完整 demo 代码或工程

更多关于uni-app将字符串中的console编译成了__f__内置函数的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，当你使用 console.log 或其他 console 方法时，编译工具（如 HBuilderX 或 webpack）可能会将 console 编译成 __f__ 内置函数。这是为了在开发环境中方便调试，而在生产环境中移除或替换这些调试信息，以避免不必要的性能开销或暴露敏感信息。

为什么会有这种编译行为？

  1. 调试与生产环境的区分：

    • 在开发环境中，console 是开发者常用的调试工具。
    • 在生产环境中，console 输出可能会影响性能，甚至暴露敏感信息，因此需要移除或替换。

  2. 跨平台兼容性：

    • uni-app 支持多端编译（如微信小程序、H5、App 等），不同平台对 console 的支持可能不同。
    • 通过将 console 编译成 __f__，可以统一处理不同平台的调试输出。

  3. 优化代码：

    • 在生产环境中，编译工具可能会移除 console 相关的代码，以减少代码体积。

__f__ 是什么？

__f__ 是 uni-app 内置的一个函数，用于处理 console 的输出。它的具体实现可能因平台而异，但主要功能是将 console 的输出转发到相应的调试工具或日志系统中。

如何处理这种情况？

  1. 开发环境保留 console：

    • 在开发环境中，console 会被保留，方便调试。
    • 如果你需要强制保留 console，可以在代码中使用条件判断，例如：
      if (process.env.NODE_ENV === 'development') {
  console.log('Debug info');
}

  2. 生产环境移除 console：

    • 在生产环境中，console 会被移除或替换成 __f__。
    • 如果你需要手动移除 console，可以使用工具如 babel-plugin-transform-remove-console：
      // babel.config.js
module.exports = {
  plugins: [
    ['transform-remove-console', { exclude: ['error', 'warn'] }]
  ]
};

  3. 自定义 __f__ 行为：

    • 如果需要自定义 __f__ 的行为，可以在项目中覆盖 __f__ 的实现。

示例代码

// 开发环境
console.log('This is a debug message');

// 生产环境编译后可能变成
__f__('log', 'This is a debug message');
回到顶部