babel预设反应本机和高阶分量

时间:2018-08-03 08:38:50

标签: javascript react-native babeljs

我刚刚将项目从RN 53更新到了56,这意味着babel也已经从版本6更新到了7,这给我带来了一个我无法理解的问题。

似乎在函数内部扩展的类仅保留它们扩展的类,而不保留扩展。新的构造函数似乎正在运行。

问题由babel-preset-react-native@5.0.2

引起

为重现该问题,我尝试生成一个小示例,其中我在函数内创建并返回一个类

class A {
  a() {
    return 'a';
  }
}

const createB = () => {
  class B extends A {
    constructor() {
      super();
      this.c = 'c';
    }

    b() {
      return 'b';
    }
  }

  return B;
}

const CB = createB();

console.log('a: ', typeof new CB().a);
console.log('b: ', typeof new CB().b);
console.log('c: ', typeof new CB().c);

如果我以yarn babel-node --presets=react-native index.js new CB().b的身份运行,则永远不会被定义

a:  function
b:  undefined
c:  string

如果我改为在没有预设或@babel/preset-env的情况下运行它,则其行为将与我预期的一样。

a:  function
b:  function
c:  string

遇到过类似问题的人吗?我可以先加载react-native然后再加载@babel/preset-env来解决它,但这会导致使用类属性的模块产生其他一些问题,这意味着我需要在@babel/preset-env之前使用react-native

package.json

{
  "name": "err",
  "version": "1.0.0",
  "devDependencies": {
    "@babel/cli": "^7.0.0-beta.55",
    "@babel/core": "^7.0.0-beta.55",
    "@babel/node": "^7.0.0-beta.55",
    "@babel/preset-env": "^7.0.0-beta.55",
    "babel-preset-react-native": "^5.0.2"
  }
}

1 个答案:

答案 0 :(得分:-1)

当我升级到RN 56和babel-preset-react-native 5.02时遇到了类似的问题,然后我将babel-preset-react-native切换回了5.0.0,一切正常。