为 React Native 项目添加 ES7 装饰器支持

Question

我想让我的 React Native 应用程序使用 Decorators，但我该如何实现呢？

在 React 中，这很简单：

1. 我跑了yarn run eject
2. 我修改了webpack.config.*.js并添加了plugins: ['transform-decorators-legacy']

如何使用react-native 实现类似的效果？我通过 react-native CLI - react-native init AwesomeApp 实例化了我的项目。

但是，eject 命令不存在。

Answer 1

当您仅使用 React Native CLI 开发应用程序时，您无权访问配置文件，例如 webpack.config.js 或 eject 命令。

但是你可以通过相同的 Babel 插件添加decorators 支持，只需修改.babelrc 文件。请按照以下步骤操作：

1. 将插件安装到您的项目中（作为开发依赖项）：yarn add --dev babel-plugin-transform-decorators-legacy;
2. 在.babelrc 文件中声明插件："plugins": ["transform-decorators-legacy"];

现在，下次您启动 packager（或捆绑源代码）时，React Native 将能够解释您在 JavaScript 文件中使用的装饰器。

this article 中给出的示例正是我上面所描述的。

此外，您还可以查看Haul，这是一个使用webpack 创建 React Native 应用程序的工具。

祝你好运！