Taro 升级3.6.2 报 _getEnv is not de

taro升级到3.6.2后，发现控制台编译过程没有出问题，但是一启动devServer，就页面白屏，报错

image.png

按照官方文档的升级步骤，以及taro的一系列依赖都同步到3.6.2版本了，删掉lock文件重装，重启 依旧不行

解决过程:

通过打断点，找到报错的大概位置

image.png

这个result里面有一个reject throw出了error，然后进到这个taro-ui的index.umd.js中发现

编译后的源码里有_getEnv

image.png

未编译前的源码里则是

image.png

应该是Taro团队将Taro.getEnv在编译时替换成了_getEnv

你特么的，好端端的替换尼玛呢，也就是说Taro这个编译替换，没兼容taro-ui

于是去taro-ui的github上搜，有临时的解决方案
https://github.com/NervJS/taro-ui/issues/1178

总结一下大佬的分析，原因是：
babel-plugin-transform-taroapi 做了两件事情：

1. 把 import Taro from '@tarojs/taro'转换成 import Taro, { xxx as _xxx } from '@tarojs/taro'

2. 没有确认是否都进行了第一步，就直接硬是把 Taro.xxx() 转换成 _xxx()。

3. taro 引入 taro-ui 时使用了 index.umd.js 作为入口文件，而 index.umd.js 中的 import Taro from '@tarojs/taro' 已经被编译成 umd 格式，导致插件找不到 import，所以对于taro-ui这个npm库来说，第一步无法完成，直接强行第二步，所以就报错了

所以解决方案是:

将使用的taro-ui的ndex.umd.js 改成使用index.esm.js，这样子就有import了，可以正常进行第一步

具体实现是

taro的config里面有个h5的配置，然后里面有个webpackChain，可以merge掉原先的默认webpack配置，
默认的mainFields是
mainFields: ['main:h5', 'browser', 'module', 'jsnext:main', 'main'],
我们只要把module提到browser前面，就能优先用module的
那么module对应的就是index.esm.js了

image.png

  h5: {
    webpackChain(chain, webpack) {
      chain.resolve.mainFields.clear();
      chain.merge({
        resolve: {
          mainFields: ['main:h5', 'module', 'browser', 'main', 'jsnext:main'],
        },
      })
  }
}