自定义组件库中,通过JSX封装了组件,通过私服引入项目中后,在编译H5时,没有将组件编译成H5组件

[jytx]

相关平台

H5

浏览器版本: Chrome 91
使用框架: Vue 2

复现步骤

1.通过JSX自定义组件,并将组件库发布到公司私服上去,通过rollup进行编译
2.在业务工程中通过npm进行安装
3.编译业务工程为H5

期望结果

将自定义组件库中的button组件编译成taro-button-core组件

实际结果

没有进行转换,编译后仍旧是button

环境信息

👽 Taro v3.0.11

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating

  Taro CLI 3.0.11 environment info:
    System:
      OS: macOS 10.14.5
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 12.18.4 - /usr/local/bin/node
      Yarn: 1.9.2 - /usr/local/bin/yarn
      npm: 6.14.8 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.0.11 => 3.0.11
      @tarojs/components: 3.0.11 => 3.0.11
      @tarojs/mini-runner: 3.0.11 => 3.0.11
      @tarojs/runtime: 3.0.11 => 3.0.11
      @tarojs/taro: 3.0.11 => 3.0.11
      @tarojs/webpack-runner: 3.0.11 => 3.0.11
      babel-preset-taro: 3.0.11 => 3.0.11
      eslint-config-taro: 3.0.11 => 3.0.11

[Chen-jj]

需要提供一下 demo

[eiinu]

遇到了相同的问题。

1、如果在项目中编写组件，开启 plugin-html，使用 <button>、<view> 等原生 HTML 标签，执行 dev:h5 后页面中显示的标签是 <taro-button-core> 和 <taro-view-core>，来源于 @tarojs/components。

2、如果将项目中的 Vue SFC 打包为 js 文件后，通过 npm 包方式引入到新的项目中，同样开启 plugin-html，此时这些引入的组件内的标签就会显示 <button>、<view>，是未经处理的 HTML 标签。

复现方式：
Taro init 初始化一个 NutUI4.0 模板，同时使用 button 与 nut-button，启动 H5

<template>
  <button></button>
  <nut-button></nut-button>
</template>

审查元素可以看到前者被转换为 Taro-button-core，后者内部使用的 button 没有被转换为 Taro 组件。

使用 React 没有这个问题，因为 Taro 的 Button 是单独引入的，不会和 HTML button 产生冲突。