GitXplorerGitXplorer
S

taro2-to-3

public
43 stars
11 forks
0 issues

Commits

List of commits on branch main.
Verified
2db965a140feac15d05dfc9cbf13dc214cac753f

Merge pull request #7 from tobyDing/readme

SSyMind committed 4 months ago
Unverified
cef887f4493e7c6c0b69432633984eeb928ebfdb

feat: update readme.md

committed 4 months ago
Verified
d6b9012cc48caa64906666415ac74c61defa1887

Update README.md

SSyMind committed 2 years ago
Verified
3e4e2f05299a51e7ec23979a6af97520e731c1bf

Update README.md

SSyMind committed 2 years ago
Unverified
b7d22614a5fb95bfb403b19c1225bb7b0f94f5fe

fix(bin/project): 加载配置文件时使用babel转义

SSyMind committed 3 years ago
Unverified
0c48d9bbb4368c2cde665523cbf2adb3f6ade179

:tada: 发布正式版本 0.0.4

SSyMind committed 4 years ago

README

The README file for this repository.

taro2-to-3

帮助你将 Taro 2.x 项目升级到 Taro 3.x 项目,基于 jscodeshift 构建。

该工具的处理规则参考 Taro 官方 迁移指南

动机

愿将 Taro 2.x 项目升级到 Taro 3.x 项目的过程变得轻松愉悦。

使用

在运行前,请先提交你的本地代码修改。

# 全局安装
npm i -g taro2-to-3
# or for yarn user
#  yarn global add taro2-to-3
taro2-to-3

已知问题

  1. Taro 内部 __taroRouterChange 事件参数变更,h5 中参数发生变化,小程序中不触发 https://github.com/NervJS/taro/issues/7903
  2. Taro 3.2.x 以上版本中 preloadData api 发生变更 https://github.com/NervJS/taro/commit/d2c4aaf5d9d755bc3ca40f9b449340b360c673d5
  3. 缺失对 this.$scope api 进行转换 https://github.com/NervJS/taro/issues/7795

处理流程

  1. 读取 Taro 项目中的编译配置文件 config/index.js.
    1. 读取其中的配置项 sourceRoot ,获取项目入口文件所在目录。
    2. 更新编译配置文件。
  2. 读取当前项目中的入口文件,如 {sourceRoot}/app.js
    1. 读取其中的配置项 pages ,获取项目中所有的页面路径。
    2. 更新入口文件。
  3. 执行以下脚本。
  4. 读取项目的 package.json 文件,检查并更新依赖。

脚本包括

taro-imports

在 Taro 2.x 中,所有面向应用开发者的 API 都在 @tarojs/taro 包中。

在 Taro 3.x 中,将 React 的 API 从 react 包中引入,其它的 API 仍然从 @tarojs/taro 引入。

- import Taro, { Component } from '@tarojs/taro';
+ import React, { Component } from 'react';
+ import Taro from '@tarojs/taro';

class Wallace extends Component {
    componentDidMount() {
        Taro.request().then(() => {});
    }
    render() {
        return <div />;
    }
}

page-config

在 Taro 2.x 中,页面的配置挂载在类组件的类属性或函数式的属性上,通过 AST 分析取出来,然后生成 JSON 文件。

在 Taro 3.x 中,使用 *.config.js ,该文件和页面文件在同一文件夹。

// foo.jsx
export default class Index extends Component {
-   config = {
-       navigationBarTitleText: '首页'
-   }
    render() {
        return null;
    }
}

+// foo.config.js
+export default config = {
+   navigationBarTitleText: '首页'
+};

router

在 Taro 2.x 中,通过 this.$router 访问当前组件/页面路由的详情。

在 Taro 3.x 等价的 API 是 @tarojs/taro 包中的 getCurrentInstance().router。

class Foo extends Component {
+   $instance = getCurrentInstance();
    componentWillMount() {
-       console.log(this.$router);
+       console.log(this.$instance.router)
    }
}

License

MIT