uni-app + pnpm + monorepo 导入自定义依赖时,hbuilderx 打印不正常,console.log 永远只打印一个参数
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描述:
在使用 uni-app
+ pnpm
+ monorepo
时,如果遇到 console.log
只打印一个参数的问题,可能是由于以下几个原因导致的。以下是一些可能的解决方案:
1. 检查 HBuilderX 的版本
确保你使用的是最新版本的 HBuilderX。旧版本可能存在一些已知的 bug,更新到最新版本可能会解决这个问题。
2. 检查 console.log
的使用方式
确保你在代码中正确使用了 console.log
。例如:
console.log('param1', 'param2', 'param3');
3. 检查 pnpm
的依赖安装
由于你使用的是 pnpm
,确保所有依赖都已正确安装,并且没有冲突。可以尝试删除 node_modules
和 pnpm-lock.yaml
,然后重新安装依赖:
rm -rf node_modules pnpm-lock.yaml
pnpm install
4. 检查 monorepo
的配置
确保 monorepo
的配置正确,特别是 workspace
的配置。检查 pnpm-workspace.yaml
文件,确保所有子包都正确配置。
5. 检查 uni-app
的配置
确保 uni-app
的配置正确,特别是 manifest.json
和 pages.json
文件。检查是否有任何配置可能导致 console.log
行为异常。
6. 检查 HBuilderX 的控制台设置
在 HBuilderX 中,检查控制台的设置,确保没有启用任何过滤或限制输出的选项。
7. 尝试使用 console.info
或 console.debug
如果 console.log
仍然有问题,可以尝试使用 console.info
或 console.debug
来查看是否能够正常输出多个参数。
8. 检查自定义依赖的代码
如果问题出现在导入自定义依赖时,检查自定义依赖的代码,确保没有覆盖或修改 console.log
的行为。
9. 调试模式
尝试在调试模式下运行应用,查看是否有更多的信息输出。可以在 HBuilderX 中启用调试模式,或者使用浏览器的开发者工具进行调试。
10. 社区和官方文档
如果以上方法都无法解决问题,可以查阅 uni-app
和 pnpm
的官方文档,或者在社区中寻求帮助。可能有其他开发者遇到过类似的问题,并且有解决方案。
示例代码
以下是一个简单的示例代码,确保 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>