Taro: Taro 3 正式版测试通告

[yuche]

新特性：

• 同时支持 React/Vue/Nerv 三种框架
• 不限制语言、语法
• 更快的运行速度
• 更快的构建速度
• source-map 支持

特性详情：
https://juejin.im/post/5e4487b3e51d4527214ba6b1

文档：
https://taro-docs.jd.com/taro/docs/next/README

旧版本迁移指南：
https://taro-docs.jd.com/taro/docs/next/migration

如有问题可以可在 issue 下回复。

Beta 版本

相较于 Alpha 版，Beta 版主要添加了 H5 的支持。把 Taro 相关依赖（包括 babel-preset-taro 等）全部更新到 beta 之后，使用 NPM 安装 H5 端编译系统即可编译：

$ npm i -D @tarojs/webpack-runner@next

和小程序一样，Taro Next 的 H5 端相较于之前版本的 Taro 是一次彻底的重写：基础组件现在全部使用 Web Components 构建，路由系统也完全与前端框架解耦，因此在 H5 端 Taro 也实现了跨框架。但和小程序不同的是，Taro Next H5 端并没有那么长时间的内部测试，还有一些内容需要完善。

Beta 更新详情：
https://gist.github.com/yuche/dcebd9a2a4e95b1c4b60d8eddb5b75e0

[WangShuXian6]

next 非常不错，项目里只需要加几个依赖，把

import Taro, { useEffect, useLayoutEffect, useReducer, useState, useContext, useRef, useCallback, useMemo, useRouter, useScope, useTabItemTap, useResize, useReachBottom, usePullDownRefresh, useDidHide, useDidShow, usePageScroll } from '@tarojs/taro'

换成

import React, { Component, useEffect, useLayoutEffect, useReducer, useState, useContext, useRef, useCallback, useMemo, } from 'react'
import Taro, { Current, useRouter, useScope, useTabItemTap, useResize, useReachBottom, usePullDownRefresh, useDidHide, useDidShow, usePageScroll } from '@tarojs/taro'

就可以完成迁移，其他代码都不用动，已经用在正式项目上了

1

在支付宝端【测试了淘宝端,其他端未测试】
useScope 的使用会导致报错，页面空白:

useScope()会导致如下报错

The above error occurred in the <Index> component:
    in Index
    in root
    in Unknown (created by AppWrapper)
    in App (created by AppWrapper)
    in AppWrapper

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.


TypeError: Object(...) is not a function
    at Index (index.js:79)
    at renderWithHooks (vendors.js:5386)
    at mountIndeterminateComponent (vendors.js:5660)
    at beginWork$1 (vendors.js:5962)
    at Object.invokeGuardedCallbackImpl (vendors.js:6192)
    at invokeGuardedCallback (vendors.js:6273)
    at beginWork$$1 (vendors.js:6994)
    at performUnitOfWork (vendors.js:6798)
    at workLoopSync (vendors.js:6794)
    at performSyncWorkOnRoot (vendors.js:6733)

import React, { Component, useEffect, useLayoutEffect, useReducer, useState, useContext, useRef, useCallback, useMemo, } from 'react'
import Taro, { Current, useRouter, useScope, useTabItemTap, useResize, useReachBottom, usePullDownRefresh, useDidHide, useDidShow, usePageScroll } from '@tarojs/taro'
// import { useSelector }  from 'react-redux'
import { View, Image, Text, ScrollView } from '@tarojs/components'
import './index.less'


// type Definition
type OwnProps = {

};

export default function Index({ }: OwnProps) {
    const scope = useScope() // 等同于页面为类时的 this.$scope
    return (
        <ScrollView
            className='index__scrollview'
            scrollWithAnimation
        >

        </ScrollView>
    );
}

[WangShuXian6]

2

Current 模块可以正常引入和使用，但是开发工具会提示该模块没有被导出

提示如下

模块“"../../../../../../../Users/myAppnext/node_modules/_@[email protected]@@tarojs/taro/types"”没有导出的成员“Current”。ts(2305)

代码如下

import Taro, { Current } from '@tarojs/taro'

[yuche]

@WangShuXian6 目前 Typing 还没有跟上

[wittech]

引入taro-ui组件报错：
./node_modules/taro-ui/dist/weapp/index.js
Module not found: Can't resolve './style/index.scss' in '/Users/xxx/Downloads/my-taro/taro-form/node_modules/taro-ui/dist/weapp'

[yuche]

@wittech Taro UI 还没有发适配 Next 的版本

[yuche]

@WangShuXian6 https://github.com/NervJS/taro/commit/d46dceda3f2b15a8303e55a90ebea3de73eabd21

[wittech]

@yuche 请问预计什么时间发布适配版本呢？

[ariesjia]

@tarojs/taro-weapp
@tarojs/taro-tt
@tarojs/webpack-runner
@tarojs/taro-alipay

都没有3.0.0-alpha.2版呢

[yuche]

@ariesjia 这几个包不需要了

[yuche]

@wittech 这个你可以去 Taro UI 提 issue 问一下

[ariesjia]

@ariesjia 这几个包不需要了

谢谢，用next的cli init的的脚手架里面有这个几个包的依赖。

[yuche]

@ariesjia 哪个模板有

[ariesjia]

@yuche 刚才测试的是cloud

[HareInWeed]

v3.0.0-alpha.3 的默认模板在 windows 下无法正常编译，似乎是由于对 windows 下的路径处理不正常，会将 \ 处理为字符转义

yarn run v1.19.1
$ npm run build:weapp -- --watch

> [email protected] build:weapp D:\TEMP_WORKSPACE\taro-react-hook-form
> npx taro build --type weapp "--watch"

�👽 Taro v3.0.0-alpha

开始编译项目 taro-react-hook-form
生成  工具配置  dist/project.config.json

\ 正在编译...[BABEL] Note: The code generator has deoptimised the styling of D:\TEMP_WORKSPACE\taro-react-hook-form\node_modules\react-reconciler\cjs\react-reconciler.development.js as it exceeds the max of 500KB.
�🙅  编译失败败.

./src/app.tsx
Module not found: Can't resolve 'D:TEMP_WORKSPACE       aro-react-hook-formsrcapp.tsx' in 'D:\TEMP_WORKSPACE\taro-react-hook-form\src'


监听文件修改中...

[yuche]

@WangShuXian6 useScope 加了

[yuche]

@HareInWeed 你把 @tarojs/mini-runner 升级一下，确认 @tarojs/taro-loader 也是 alpha-3

[shenghanqin]

@yuche 嘻嘻，我提的 #5475 canvas问题，有空帮我看一下呗。我现在就剩下这个问题就可以把小程序给发布了，虽然我自己改npm包也可以，但还是寻思你那边改一下。感谢。

[yuche]

今晚会发 alpha.4 带上这个 issue 的修复 @shenghanqin

[blade254353074]

taro 3 默认不需要 .eslintrc 文件了吗?

[yuche]

taro 3 默认不需要 .eslintrc 文件了吗?

有的，现在改成了 .eslintrc.js

[blade254353074]

@yuche 我刚刚用 taro next 的 cli 创建了个 ts 项目，根目录没有 .eslintrc.js 所以就问了下

[blade254353074]

3-alpha3
在手动解决 taro-ui 的 scss 路径后可以编译成功，
但 taro-ui 会报如下错误：

[yuche]

3-alpha3
在手动解决 taro-ui 的 scss 路径后可以编译成功，
但 taro-ui 会报如下错误：

Taro UI 目前没有发布适配 Next 的版本，如果你实在想用，可以去 Taro UI 的 next 分支 src 目录复制一份代码到你的项目里，但这样的话你每次编译自己的项目的同时也要编译 Taro UI，会比较慢。

[Psli]

自定义 tabbar 的问题有解决的方法吗？

[yuche]

自定义 tabbar 的问题有解决的方法吗？

这个正在解决

[conkyliu]

配置文件config.js 有模板参考下吗

[XQDD]

Styled Component 编译的 class 找不到，需要另外的特殊配置吗？