简介
metro-react-native-babel-transformer 是一个基于 Babel 的转换器，它可以将 React Native 项目中使用的 ES6/7/8 语法和 JSX 语法转换为兼容的 ES5 代码。该转换器通常与 Metro bundler 一起使用，用于打包 React Native 应用程序的 JavaScript 代码。
安装
在 React Native 项目的根目录下执行以下命令安装 metro-react-native-babel-transformer：
npm install --save-dev metro-react-native-babel-transformer
配置
在项目根目录下创建一个名为 metro.config.js 的文件，并将以下内容添加到该文件中：
-- -------------------- ---- -------
----- - ---------------- - - ------------------------
-------------- - ------ -- -- -
----- -
--------- - ---------- --
- - ----- -------------------
------ -
------------ -
--------------------- --------------------------------------------------------
--
--------- -
----------- --------------- ----- ------- -- -- --- ---
--
--
-----这个配置文件告诉 Metro bundler 使用 metro-react-native-babel-transformer 进行代码转换，并添加了对 JSX 文件的支持。
使用
在运行 Metro bundler 时，使用 --transformer 参数指定要使用的转换器：
npx react-native start --transformer node_modules/metro-react-native-babel-transformer/index.js
或者，在 package.json 中添加以下配置：
{
"scripts": {
"start": "react-native start --transformer node_modules/metro-react-native-babel-transformer/index.js"
}
}然后，可以通过 npm start 命令启动 Metro bundler。
示例
下面是一个使用了 async/await 和箭头函数的示例代码：
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
}
fetchData();经过转换后的代码如下所示：
-- -------------------- ---- -------
---- --------
-------- --------------------------- - ------ --- -- -------------- - --- - - ---------- --- -- -
-------- --------------------- - ------ -------- -- - --- --- - -------------- ----------- ------ --- ---------------- --------- ------- - -------- --------- ---- - --- - --- ---- - -------------- --- ----- - ----------- - ----- ------- - -------------- ------- - -- ----------- - --------------- - ---- - ------ ------------------------------------ ------- - ------------ ------- -- -------- ----- - ------------- ----- --- - - ------ ------------- --- -- - -- ---
--- --------- -
-------------
-------- -- -
--- ---- - ------------------
-------------
-------------------------------- --------- -
--- --------- -----
------ -------------------------------- ------------------ -
----- --- -
------ -------------- - -------------- -
---- --
------------- - --
------ --------------------------------------
---- --
-------- - --------------
------------- - --
------ ----------------
---- --
---- - --------------
------------------
---- --
---- ------
------ ----------------
-
-
-- ---------
----
------ -------- ----------- -
------ ---------------- -----------
--
----
------------可以看到，async/await 和箭头函数已经被转换为了 ES5 代码。使用 metro-react-native-babel-transformer，开发者不需要手动将 ES6/7/8 和 JSX 语法转换为 ES5 代码，而是可以直接编写现代 JavaScript 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/52383