tinajs 支持引入原生代码的 Components 吗？

[pqiaohaoq]

正在使用 tinajs，请问 tinajs 支持引入原生代码的 components 吗？如果支持，该怎么引入呢？

例如，我想引入 trtc-room components

[imyelo]

支持，和传统项目里的使用方法一样。

示例：https://github.com/tinajs/mina-webpack/blob/master/example/src/pages/home.mina#L7

如 trtc-room 这类没有发布到 npm 的传统组件，手动复制到项目里，然后引用不含后缀名的路径即可。

[qiaohao9]

trtc-room 是腾讯官方的 components，是 wxml wxss js，而不是单一文件 mina。

因此，我只能将其重构为 mina 吗？

引入方式

<config>
{
  "usingComponents": {
    "author": "../components/author.mina",
    "trtc-room": "../components/trtc-room/trtc-room"
  }
}
</config>

trtc-room 结构

components
├── author.mina
└── trtc-room
    ├── common
    ├── controller
    ├── model
    ├── static
    ├── template
    ├── trtc-room.js
    ├── trtc-room.json
    ├── trtc-room.wxml
    ├── trtc-room.wxss
    └── utils

tinajs 报错信息

[imyelo]

不需要重构成 .mina 文件，tina 直接支持文件分离的组件。

上面报错的原因是因为 /components/trtc-room/template/grid/grid.wxml 里引用 ./static/switch.png 等图片文件时的路径有问题，你试下将这些路径修改成 '../../static/switch.png' 或 '/components/trtc-room/static/switch.png' 或 require('../../static/switch.png') 的形式。

[qiaohao9]

thxs.

[qiaohao9]

在使用腾讯云第三方 TRTC-Room 时，tinajs 编译后缺失文件，请问该如何解决呢？

[imyelo]

看了下，TRTC-ROOM 最新的代码里又混用了相对路径和依赖包路径的写法。微信原生小程序将这类路径解析为相对路径，破坏了 Node.js Modules Resolving 的约定，给引用依赖包的场景埋下了坑，使人困扰，是欠考虑的设计。

如果你的项目是将 trtc-room 复制至项目目录中使用，可以直接修改这些引用的路径，添加前缀 ./：

- import UserController from 'controller/user-controller.js'
+ import UserController from './controller/user-controller.js'

这种形式含义更清晰，也建议向 trtr-room 的仓库提交 Issue / PR。

另外 tina (mina-webpack) 针对小程序组件 (Component) 的引用声明 兼容了微信不带 ./ 前缀的相对路径的写法，但除此以外遵循的都是 Node.js Modules Resolving 的规则。

[qiaohao9]

谢谢耐心解答。