钉钉小程序升级3.5问题

[ajuner]

相关平台

钉钉小程序

使用框架: React

复现步骤

3.4版本升级至3.5

期望结果

升级成功

实际结果

升级失败

环境信息

👽 Taro v3.5.0-beta.0

  Taro CLI 3.5.0-beta.0 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 16.14.0 - D:\Program Files\nodejs\node.EXE
      Yarn: 1.22.17 - C:\Users\caiju\AppData\Roaming\npm\yarn.CMD
      npm: 8.3.1 - D:\Program Files\nodejs\npm.CMD

---

补充信息

prebundle

1. 自定义cacheDir会出现第一次启动失败，第二次成功的问题，第一次cacheDir路径下只有prebundle、webpack-cache文件夹，没有remote文件夹。
2. prebundle的时候taro-ui中缺失OpenData组件导致扫描不通过，暂时exclude解决

运行时

3. \taro\packages\taro-alipay\src\runtime.ts 提示userAgent不存在，暂时exclude解决

4. 支付宝小程序不支持这种es6写法，在prebundle阶段先用swc转换成es5了 Qt = class extends Map{} new Qt()

5.目前卡在这一步，问题在编译后的taro.js中

[ajuner]

在custom-tab-bar下就能复现 新增taro-ui以及@tarojs/plugin-platform-alipay-dd插件

贴一下config

const path = require('path');
const fs = require('fs');
const swc = require('@swc/core');

const config = {
  compiler: {
    type: 'webpack5',
    prebundle: {
      enable: true,
      cacheDir: path.resolve(__dirname, '../cache'),
      exclude: ['@tarojs/plugin-platform-alipay-dd/dist/runtime', 'taro-ui'],
      esbuild: {
        plugins: [
          {
            name: 'esbuildResolve',
            setup(build) {
              build.onLoad({ filter: /node_modules/ }, async (args) => {
                const text = await fs.promises.readFile(args.path, 'utf8');
                const result = await swc.transform(text, {
                  jsc: {
                    target: 'es5',
                  },
                });
                return {
                  contents: result.code,
                };
              });
            },
          },
        ],
      },
    },
  },
  cache: {
    enable: true
  },
  projectName: 'custom-tabbar-react',
  date: '2022-2-22',
  designWidth: 750,
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2
  },
  sourceRoot: 'src',
  outputRoot: 'dist',
  plugins: [
    '@tarojs/plugin-platform-alipay-dd',
  ],
  defineConstants: {
  },
  copy: {
    patterns: [
    ],
    options: {
    }
  },
  framework: 'react',
  mini: {
    postcss: {
      pxtransform: {
        enable: true,
        config: {

        }
      },
      url: {
        enable: true,
        config: {
          limit: 1024 // 设定转换尺寸上限
        }
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  },
  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    postcss: {
      autoprefixer: {
        enable: true,
        config: {
        }
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  }
}

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'))
  }
  return merge({}, config, require('./prod'))
}

[ZakaryCode]

1、4 问题已修复，下一个 beta 版本可见

[ZakaryCode]

• [x] 1. 自定义cacheDir会出现第一次启动失败，第二次成功的问题，第一次cacheDir路径下只有prebundle、webpack-cache文件夹，没有remote文件夹。

• [ ] 2. prebundle的时候taro-ui中缺失OpenData组件导致扫描不通过，暂时exclude解决

• [x] 3. \taro\packages\taro-alipay\src\runtime.ts 提示userAgent不存在，暂时exclude解决

• [x] 4. 支付宝小程序不支持这种es6写法，在prebundle阶段先用swc转换成es5了

• [ ] 5.目前卡在这一步，问题在编译后的taro.js中

@Chen-jj

[jasonZHAOLIANG]

这个程序怎么运行

[ajuner]

m

[Chen-jj]

prebundle的时候taro-ui中缺失OpenData组件导致扫描不通过，暂时exclude解决

因为支付宝的确没有 open-data 这个组件，所以 taro 没有导出 OpenData。esbuild 这样报错也是有道理的。

@ZakaryCode 我们把错误处理完善一下，报错后还是能成功编译，建议把对应模块 external 咯。

[Chen-jj]

3. \taro\packages\taro-alipay\src\runtime.ts 提示userAgent不存在，暂时exclude解决

这是因为 taro-alipay 插件使用了 navigator 全局变量，被 Webpack ProvidePlugin 给替换成 @tarojs/runtime 里模拟的 navigator。实际上应该使用支付宝全局的 navigator。

不使用 prebundle 时没有问题是因为 taro-alipay 的相关代码是被 webpack loader 注入的，Webpack ProvidePlugin 不会替换 loader 注入的变量。

但预编译时 taro-alipay 的相关代码相当于 entry，会被替换。综上只能不对 taro-alipay 的相关代码进行预编译。

[Chen-jj]

目前卡在这一步，问题在编译后的taro.js中

我这边在 exclude 了 taro-ui 和 taro-alipay 之后最新的 taro v3.5 beta 就可以成功编译支付宝小程序了。可以升级后再试试。

[ajuner]

ok 我回归一下

[ajuner]

问题4好像还有其他问题

[Chen-jj]

问题4好像还有其他问题

@ajuner 请问复现步骤是？

[ajuner]

跟上面一样的，也是custom这个项目，之前的截图是production的，改成development模式显示是这个代码 能编译了，但是运行有错，好像是支付宝小程序不支持这么去写Map

[ajuner]

[Chen-jj]

3.4 也有类似问题 https://github.com/NervJS/taro/issues/12005

[ZakaryCode]

问题4好像还有其他问题

看起来并没有编译成 es5，当前这段代码的编译结果如下：

        EventSource = /*#__PURE__*/ function(Map1) {
            "use strict";
            _inherits(_class, Map1);
            var _super = _createSuper(_class);
            function _class() {
                _classCallCheck(this, _class);
                return _super.apply(this, arguments);
            }
            _createClass(_class, [
                {
                    key: "removeNode",
                    value: function removeNode(child) {
                        var sid = child.sid, uid = child.uid;
                        this.delete(sid);
                        if (uid !== sid && uid) this.delete(uid);
                    }
                },
                {
                    key: "removeNodeTree",
                    value: function removeNodeTree(child) {
                        var _this = this;
                        this.removeNode(child);
                        var childNodes = child.childNodes;
                        childNodes.forEach(function(node) {
                            return _this.removeNodeTree(node);
                        });
                    }
                }
            ]);
            return _class;
        }(_wrapNativeSuper(Map));
        eventSource = new EventSource();

并不会报错

[ZakaryCode]

可以移除这些配置，升级到新版试试

[ajuner]

把prebundle关了就能编译过了

[ajuner]

这一块是esbuild扫的时候没有被转成es5导致的吗

[Chen-jj]

这一块是esbuild扫的时候没有被转成es5导致的吗

@ajuner 最新的 Beta 参考了你的意见使用 swc 处理了预编译的依赖代码的：https://github.com/NervJS/taro/blob/baf0c73adb06fa055b51abeff409a97e194fccb5/packages/taro-webpack5-prebundle/src/prebundle/bundle.ts#L97

调试一下这里试试？

[ajuner]

es2015不行 你们可以么。。。

[ZakaryCode]

es2015不行 你们可以么。。。

es2015 确实不行，目前 alipay prebundle 默认开启 es5，没遇到什么问题 🤔

[ajuner]

es5的话我这有个webpack的错。。我再试一次

[ajuner]

这个问题，我没定位到

[ajuner]

好像是一些额外的方法没有在Taro对象中 以及比如 dd.getSystemInfoSync 这种方法也是undefined

[ajuner]

编译没问题了 但是有的方法没挂载上 还有一个是希望内部能支持esbuild扫的时候能识别.index的时候去自动加载环境的 index.dd.tsx index.alipay.tsx index.weapp.tsx这样

[Chen-jj]

但是有的方法没挂载上

这个问题支付宝、钉钉（已发 0.1.3）都修了

还有一个是希望内部能支持esbuild扫的时候能识别.index的时候去自动加载环境的 index.dd.tsx index.alipay.tsx index.weapp.tsx这样

依赖收集阶段，resolve 时自动推测多端后缀的问题我们再看看的

[Chen-jj]

还有一个是希望内部能支持esbuild扫的时候能识别.index的时候去自动加载环境的 index.dd.tsx index.alipay.tsx index.weapp.tsx这样

这点试了是 ok 的，如果还有问题可以提供下 demo

[ajuner]

还有个小问题，配置已经exclude:['taro-ui'] 我的一个内部npm包引用了taro-ui的某个组件，简单的编译了一下，没打包nodemodule，scanImport的时候没问题，esbuild bundle的时候还是会报没有OpenData的错 也只能先exclude这个库了了 有什么好的解决方案吗

[Chen-jj]

还有个小问题，配置已经exclude:['taro-ui'] 我的一个内部npm包引用了taro-ui的某个组件，简单的编译了一下，没打包nodemodule，scanImport的时候没问题，esbuild bundle的时候还是会报没有OpenData的错 也只能先exclude这个库了了 有什么好的解决方案吗

没太懂什么意思

[ajuner]

比如我的npm包test中有一行 import { AtModal, XXX } from 'taro-ui' 这样在bundle的时候会报错

[wotermelon]

问题4好像还有其他问题

3.5.10 还是有这个问题，编译到支付宝小程序时出现，怎么解决？