NervJS / taro

开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
https://docs.taro.zone/
Other
35.46k stars 4.78k forks source link

【微信小程序转换】require解析优化 #4126

Closed Qiyu8 closed 4 years ago

Qiyu8 commented 5 years ago

问题描述 微信小程序写法如下: const Moment = require('moment.js') var WxParse = require('components/wxParse/wxParse.js') (moment.js和wxParse.js都是用户自定义组件,微信编译器可以识别出来) 微信小程序转换为taro代码时require里面的路径被当成npm包安装,导致从转换后的taro代码转回微信小程序代码时报错。 复现步骤 [复现问题的步骤]

  1. 在微信小程序根目录执行 taro convert 2.打开taroconvert目录,执行yarn 3.执行yarn build:weapp 期望行为 taro代码成功转换为微信小程序代码

报错信息 image

系统信息

Taro v1.2 及以上版本已添加 taro info 命令,方便大家查看系统及依赖信息,运行该命令后将结果贴下面即可。

补充信息 taro解析这类变量声明时,因为require里面既不是相对路径也不是相对路径,所以当成npm包进行安装,自然就会转换报错。 解决方案:提取require中非正常路径,识别在src目录下是否存在,若存在则加入到config目录的alias中或者将非正常路径修改为相对路径。 方法1(推荐):非正常路径修改为相对路径 var WxParse = require('./components/wxParse/wxParse.js') 方法2:加入到config目录的index.js中,加入到alias中。 alias: { 'components': path.resolve(__dirname, '..', 'src/components') }

taro-bot[bot] commented 5 years ago

欢迎提交 Issue~

如果你提交的是 bug 报告,请务必遵循 Issue 模板的规范,尽量用简洁的语言描述你的问题,最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足,或者已经其他 issue 已经存在相关内容,你的 issue 有可能会被关闭。

Good luck and happy coding~

Qiyu8 commented 5 years ago

经过试验,如果在微信小程序的wxml文件中有如下代码: <import src="/components/templates/templates.wxml"/> 微信小程序编译器会自动将/识别为根目录,从而可以正常解析路径,而taro转换过程中不识别此路径,导致整个Page转换失败,如果实际项目中用到了大量类似代码,则转换率是非常低的。还望优化

yuche commented 5 years ago

现在还不能处理绝对路径,请一直使用相对路径

Qiyu8 commented 5 years ago

转换程序对图片的动态地址进行了错误的相对路径校验 如下微信小程序的写法: <image class="franchiseeCoo-adv-icon" src="{{cdnUrl + '/static/webapp/images/franchisee/coo-adv3.png'}}"></image>

taro convert 转换过程中会报错: 错误 图片不存在 static/webapp/images/franchisee/coo-adv3.png