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

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

相关平台

飞书小程序

使用框架: 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 选项,使该部分能够得到编译时发现会编译失败提示:
ModuleParseError: Module parse failed: Unexpected token (18:12)
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
|   }
| 
>   protected async getAxiosPromise(config: MiniProgramApiConfig) {
|     const sendConfig = await this.getSendConfig(config);
|

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

期望结果

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

实际结果

和期望结果相反

环境信息

👽 Taro v3.6.1

  Taro CLI 3.6.1 environment info:
    System:
      OS: macOS 12.5.1
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 14.19.0 - ~/.nvm/versions/node/v14.19.0/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v14.19.0/bin/yarn
      npm: 6.14.16 - ~/.nvm/versions/node/v14.19.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.1 => 3.6.1 
      @tarojs/components: 3.6.1 => 3.6.1 
      @tarojs/helper: 3.6.1 => 3.6.1 
      @tarojs/plugin-framework-react: 3.6.1 => 3.6.1 
      @tarojs/plugin-platform-alipay: 3.6.1 => 3.6.1 
      @tarojs/plugin-platform-h5: 3.6.1 => 3.6.1 
      @tarojs/plugin-platform-jd: 3.6.1 => 3.6.1 
      @tarojs/plugin-platform-qq: 3.6.1 => 3.6.1 
      @tarojs/plugin-platform-swan: 3.6.1 => 3.6.1 
      @tarojs/plugin-platform-tt: 3.6.1 => 3.6.1 
      @tarojs/plugin-platform-weapp: 3.6.1 => 3.6.1 
      @tarojs/react: 3.6.1 => 3.6.1 
      @tarojs/runtime: 3.6.1 => 3.6.1 
      @tarojs/shared: 3.6.1 => 3.6.1 
      @tarojs/taro: 3.6.1 => 3.6.1 
      @tarojs/webpack5-runner: 3.6.1 => 3.6.1 
      babel-preset-taro: 3.6.1 => 3.6.1 
      eslint-config-taro: 3.6.1 => 3.6.1 
      react: ^18.0.0 => 18.2.0
7vux5j2d

7vux5j2d1#

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

jgzswidk

jgzswidk2#

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

相关问题