taro pnpm monorepo 项目 打包异常(打包图片资源异常、treeshaking异常、配置mini.compile.include以后异常具体见下面描述)

6kkfgxo0  于 9个月前  发布在  其他
关注(0)|答案(2)|浏览(128)

相关平台

飞书小程序

使用框架: React

复现步骤

我使用pnpm 搭建了一个monorepo项目目录结构如下:
apps/myApp(小程序app)
packages/common-components(使用ts代码写的公共组件)

  1. 问题一:当我在myApp 中引用common-components的组件时,会把这个下面的所有组件都打包进去,不会做treeshaking。
  2. 问题二:当我在myApp 中引用common-components中使用图片的组件时,打包的时候不会把common-components中使用的图片打包在dist目录下,而是打包在和myApp同一个层级下面。
  3. 问题三:由于common-components下的组件是使用ts写的,我想开启mini.compile.include 选项,使该部分能够得到编译时发现会编译失败提示:
  1. ModuleParseError: Module parse failed: Unexpected token (18:12)
  2. You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
  3. | }
  4. |
  5. > protected async getAxiosPromise(config: MiniProgramApiConfig) {
  6. | const sendConfig = await this.getSendConfig(config);
  7. |

;相反如果我不开启mini.compile.include 选项,common-components下的ts代码倒是可以正常编译

期望结果

图片打包路径正常、有treeshaking、配置mini.compile.include 后可以正常编译

实际结果

和期望结果相反

环境信息

  1. 👽 Taro v3.6.1
  2. Taro CLI 3.6.1 environment info:
  3. System:
  4. OS: macOS 12.5.1
  5. Shell: 5.8.1 - /bin/zsh
  6. Binaries:
  7. Node: 14.19.0 - ~/.nvm/versions/node/v14.19.0/bin/node
  8. Yarn: 1.22.19 - ~/.nvm/versions/node/v14.19.0/bin/yarn
  9. npm: 6.14.16 - ~/.nvm/versions/node/v14.19.0/bin/npm
  10. npmPackages:
  11. @tarojs/cli: 3.6.1 => 3.6.1
  12. @tarojs/components: 3.6.1 => 3.6.1
  13. @tarojs/helper: 3.6.1 => 3.6.1
  14. @tarojs/plugin-framework-react: 3.6.1 => 3.6.1
  15. @tarojs/plugin-platform-alipay: 3.6.1 => 3.6.1
  16. @tarojs/plugin-platform-h5: 3.6.1 => 3.6.1
  17. @tarojs/plugin-platform-jd: 3.6.1 => 3.6.1
  18. @tarojs/plugin-platform-qq: 3.6.1 => 3.6.1
  19. @tarojs/plugin-platform-swan: 3.6.1 => 3.6.1
  20. @tarojs/plugin-platform-tt: 3.6.1 => 3.6.1
  21. @tarojs/plugin-platform-weapp: 3.6.1 => 3.6.1
  22. @tarojs/react: 3.6.1 => 3.6.1
  23. @tarojs/runtime: 3.6.1 => 3.6.1
  24. @tarojs/shared: 3.6.1 => 3.6.1
  25. @tarojs/taro: 3.6.1 => 3.6.1
  26. @tarojs/webpack5-runner: 3.6.1 => 3.6.1
  27. babel-preset-taro: 3.6.1 => 3.6.1
  28. eslint-config-taro: 3.6.1 => 3.6.1
  29. react: ^18.0.0 => 18.2.0
7vux5j2d

7vux5j2d1#

老版本用webpack4至少图片资源路径是正常的,新版本升级后用5就都不正常了

jgzswidk

jgzswidk2#

webpack 5 在资源模块有升级,可以看看官网的解决方法:https://webpack.docschina.org/guides/asset-modules#inlining-assets

相关问题