fix(babel-preset-taro): fix #9659

[Sociosarbis]

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

集成@vue/babel-preset-jsx和@vue/babel-plugin-jsx，增加vueJsx参数来对配置两个preset和plugin

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

• 错误修复(Bugfix) issue id #
• 新功能(Feature)
• 代码重构(Refactor)
• TypeScript 类型定义修改(Typings)
• 文档修改(Docs)
• 代码风格更新(Code style update)
• 其他，请描述(Other, please describe):

这个 PR 涉及以下平台:

• 所有小程序
• 微信小程序
• 支付宝小程序
• 百度小程序
• 字节跳动小程序
• QQ 轻应用
• 京东小程序
• 快应用平台（QuickApp）
• Web 平台（H5）
• 移动端（React-Native）

[Chen-jj]

@Sociosarbis

Hello～PR 目前还有点问题，会导致 #7335 复现，麻烦修改一下哈。

另外，如果能在 babel-preset-taro 里直接集成 @vue/babel-plugin-jsx 就更好了～期待你的修改～

[Sociosarbis]

已根据建议进行修改。
一开始是理解错了，babel的test是会带上import时的request query，但最后发现test的输入只是实际的文件名。😥

[b2nil]

// https://github.com/NervJS/taro/pull/9660/files#diff-4b9fa15435482f1e950a9f332ee21ffc812b417191a7302bab115cf0fb3d610dR34-R36
  if (isVue || isVue3) {
    plugins.push([require('@vue/babel-plugin-jsx')])
  }

直接集成 @vue/babel-plugin-jsx 的话，是否可以在 babel-preset-taro 参数中增加一个 vueJsxOptions 参数，让用户根据需要自行设置 @vue/babel-plugin-jsx 的选项。

例如：

// babel.config.js
module.exports = {
  presets: [
    ['taro', {
      framework: 'vue3',
      ts: true,
      vueJsxOptions: {
          optimize: true,
          enableObjectSlots: false
      }
    }]
  ]
}

另外， @vue/babel-plugin-jsx 兼容 vue 2.0 吗？

[Sociosarbis]

// https://github.com/NervJS/taro/pull/9660/files#diff-4b9fa15435482f1e950a9f332ee21ffc812b417191a7302bab115cf0fb3d610dR34-R36
  if (isVue || isVue3) {
    plugins.push([require('@vue/babel-plugin-jsx')])
  }

直接集成 @vue/babel-plugin-jsx 的话，是否可以在 babel-preset-taro 参数中增加一个 vueJsxOptions 参数，让用户根据需要自行设置 @vue/babel-plugin-jsx 的选项。

例如：

// babel.config.js
module.exports = {
  presets: [
    ['taro', {
      framework: 'vue3',
      ts: true,
      vueJsxOptions: {
          optimize: true,
          enableObjectSlots: false
      }
    }]
  ]
}

另外， @vue/babel-plugin-jsx 兼容 vue 2.0 吗？

1.选项没加是因为看到之前集成的preset或plugins都基本是默认配置的。我觉得加上大概也没什么问题
2. 多谢你提醒，我记混了这些babel的preset和plugin名字了，因为vue的preset-app应该是会对vue版本作判断的。我稍后会做这个处理

[Chen-jj]

@Sociosarbis 老哥有空解决一下冲突哈～

[Sociosarbis]

@Sociosarbis 老哥有空解决一下冲突哈～

刚开始修改的时候，好像基于一个比较旧的提交。以为冲突会由maintainer负责🤭，因为之前看到你有merge修改过来。初次试验force update PR，原来也是有效的，太好了

[Sociosarbis]

提示Merging can be performed automatically once the requested changes are addressed.

这里好像说merge可以自动进行，只要上面那个requested changes解决的话。

但不太明白requested changes如何解决，resolve conversation好像无效，是还需要reviewer 通过。假如有这么个机制，是不是通过以后就会自动merge。另外一种可能是由于之前的覆盖提交，导致上面的requested changes失效了。

还是说这个是无关的，而是由管理员决定什么时候去merge PR？
@Chen-jj

[Ttou]

@Sociosarbis 如果用 jsx 写的话，是不是就编译不成 h5 了，我发现 template 里的 view 会被编译成 taro-view-core，而 render 里的 view 不会变

[Sociosarbis]

@Sociosarbis 如果用 jsx 写的话，是不是就编译不成 h5 了，我发现 template 里的 view 会被编译成 taro-view-core，而 render 里的 view 不会变

这个是@tarojs/component和 @tarojs/webpack-runner相关的问题。前者没有为vue export相关组件，后者需要为@tarojs/component加个指向vue组件的alias。

[Chen-jj]

@Sociosarbis 老哥稳啊，非常感谢贡献～🙏

[Chen-jj]

@Sociosarbis 如果用 jsx 写的话，是不是就编译不成 h5 了，我发现 template 里的 view 会被编译成 taro-view-core，而 render 里的 view 不会变

@Ttou 兼容起来有点麻烦，可以先提个 issue 记录一下哈~

[Ttou]

@Chen-jj 我知道怎么解决了，修改 https://github.com/NervJS/taro/blob/next/packages/taro-components/h5/vue/index.js 这个文件，加上导出组件的代码，部分代码如下：

export const View = createComponent('taro-view')
export const Button = createComponent('taro-button')
export { Text, Image }

还要把项目的配置文件 config/index.js 的 h5 部分配置加上 webpack 配置：

const config = {
  h5:  {
    webpackChain(chain) {
      chain.resolve.alias.set(
        '@tarojs/components$',
        '@tarojs/components/dist-h5/vue/index.js'
      )
    }
  }
}

剩下的问题就是执行dev:h5命令， rpx 单位没有被转换

[zybieku]

@Sociosarbis 如果用 jsx 写的话，是不是就编译不成 h5 了，我发现 template 里的 view 会被编译成 taro-view-core，而 render 里的 view 不会变

这个是@tarojs/component和 @tarojs/webpack-runner相关的问题。前者没有为vue export相关组件，后者需要为@tarojs/component加个指向vue组件的alias。

解决了嘛，有什么好的解决方式嘛？

[Sociosarbis]

https://vuejs.org/v2/api/#Vue-component
https://v3.vuejs.org/api/application-api.html#component

H5环境可以新建一个文件，用component方法取得对应的全局组件后export。打包设置也可以顺便为这个文件加个别名什么的。