@tarojs/webpack5-runner 中的 Babel 编译配置没有很好的处理内部引入的三方库中的 js 高阶语法

[beezen]

相关平台

H5

浏览器版本: chrome 使用框架: Vue 2

复现步骤

1、初始化Taro vue2 - less 项目 2、执行 npm run build:h5 3、生成物中存在 ES6 高阶语法没有被转译。

【补充】 这里的逻辑，为了编译速度，有很多过滤条件，但只处理 inversify 这个三方库，可能不够全。比如：query-string、split-on-first、stencil 这些库中都有 ES6 的 js。是不是需要考虑换一种处理方式？是否考虑各个子模块编译输出物都做 babel 编译？

// H5WebpackModule.js 
 /**
       * 要优先处理 css-loader 问题
       *
       * https://github.com/webpack-contrib/mini-css-extract-plugin/issues/471#issuecomment-750266195
       *
       * 若包含 @tarojs/components，则跳过 babel-loader 处理
       * 除了包含 taro 和 inversify 的第三方依赖均不经过 babel-loader 处理
       */
      rule.exclude = [filename =>
        /css-loader/.test(filename)
        || /@tarojs[\\/]components/.test(filename)
        || (/node_modules/.test(filename) && !(/taro/.test(filename) || /inversify/.test(filename)))]

期望结果

生成物中的 js 都按照配置文件的browserslist配置进行 babel 转译

实际结果

很多Taro框架内部引入的三方库，都没有被 babel 转译

环境信息

Taro CLI 3.6.19 environment info:
    System:
      OS: macOS 12.6
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
      Yarn: 1.22.19 - /usr/local/bin/yarn
      npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.19 => 3.6.19 
      @tarojs/components: 3.6.19 => 3.6.19 
      @tarojs/helper: 3.6.19 => 3.6.19 
      @tarojs/plugin-framework-vue2: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-alipay: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-h5: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-jd: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-qq: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-swan: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-tt: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-weapp: 3.6.19 => 3.6.19 
      @tarojs/runtime: 3.6.19 => 3.6.19 
      @tarojs/shared: 3.6.19 => 3.6.19 
      @tarojs/taro: 3.6.19 => 3.6.19 
      @tarojs/taro-loader: 3.6.19 => 3.6.19 
      @tarojs/webpack5-runner: 3.6.19 => 3.6.19 
      babel-preset-taro: 3.6.19 => 3.6.19 
      eslint-config-taro: 3.6.19 => 3.6.19 

[beezen]

或者也可以保持目前这样的模式，但可能需要添加一个检测机制，避免源码开发者在引入新的开源模块后，没有考虑到内部JS存在ES6的语法。

因为在业务开发侧很难判断到底是哪一个开源模块引入了ES6语法，只能一股脑儿的对所有js做babel编译处理，这样编译效率就大打折扣了。