如何正确地在 React Native 项目中使用 Babel 转码

在 React Native 项目中，我们通常需要使用 Babel 来将 ES6/ES7 代码转换成 ES5 代码，以兼容更多的浏览器和设备。本文将介绍如何正确地在 React Native 项目中使用 Babel 转码，包括安装配置、使用插件和优化配置等方面。

安装配置

首先，我们需要在 React Native 项目中安装 Babel 相关的依赖包，包括 babel-core、babel-preset-es2015、babel-preset-react-native 和 babel-plugin-transform-runtime 等。可以使用 npm 命令进行安装：

npm install babel-core babel-preset-es2015 babel-preset-react-native babel-plugin-transform-runtime --save-dev

接着，我们需要在项目根目录下创建一个 .babelrc 文件，并在其中配置 Babel 的预设和插件等信息。例如，以下是一个基本的 .babelrc 配置文件：

{
  "presets": ["es2015", "react-native"],
  "plugins": ["transform-runtime"]
}

其中，presets 选项表示使用哪些预设，plugins 选项表示使用哪些插件。在这个例子中，我们使用了 es2015 和 react-native 两个预设，以及 transform-runtime 插件。

使用插件

除了基本的 Babel 配置，我们还可以使用一些插件来优化代码转换的效果。下面介绍几个常用的插件及其用法。

babel-plugin-transform-decorators-legacy

这个插件可以让我们在 React Native 项目中使用 ES7 的装饰器语法，例如 @observer、@action 等。我们可以按照以下步骤来使用它：

1. 安装插件：

npm install babel-plugin-transform-decorators-legacy --save-dev

1. 在 .babelrc 文件中添加插件：

{
  "presets": ["es2015", "react-native"],
  "plugins": ["transform-runtime", "transform-decorators-legacy"]
}

1. 在需要使用装饰器的文件中引入 babel-polyfill：

import 'babel-polyfill';

babel-plugin-transform-remove-console

这个插件可以让我们在生产环境中移除掉所有的 console 日志，以减小代码包的体积。我们可以按照以下步骤来使用它：

1. 安装插件：

npm install babel-plugin-transform-remove-console --save-dev

1. 在 .babelrc 文件中添加插件：

{
  "presets": ["es2015", "react-native"],
  "plugins": ["transform-runtime", "transform-remove-console"]
}

优化配置

除了使用插件来优化代码转换的效果外，我们还可以通过一些配置来进一步优化 Babel 的性能和效果。

exclude

在 .babelrc 文件中，我们可以使用 exclude 选项来排除一些不需要转换的文件或目录。例如：

{
  "presets": ["es2015", "react-native"],
  "plugins": ["transform-runtime"],
  "exclude": ["node_modules"]
}

这样，Babel 就不会对 node_modules 目录下的文件进行转换了，以加快转换的速度。

cacheDirectory

在 .babelrc 文件中，我们可以使用 cacheDirectory 选项来开启 Babel 的缓存功能，以减少重复编译的时间。例如：

{
  "presets": ["es2015", "react-native"],
  "plugins": ["transform-runtime"],
  "cacheDirectory": true
}

这样，Babel 就会将转换结果缓存在文件系统中，下次编译时可以直接读取缓存，以提高编译速度。

示例代码

最后，我们来看一个完整的示例代码，包括基本配置、插件使用和优化配置等方面。

.babelrc 文件：

{
  "presets": ["es2015", "react-native"],
  "plugins": ["transform-runtime", "transform-decorators-legacy", "transform-remove-console"],
  "exclude": ["node_modules"],
  "cacheDirectory": true
}

package.json 文件：

// www.javascriptcn.com code example
{
  "dependencies": {
    "react": "^16.8.6",
    "react-native": "^0.60.5"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react-native": "^4.0.0",
    "babel-polyfill": "^6.26.0"
  }
}

index.js 文件：

import 'babel-polyfill';
import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('MyApp', () => App);

这样，我们就可以正确地在 React Native 项目中使用 Babel 转码了。如果您有更好的优化方案或插件推荐，欢迎在评论区留言分享。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d2a576a941bf71345169df