迁移至 Taro 2.x

Taro 2.0 整体上与 1.0 是完全兼容的,迁移并不困难,本指南将指导你如何进行从 Taro 1.x 到 Taro 2.x 的迁移工作。

更新 Taro CLI 和依赖版本

你可以根据自己的实际情况选择升级全局的 Taro 版本或者仅为你的某一个项目升级。

全局 CLI 升级

如果你的 Taro CLI 以全局方式安装,并且你希望升级到 Taro 2.0 需要执行以下命令:

  1. # 使用 Taro 自己
  2. $ taro update self2.0.0
  3. # 如果你使用 MPM
  4. $ npm update -g @tarojs/cli@2.0.0
  5. # 如果你使用 Yarn
  6. $ yarn global upgrade @tarojs/cli@2.0.0

之后在你的项目目录里运行以下命令来升级依赖:

  1. $ taro update project 2.0.0

单独为某一个项目升级

这样做的好处是全局的 Taro 版本还是 1.x 的,多个项目间的依赖不冲突,其余项目依然可以用旧版本开发。如果你的项目里没有安装 Taro CLI,你需要先装一个:

  1. # 如果你使用 NPM
  2. $ npm install --save-dev @tarojs/cli@2.0.0
  3. # 如果你使用 Yarn
  4. $ yarn add -D @tarojs/cli@2.0.0

然后在你的项目目录里运行以下命令来升级依赖:

  1. # 如果你使用 NPM
  2. $ node ./node_modules/.bin/taro update project 2.0.0
  3. # 如果你使用 Yarn
  4. $ yarn taro update project 2.0.0

安装 @tarojs/mini-runner 依赖

Taro 2.0 新增了 @tarojs/mini-runner 作为小程序的编译依赖,所以你需要将它安装在你的项目里,运行:

  1. # 如果你使用 NPM
  2. $ npm install --save-dev @tarojs/mini-runner@2.0.0
  3. # 如果你使用 Yarn
  4. $ yarn add -D @tarojs/mini-runner@2.0.0

编译配置调整

Taro 2.0 对 CLI 的编译构建系统进行了重构,使用 Webpack 来实现编译构建,所以我们对部分编译配置做了优化调整。

  1. const config ={
  2. projectName:'taro-framework',
  3. date:'2019-11-2',
  4. designWidth:750,
  5. deviceRatio:{
  6. 640:2.34/2,
  7. 750:1,
  8. 828:1.81/2
  9. },
  10. sourceRoot:'src',
  11. outputRoot:'dist',
  12. // babel、csso、uglify 等配置从 plugins 配置中移出来
  13. babel:{
  14. sourceMap:true,
  15. presets:[['env',{ modules:false}]],,
  16. plugins:[
  17. 'transform-decorators-legacy',
  18. 'transform-class-properties',
  19. 'transform-object-rest-spread'
  20. ]
  21. },
  22. // 小程序配置从 weapp 改为 mini,可以删掉很多小配置
  23. mini:{
  24. webpackChain (chain, webpack){},
  25. cssLoaderOption:{},
  26. postcss:{
  27. pxtransform:{
  28. enable:true,
  29. config:{}
  30. },
  31. url:{
  32. enable:true,
  33. config:{
  34. limit:10240// 设定转换尺寸上限
  35. }
  36. }
  37. }
  38. },
  39. // 可以删掉很多小配置
  40. h5:{
  41. publicPath:'/',
  42. staticDirectory:'static',
  43. webpackChain (chain, webpack){},
  44. postcss:{
  45. autoprefixer:{
  46. enable:true,
  47. config:{
  48. browsers:[
  49. 'last 3 versions',
  50. 'Android >= 4.1',
  51. 'ios >= 8'
  52. ]
  53. }
  54. }
  55. }
  56. }
  57. }
  58. module.exports =function(merge){
  59. if(process.env.NODE_ENV ==='development'){
  60. return merge({}, config,require('./dev'))
  61. }
  62. return merge({}, config,require('./prod'))
  63. }

具体编译配置请参考 编译配置文档

异步编程调整

Taro 2.0 中开启 async functions 支持不再需要安装 @tarojs/async-await,而是直接通过 babel 插件来获得支持。

在项目根目录下安装包 babel-plugin-transform-runtimebabel-runtime

  1. # 如果你使用 NPM
  2. $ npm install --save-dev babel-plugin-transform-runtime
  3. $ npm install --save babel-runtime
  4. # 如果你使用 Yarn
  5. $ yarn add -D babel-plugin-transform-runtime
  6. $ yarn add babel-runtime

随后修改项目 babel 配置,配置插件 babel-plugin-transform-runtime

  1. babel:{
  2. sourceMap:true,
  3. presets:[['env',{ modules:false}]],
  4. plugins:[
  5. 'transform-decorators-legacy',
  6. 'transform-class-properties',
  7. 'transform-object-rest-spread',
  8. ['transform-runtime',{
  9. "helpers":false,
  10. "polyfill":false,
  11. "regenerator":true,
  12. "moduleName":'babel-runtime'
  13. }]
  14. ]
  15. }

注意:Taro RN 依赖升级到 0.59.9

在 2.0 中我们将 RN 端 React 依赖升级到 16.8.0,React Native 依赖升级到 0.59.9。主要原因:

  • Google 要求所有 Google Play 应用支持 64 位 so 库,而现有 RN 0.55.4 依无法支持 64 位库,为配合 64 位升级,Taro RN 端的 React Native 依赖需要同步升级
  • React 16.8.0 是第一个支持 Hook 的版本,React Native 从 0.59 版本开始支持 Hook,此前社区一直在呼吁对 RN 0.55.4 进行升级以直接支持 Hook 的写法

本次 RN 端属于无缝升级,原有的写法和配置均不变,如果使用 taro-native-shell 的,选择 0.59.9 分支即可;在原生应用集成 RN 的,需要自行升级 React Native 依赖到 0.59.9。