如何让 babel 使用新的 threejs 版本答案

【问题标题】：How to get babel to work with new threejs versions如何让 babel 使用新的 threejs 版本
【发布时间】：2021-10-30 08:23:57
【问题描述】：

我无法将 threejs 更新到他们引入的新 es6 类版本，因为我在使用 babel 时遇到了问题。

我在扩展 Object3D 的地方有以下代码

import {
  Object3D,
} from "three";

type Props = {
  myProp:string
};

export default class MyBox extends Object3D {
  constructor(props: Props = {}) {
    super();
    console.log("HERE");
    this.init(props);
    console.log("Done");
  }
  init(props){
    // Do stuff
   }

现在这几乎在所有情况下都可以正常工作，除非我试图在 ios webview 中加载它。在那种情况下，我向下钻取并看到我的代码被转译为

function e() {
            var e,
                o = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
            return e = n.call(this) || this, console.log("HERE"), e.init(o), console.log("DOne"), e

在 ios webview 上哪个会抛出错误：

TypeError: 没有 |new| 就不能调用类构造函数

这对我来说意味着因为 Object3D 是一个类，它不能像转译版本想要的那样被调用。

{
  
  "presets": ["@babel/preset-flow", ["@babel/preset-env",
    {
      "targets": ">1%"
  }], "@babel/react"],
  "plugins": [
    "@babel/transform-runtime",
    "@babel/plugin-syntax-flow",
    "@babel/plugin-transform-flow-strip-types",
    "@babel/plugin-proposal-class-properties"]
}

我尝试过使用 targets 属性和其他包，但没有运气。我的理解是threejs没有被转译，而我的其余代码是。

编辑：我错了原因，实际上是由于 Meteor 构建系统错误检测这是否是遗留案例

【问题讨论】：

您可能希望将 ios 或 webview 标签添加到您的问题中以获得更好的可见性。这看起来不像是 Three.js 问题。
是的，我相信这比 threejs 更像是一个 babel 问题，因为 babel 正在做奇怪的事情。 Threejs 选择离开 es5 类，这让我很头疼。我找到了一种转换threejs的方法，以便让它工作，但它最终破坏了我的构建和circleci，因为转换threejs占用了太多内存。
所以我最终认为这是由于我们的构建系统（流星）迫使这个特定案例相信它是一个需要发生的旧版浏览器，而事实并非如此。我需要强制告诉构建系统将 webviews 标记为现代，我很好

标签： ios webview babeljs

【解决方案1】：

我的答案是：

import { setMinimumBrowserVersions } from "meteor/modern-browsers";
setMinimumBrowserVersions(
    {
      "mobileSafariUI/WKWebView": 10,
    },
    "classes"
  );

【讨论】：