1. 什么是 metro-dist
metro-dist 是一个被 Facebook 开源的打包工具，用于打包 React Native 项目。它可以取代 React Native 内置的打包工具，可以大幅提高构建速度，并提供了更高的扩展性和配置性。使用 metro-dist 进行 React Native 项目的构建，可以大幅提高开发体验和构建速度。
2. 安装 metro-dist
我们可以使用 npm 来安装 metro-dist，只需要通过以下命令即可完成安装：
--- ------- ---------- ----------
注意：--save-dev 参数表示将 metro-dist 安装到开发依赖中，即只在开发时使用，而不是在生产环境中使用。
3. 构建 React Native 项目
- 首先，在 React Native 项目的根目录下创建一个名为
metro.config.js的文件。在该文件中，我们可以配置 metro-dist 的一些选项，例如：
-------------- - -
------------ -
--------------------- --------------------------------------------------------
--
--------- -
----------- ------- ----- ----- ------- -- --------
--
--这里的配置表示，将使用 metro-react-native-babel-transformer 进行 JavaScript 代码的转换，并支持 .jsx、.js、.ts、.tsx 等文件扩展名。
- 修改
package.json文件中的scripts部分：
---------- - -------- ----- ---------------------------------- ----- ------------------------- --
这里的 start 脚本将会启动 node_modules/metro-dist/src/cli.js，并将 metro.config.js 作为配置文件传递给 metro-dist。
- 运行开发服务器：
--- -----
这个命令将会启动开发服务器，然后打开 http://localhost:8081/debugger-ui 即可看到 JavaScript 开发者工具的界面。同时，React Native 项目的 JavaScript 和原生代码也会运行起来。
- 运行 iOS/Android 应用：
--- ------------ -------
或者
--- ------------ -----------
这个命令将会打包并运行 iOS/Android 应用。
4. 总结
使用 metro-dist 进行 React Native 项目的构建，可以大幅提高开发体验和构建速度。我们可以通过 metro.config.js 文件来配置 metro-dist 的选项，然后使用 npm 启动开发服务器，即可看到 React Native 的应用程序在浏览器中运行。同时，我们也可以使用 npx react-native run-ios 或 npx react-native run-android 命令打包并运行应用程序。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066f451d8e776d08040f3e