什么是 metro-config？
metro-config 是一个用于配置 Metro 打包工具的 npm 包。它提供了一种简单的方式来配置 Metro 工具链的行为，例如指定入口文件、设置别名、添加自定义 transforms 等等。
如何使用 metro-config？
首先，需要在项目中安装 metro-config：
npm install metro-config --save-dev
然后，在项目根目录下创建一个 metro.config.js 文件（也可以是 .metro.config.js 或者 metro.config.json），并编写配置内容。以下是一个简单的例子：
-- -------------------- ---- -------
-------------- - -
--------- -
----------- ------- ------ -- ---------
------ - -- ----
----------- ------------------
--
--
------------ -
--------------------- --------------------------------------------------------
--
--上述配置会告诉 Metro：
- 解析器应该支持
.jsx和.js类型的文件； - 将
./src/components目录映射为别名components； - 使用
metro-react-native-babel-transformer进行 Babel 转换。
更多配置选项
除了上述示例中的配置选项外，metro-config 还提供了许多其他选项，例如：
- resolver.platforms：指定平台，例如
"ios"或"android"； - transformer.assetPlugins：指定处理静态资源的插件；
- serializer.getModulesRunBeforeMainModule：指定在主模块之前运行的模块。
更多选项可以在 官方文档 中找到。
使用自定义 transforms
除了使用 metro-config 自带的配置选项外，还可以编写自己的 transform，并在配置文件中使用。以下是一个简单的例子：
-- -------------------- ---- -------
----- - ----------- - - -----------------
-------- ------------------- ---- -------- -- -
------ -----------------------
----
---------
-------- ---
-------- ---
-------- ---------
---------------- -------------------------------------
---
-
-------------- - -
------------ -
--------------------- --------------------------------------------------------
-------------------- ----- -- -- --
---------- -
-------------------------- ------
--------------- ------
---------- ------------------ -- ----- ---------
--
---
--
--上述配置会将 myCustomTransform 应用于所有文件。myCustomTransform 函数接收一个对象参数，包含 src 和 filename 属性，分别表示源代码和文件名。函数需要返回一个 Promise，其解析值应该是转换后的代码。
总结
通过使用 metro-config，我们可以轻松地对 Metro 工具链进行配置，并自定义 transform 等。掌握这些技能有助于优化项目性能和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/52389