pnpm 下， taro-ui 模板无 hoist 无法编译（幽灵依赖在哪里？）

[ztl8702]

复现步骤

1. npx @tarojs/cli init

    ? 请输入项目名称！ new
    ? 请输入项目介绍 
    ? 请选择框架 React
    ? 是否需要使用 TypeScript ？ Yes
    ? 请选择 CSS 预处理器（Sass/Less/Stylus） Sass
    ? 请选择编译工具 Webpack5
    ? 请选择包管理工具 pnpm // 重点
    ? 请选择模板源 Github（最新）
    ✔ 拉取远程模板仓库成功！
    ? 请选择模板 taro-ui（使用 taro-ui 的模板）// 重点
   

2. 在仓库根目录下创建 .npmrc：

   hoist=false
   

   在 pnpm中，hoist=false 会让幽灵依赖暴露出来。

3. pnpm install

4. pnpm build:weapp

预期结果：编译成功

实际结果:

Error: Cannot find module '@babel/traverse'
Require stack:
- /workspaces/taro-new/new2/node_modules/.pnpm/@[email protected]/node_modules/@tarojs/helper/dist/utils.js
- /workspaces/taro-new/new2/node_modules/.pnpm/@[email protected]/node_modules/@tarojs/helper/dist/npm.js
...

完整错误：https://gist.github.com/ztl8702/5d9b0652d9a692b68f08a86694c2c82c

其他信息

在我运行@tarojs/cli init时，应该拉的是这个模板： https://github.com/NervJS/taro-project-templates/tree/v3.5/taro-ui

[ztl8702]

尝试第一步：

上述错误说明，@tarojs/helper 的存在幽灵依赖@babel/traverse。 看了一下 https://unpkg.com/@tarojs/[email protected]/package.json 确实没有 @babel/traverse

用 pnpm packageExtensions 对 package.json 进行魔改:

  "pnpm": {
    "packageExtensions": {
      "@tarojs/helper": {
        "dependencies": {
          "@babel/traverse": "*"
        }
      }
    }
  }

pnpm install 后，再次 pnpm run build:weapp

这次遇到 '@tarojs/taro-loader' 缺失。https://gist.github.com/ztl8702/f0055f968fea45a6e39cc4d1be78ff0f

[ztl8702]

这次遇到 '@tarojs/taro-loader' 缺失。https://gist.github.com/ztl8702/f0055f968fea45a6e39cc4d1be78ff0f

这就很蹊跷。 https://unpkg.com/@tarojs/[email protected]/package.json 里面明明有 @tarojs/taro-loader

[ztl8702]

这就很蹊跷。 https://unpkg.com/@tarojs/[email protected]/package.json 里面明明有 @tarojs/taro-loader

是当前包（package.json）幽灵依赖了 @tarojs/taro-loader

pnpm add --save-dev @tarojs/taro-loader

pnpm run build:weapp 编译成功。

[ztl8702]

结论

为了支持 pnpm hoist=false模式（姑且称为“无幽灵模式”？）下编译 taro 项目，需要如下改动：

1.@tarojs/taro-helper 需要增加依赖@babel/traverse。https://github.com/NervJS/taro/issues/13144 2. 本仓库的模板需要增加依赖 @tarojs/taro-loader

[ztl8702]

Example, 可用的模板：https://github.com/ztl8702/taro-project-templates-92/tree/69141c18a11e35871432e7d73906016d6fb89c6c