微信 es6 转 es5 相关

背景

参照微信官方的 miniprogram-compat， 绝大部分用户的微信基础库版本已经兼容了 es6+ 特性，理应不需要进行转换，但一些小程序功能或因为历史遗留需要开启 "将 js 编译成 es5" 选项。

这使得 three.js 相关代码会出现异常（见 issue）， 所以需要将 three.js 相关代码排除到 babel 插件处理之外。

搭配 rollup-plugin-to-custom-chunk 插件使用

使用 @minisheep/rollup-plugin-to-custom-chunk 将 three.js 相关代码输出到独立 chunk 文件以方便排除。

在你的 vite 或 rollup 配置文件中添加以下插件:

import { toCustomChunkPlugin } from '@minisheep/rollup-plugin-to-custom-chunk';

export default {
  plugins: [
    toCustomChunkPlugin({
      'common/my-vendor': [
        '@minisheep/three-platform-adapter',
        '@minisheep/three-platform-adapter/wechat',
      ],
      'sub-pack-2/vendor': [
        'three',
        'three/examples/jsm/**',
        '@minisheep/three-platform-adapter/dist/three-override/jsm/**',
      ]
    })
  ]
}

将会把本项目适配器相关代码输出到 common/my-vendor.js 中， three.js 相关代码输出到 sub-pack-2/vendor.js 中。

如何让 babel 插件忽略 es6+ 到 es5 的转换

可通过设置 project.config.json 文件的 setting.babelSetting 字段进行排除，参见说明。

配置参考：

// project.config.json
{
  //...
  "setting": {
    "babelSetting": {
      "ignore": [
        //注意 worker 的输出目录也需要排除下
        'worker',
        'common/my-vendor.js',
        'sub-pack-2/vendor.js',
      ],
      "outputPath": ""
    },
  }
}

对于 uni-app 这类通过编译才输出 project.config.json 文件的情况可参考下面的插件代码：

export default {
  plugins: [
    {
      enforce: 'post',
      name: 'apply-babel-setting',
      generateBundle(options, bundles) {
        if (!bundles['project.config.json']) return null;
        const target = bundles['project.config.json'] as Rollup.OutputAsset;
        const data = JSON.parse(target.source as string);
        Object.assign(data.setting, {
          babelSetting: {
            ignore: [
              //注意 worker 的输出目录也需要排除下
              'worker',
              'common/my-vendor.js',
              'sub-pack-2/vendor.js',
            ],
            outputPath: ''
          }
        });

        target.source = JSON.stringify(data, null, 2);
      }
    }
  ]
}