uni-app + pnpm + monorepo 导入自定义依赖时,hbuilderx 打印不正常,console.log 永远只打印一个参数

发布于 1周前 作者 ionicwang 来自 Uni-App

uni-app + pnpm + monorepo 导入自定义依赖时,hbuilderx 打印不正常,console.log 永远只打印一个参数

操作步骤:

  • 复现地址: 复现地址
  • 先去 packages/app-handle-packet 下执行 npm install 安装依赖
  • 执行 npm run dev 编译外部 ts 文件
  • 去根目录下执行 pnpm install 安装依赖到 node_modules 下
  • 发现只能在 packages 包内部打印,在项目中引用无法打印

预期结果:

  • 外部的 packages 里有个包,定义了 fn1 fn2 两个函数,两个函数各打印了两个参数
  • 期望正常打印

实际结果:

  • 结果只打印一个参数
  • 我分析是因为 pnpm 的 symlink 机制,导致 hbuilderx 编译的时候,无法解析其真实路径,这一点可以在上面 hbx 的打印中看到,打印一个参数的时候,后面是没有文件指示的
  • 后来看 project/unpackage/dist/dev/app-plus/app-service.js 文件,这个可能是编译之后的压缩文件,怀疑是编译之后的文件注释里边标记的路径 hbx 不能解析,比如解析项目之外的文件解析不到

bug描述:


1 回复

在使用 uni-app + pnpm + monorepo 时,如果遇到 console.log 只打印一个参数的问题,可能是由于以下几个原因导致的。以下是一些可能的解决方案:

1. 检查 HBuilderX 的版本

确保你使用的是最新版本的 HBuilderX。旧版本可能存在一些已知的 bug,更新到最新版本可能会解决这个问题。

2. 检查 console.log 的使用方式

确保你在代码中正确使用了 console.log。例如:

console.log('param1', 'param2', 'param3');

3. 检查 pnpm 的依赖安装

由于你使用的是 pnpm,确保所有依赖都已正确安装,并且没有冲突。可以尝试删除 node_modulespnpm-lock.yaml,然后重新安装依赖:

rm -rf node_modules pnpm-lock.yaml
pnpm install

4. 检查 monorepo 的配置

确保 monorepo 的配置正确,特别是 workspace 的配置。检查 pnpm-workspace.yaml 文件,确保所有子包都正确配置。

5. 检查 uni-app 的配置

确保 uni-app 的配置正确,特别是 manifest.jsonpages.json 文件。检查是否有任何配置可能导致 console.log 行为异常。

6. 检查 HBuilderX 的控制台设置

在 HBuilderX 中,检查控制台的设置,确保没有启用任何过滤或限制输出的选项。

7. 尝试使用 console.infoconsole.debug

如果 console.log 仍然有问题,可以尝试使用 console.infoconsole.debug 来查看是否能够正常输出多个参数。

8. 检查自定义依赖的代码

如果问题出现在导入自定义依赖时,检查自定义依赖的代码,确保没有覆盖或修改 console.log 的行为。

9. 调试模式

尝试在调试模式下运行应用,查看是否有更多的信息输出。可以在 HBuilderX 中启用调试模式,或者使用浏览器的开发者工具进行调试。

10. 社区和官方文档

如果以上方法都无法解决问题,可以查阅 uni-apppnpm 的官方文档,或者在社区中寻求帮助。可能有其他开发者遇到过类似的问题,并且有解决方案。

示例代码

以下是一个简单的示例代码,确保 console.log 能够正常输出多个参数:

// main.js
import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

// App.vue
<template>
  <div>
    <button @click="logMessage">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    logMessage() {
      console.log('param1', 'param2', 'param3');
    }
  }
}
</script>
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!