Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(helper): 修复 esbuild resolve 静态资源问题 #13918

Merged
merged 1 commit into from
May 29, 2023
Merged

Conversation

ZakaryCode
Copy link
Contributor

这个 PR 做了什么? (简要描述所做更改)

生产环境下,esbuild.onResolve 解析静态资源会在 file namespace 中完成,需要在设置为外部依赖时解析路径。

这个 PR 是什么类型? (至少选择一个)

这个 PR 涉及以下平台:

  • 所有小程序
  • Web 平台(H5)
  • 移动端(React-Native)
  • 鸿蒙(harmony)

@ZakaryCode ZakaryCode added the A-PreBundle Area - 依赖预编译 label May 29, 2023
@ZakaryCode ZakaryCode added this to the 3.6.8 milestone May 29, 2023
@ZakaryCode ZakaryCode requested a review from yoyo837 May 29, 2023 06:16
@ZakaryCode ZakaryCode marked this pull request as ready for review May 29, 2023 06:16
@zhouLion
Copy link

#13456 我使用了这次的更新,目前我本地预编译,静态文件的引用路径不会有问题了。 @yoyo837 这个好像还没有上线 npm 吧

@zhouLion
Copy link

#13456 我使用了这次的更新,目前我本地预编译,静态文件的引用路径不会有问题了。 @yoyo837 这个好像还没有上线 npm 吧


但是单单修复这个还不够,看这里的 dev:weapp 模式打包的 dist/app.js 文件

image

会有 .wsxx 文件被 require 引入,查询了微信小程序文档,其不支持直接 require 一个 .wxss 文件,需要采取其他方法来导入和使用 wxss 样式,微信小程序有两种方式来导入 wxss 样式:

    1. 在 wxml 文件中使用 标签导入
      在需要使用的 wxml 文件中,添加:
<import src="file_path.wxss"/>
    1. 在 page 的 json 文件中指定 style 引用
      在 page 的 json 文件中,添加:
"style": "path/to/file.wxss"

可能引入此问题的文件:https://github.com/NervJS/taro/blob/next/packages/taro-webpack5-prebundle/src/utils/webpack.ts#L14-L16

@yoyo837
Copy link
Contributor

yoyo837 commented Jun 21, 2023

#13456 我使用了这次的更新,目前我本地预编译,静态文件的引用路径不会有问题了。 @yoyo837 这个好像还没有上线 npm 吧

image

包含在3.6.8里了

@zhouLion
Copy link

#13456 我使用了这次的更新,目前我本地预编译,静态文件的引用路径不会有问题了。 @yoyo837 这个好像还没有上线 npm 吧

但是单单修复这个还不够,看这里的 dev:weapp 模式打包的 dist/app.js 文件

image 会有 .wsxx 文件被 require 引入,查询了微信小程序文档,其不支持直接 `require` 一个 `.wxss` 文件,需要采取其他方法来导入和使用 `wxss` 样式,微信小程序有两种方式来导入 wxss 样式:
    1. 在 wxml 文件中使用 标签导入
      在需要使用的 wxml 文件中,添加:
<import src="file_path.wxss"/>
    1. 在 page 的 json 文件中指定 style 引用
      在 page 的 json 文件中,添加:
"style": "path/to/file.wxss"

可能引入此问题的文件:https://github.com/NervJS/taro/blob/next/packages/taro-webpack5-prebundle/src/utils/webpack.ts#L14-L16


使用 3.6.9-alpha.5 后,运行 dev:weapp 后,小程序依然无法启动

$ % taro info  
👽 Taro v3.6.8


  Taro CLI 3.6.8 environment info:
    System:
      OS: macOS 13.0
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v18.15.0/bin/yarn
      npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/components: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/helper: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/plugin-framework-vue3: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/plugin-html: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/plugin-platform-alipay: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/plugin-platform-h5: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/plugin-platform-jd: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/plugin-platform-qq: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/plugin-platform-swan: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/plugin-platform-tt: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/plugin-platform-weapp: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/runtime: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/shared: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/taro: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/webpack5-runner: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      babel-preset-taro: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      eslint-config-taro: 3.6.9-alpha.5 => 3.6.9-alpha.5 
image

@yoyo837
Copy link
Contributor

yoyo837 commented Jun 21, 2023

使用 nutui@4 确实有这个问题

@yoyo837
Copy link
Contributor

yoyo837 commented Jun 21, 2023

image

试试这个

@zhouLion
Copy link

使用 nutui@4 确实有这个问题

我这里提供一下我的必现场景,当引用的第三方包,其入口文件有 import 'path/to/file.(css|less|scss...)' 非 js 模块,就能复现这个问题

@hanbu97

This comment was marked as off-topic.

@AarNtyon
Copy link

#13456 我使用了这次的更新,目前我本地预编译,静态文件的引用路径不会有问题了。 @yoyo837 这个好像还没有上线 npm 吧

但是单单修复这个还不够,看这里的 dev:weapp 模式打包的 dist/app.js 文件
image
会有 .wsxx 文件被 require 引入,查询了微信小程序文档,其不支持直接 require 一个 .wxss 文件,需要采取其他方法来导入和使用 wxss 样式,微信小程序有两种方式来导入 wxss 样式:

    1. 在 wxml 文件中使用 标签导入
      在需要使用的 wxml 文件中,添加:
<import src="file_path.wxss"/>
    1. 在 page 的 json 文件中指定 style 引用
      在 page 的 json 文件中,添加:
"style": "path/to/file.wxss"

可能引入此问题的文件:https://github.com/NervJS/taro/blob/next/packages/taro-webpack5-prebundle/src/utils/webpack.ts#L14-L16

使用 3.6.9-alpha.5 后,运行 dev:weapp 后,小程序依然无法启动

$ % taro info  
👽 Taro v3.6.8


  Taro CLI 3.6.8 environment info:
    System:
      OS: macOS 13.0
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v18.15.0/bin/yarn
      npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/components: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/helper: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/plugin-framework-vue3: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/plugin-html: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/plugin-platform-alipay: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/plugin-platform-h5: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/plugin-platform-jd: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/plugin-platform-qq: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/plugin-platform-swan: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/plugin-platform-tt: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/plugin-platform-weapp: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/runtime: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/shared: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/taro: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      @tarojs/webpack5-runner: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      babel-preset-taro: 3.6.9-alpha.5 => 3.6.9-alpha.5 
      eslint-config-taro: 3.6.9-alpha.5 => 3.6.9-alpha.5 
image

很奇怪,我的当前版本是3.6.17,h5正常,但是小程序端这些文件的引用有问题
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-PreBundle Area - 依赖预编译
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants