Taro迁移完成之后，总结了一些踩坑经验

背景

四月份的时候，尝试将老的移动端项目改造成多端。因为老项目使用的React框架，综合考量，保障当前业务开发的进度同时，进行项目迁移，所以最后选择了Taro框架。迁移成本会低一些，上手快一些。

上个月，也就是七月份，我们用一个月的时间实现了两个项目从原生小程序到Taro框架的迁移。这当中，因为几个「小水坑」，我们连着加了两周的班。我把其中几个比较难搞的问题，解决方案总结了下来。

Taro文档

Taro的官方文档写的挺详细的，不过感觉搜索功能不是特别顺手。我平时搜不到想要的词条，会在菜单里找找可能的页面，基本多刷刷文档，能找到想找的内容。

项目迁移

之前写过一篇项目迁移的文章——《「Taro开发」前端多端开发，Taro观赏指南》。文章中对于基本配置、采用的UI框架、路由处理等基础功能实现，本篇不再重复。

踩坑指示牌

这次的坑，新旧都有。原本以为解决的问题，其实没有完全解决，所以我把最终的实现方案做了总结。

小程序文件过大的问题

最开始用分包的方式，在开发者工具中提交代码提示文件体积过大。但是又没找到问题在哪，最后才用了方案B，设置环境变量 NODE_ENV 为 production 可以开启压缩。如下为项目命令：

代码语言：javascript复制

"scripts": {
  "build:weapp": "NODE_ENV=production taro build --type weapp",
  "dev:weapp": "npm run build:weapp -- --watch"
}

但是这样做会有个额外的问题，就是无法在用NODE_ENV区分环境。后来我采用的解决方案是

小程序端使用envVersion区分环境

代码语言：javascript复制

const env = wxConfig.envVersion;
// 小程序开发环境 release-正式 trial-体验 develop-开发
const baseUrl = env === 'release' ? requestUrl : devrequestUrl;

H5端则通过页面的域名区分环境

代码语言：javascript复制

let env = 'production';
if (NODE_ENV === 'production' && window.location) {
  if (window.location.origin.indexOf('//dev') !== -1) {
    env = 'dev';
  }
  if (window.location.origin.indexOf('//release') !== -1) {
    env = 'release';
  }
} else if (NODE_ENV === 'development') {
  env = 'dev';
}