使用 lerna 管理项目打包成微信小程序目录层级异常

[monkeying-boy]

问题描述 场景：由于业务需求需要实现公司内部 uni 组件库，通过 lerna + yarn 进行项目管理，在 examples 目录下通过 vue create -p dcloudio/uni-preset-vue uni 命令创建 uni 测试项目，在 h5 使用没有任何问题，但是打包成 微信小程序 将 dist/dev/mp-weixin 放在微信小程序开发者工具打开会提示找不到引入的组件，而在 src 同级目录多了一个 packages 文件，该文件是引入的 ui 组件打包后的文件。

问题： 使用 lerna 管理将测试项目和 lerna 管理的项目进行关联后，打包微信小程序目录层级异常，导致微信小程序无法正确找到组件。（该问题只会出现在开发测试，如果该 ui 组件已经发到 npm，通过 yarn add xxx 安装组件后是没有问题的）

复现步骤 我将复现项目提交到 github，麻烦相关人员拉一下代码，直接运行 yarn build mp:weixin 即可。

[Lisheri]

ui组件库不提升即可, 在monorepo的package.json下的workspace中配置nohoist

[monkeying-boy]

@Lisheri 我在本地试了一下还是不行。我在 packages.json 中配置了 "nohoist": ["**/@demo-a"] ，打包后放在微信开发者工具中还是提示组件找不到。

@demo-a 为组件库的 packages.json 中的 name 。

[Lisheri]

@demo-a这个下面应该还有二级目录吧, 要用通配符哦, /@demo-a/,然后重新lerna bootstrap一次

[Lisheri]

可以在项目中的node_modules下面确认一下, 看看组件库是否确认已经拉取到了项目中,而不是提升到了monorepo的顶层

[Lisheri]

对了, 报错是报的不是绝对路径也不是相对路径吗？

[monkeying-boy]

@demo-a这个下面应该还有二级目录吧, 要用通配符哦, /@demo-a/,然后重新lerna bootstrap一次

我是在项目根目录的 package.json 中配置

"workspaces": {
    "packages": ["packages/*","examples/*"],
    "nohoist": ["**/@demo","**/@demo/**"]
  },

然后执行 lerna clean ，并将根目录的 node_modules 和 yarn.lock 文件全部删除。重新执行 yarn && lerna link && lerna bootstrap 。然后我发现 @demo 这个依赖依然在根目录的 node_modules 文件中。

关于报错 : 是因为打包微信小程序后的 @demo 缺少文件。

[Lisheri]

emmm, 那我们不是一个问题了, 我之前是ui组件没有安装到项目中, 而是提升到了monorepo的顶层

看你的截图应该是已经装到项目中了, 但是整个小程序如果在monorepo的顶层感觉有点问题, 小程序项目应该作为lerna的子模块吧？

我的结构是这样的~

[Lisheri]

然后项目是作为monorepo的子模块

[monkeying-boy]

emmm, 那我们不是一个问题了, 我之前是ui组件没有安装到项目中, 而是提升到了monorepo的顶层

看你的截图应该是已经装到项目中了, 但是整个小程序如果在monorepo的顶层感觉有点问题, 小程序项目应该作为lerna的子模块吧？

我的结构是这样的~

我这是作为一个 ui 库进行开发，然后 examples/uni 是方便为了开发测试。在 h5 环境是没有问题的，在打包微信小程序后就有问题，examples/uni 是通过 easycom 配置引入的。

微信小程序打包前:

微信小程序打包后:

奇怪的是为什么打包微信小程序就会多一个 packages 目录，而 packages 里面的内容就是我使用到的 ui 组件。但是这个目录不应该出现在这里，个人猜测应该是在 dist/dev/mp-weixin/node-modules/@demo/a 目录里面。因为在微信小程序环境中是引入 node-modules/xx ，而且在微信小程序环境中是无法正确引入这个生成的 packages 目录。

[ChaneyZhao]

同一个问题，你们那边有解决办法吗？

[monkeying-boy]

同一个问题，你们那边有解决办法吗？

目前我是单独将 example-uni 单独拎出来，然后在本地引入包来测试的

[savokiss]

可以试下关闭 symlinks

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.resolve.symlinks(false)
  }
}

https://cli.vuejs.org/guide/troubleshooting.html#running-installation-with-sudo-or-as-root