运行 使用 React-Native 的自定义 Babel 转换

Question

我需要使用 babel-plugin-transform-decorators-legacy 和 React-Native 来启用@decorators。如何配置 React-Native / Babel 来实现这一点？

这与我之前关于如何让@decorators 在 React-Native 中工作的问题有关：

Answer 1

您可以在项目的根级别安装插件，然后将插件添加到 node_modules/react-native/packager/react-packager/.babelrc

中的 .babelrc

使用@decorators 解决的问题是，如果您在应用程序的团队中工作，每个开发人员都需要对 .babelrc 进行更改，因为 node_modules 不应签入源代码。

Answer 2

截至 2016 年 1 月，您只需在 index.ios.js 和 index.android.js 附近创建一个 .babelrc 文件，如下所示：

{
  "plugins": [
    "transform-decorators"
  ]
}

Answer 3

您必须将它添加到您的 node_modules 文件夹中的 react native 文件夹中的 .babelrc 中。

这个文件： react-native/packager/react-packager/.babelrc.

放在语法-class-属性之前。

您似乎还需要根级别的 .babelrc，如下所示。

    {
      "plugins": [
        "transform-decorators"
      ]
    }

Answer 4

使用官方 Babel 预设

安装官方Babel presets for React Native applications:

npm i babel-preset-react-native --save-dev

编辑您的.babelrc：

{
  "presets": ["react-native"]
}

之前的 RN v21.0：从 react-native 扩展原始的 .babelrc

为避免操作 node_modules 目录中的文件，您应该 extend 原始 .babelrc。

通过保持你的依赖关系干净，升级或共享项目不会有任何问题。

{
    "extends": "react-native/packager/react-packager/.babelrc",
}