react-native 中的 Metro bundler 是什么？

Question

我正在學習 React Native。

我找不到 Metro bundler 的正確文檔。 所以，我有幾個問題。 顧名思義，它創建了一個包。

1. 但是捆綁文件在哪里？
2. 這和 webpack 一樣嗎？
3. 那個包文件有什么用？

Answer 1

React Native 應用程序是運行一些 Javascript 的已編譯應用程序。 每當您構建和運行 React Native 項目時，都會啟動一個名為 Metro 的打包程序。 您之前可能已經在終端中看到過這個輸出，讓您知道打包程序正在運行。

打包器做了幾件事：

將您所有的 Javascript 代碼合並到一個文件中，並翻譯您的設備無法理解的任何 Javascript 代碼（如 JSX 或一些較新的 JS 語法）。

將資產（例如 PNG 文件）轉換為可以由 Image 組件顯示的對象。

參考： https : //hackernoon.com/understanding-expo-for-react-native-7bf23054bbcd

Answer 2

Metro 是一個 JavaScript 打包器，它接收選項、一個入口文件，並為您提供一個包含所有 JavaScript 文件的 JavaScript 文件。 每次運行 React Native 項目時，都會將許多 javascript 文件編譯成一個文件。 這個編譯是由一個叫做 Metro 的打包器完成的。

回答您的問題：

1> 捆綁文件位於您正在構建應用程序的設備上，並以不同的格式存儲，例如在創建 .bundle 的 Android 普通捆綁的情況下。 另一種格式是索引 RAM 包，其中文件存儲為二進制文件。

2> Webpack 也是一種類似的模塊打包器，它綁定到 ReactJS Web 平台，並且它的模塊可以通過瀏覽器訪問。 捆綁過程與地鐵相似。

3> 這些捆綁文件被索引並以特定的數字格式存儲，因此在運行時很容易按順序排列 JS 文件。

Metro bundler 有多種功能，您可以在此處閱讀 Metro 在 React Native 中的作用： https : //medium.com/@rishabh0297/role-of-metro-bundler-in-react-native-24d178c7117e

希望能幫助到你。

Answer 3

Metro 團隊不斷改進其文檔，現在您可以在https://facebook.github.io/metro/docs/concepts 上找到一些非常好的解釋（鏈接已更新）：

Metro 是一個 JavaScript 打包器。 它接受一個入口文件和各種選項，並返回一個包含所有代碼及其依賴項的JavaScript 文件。

所以是的，它是一種 Webpack，但對於 React Native 應用程序:)

但是捆綁文件在哪里？

一旦 bundler 啟動，你可以在http://localhost:8081/index.bundle?platform=ios&dev=true& minify =false 上檢查它的內容（就像 webpack，它是從內存中提供的，所以它不會被寫入你的項目的文件夾）。

那個包文件有什么用？

該文件安裝在設備中，以便在那里執行其代碼。 請記住，當您為 React Native 應用程序編寫代碼時，您的代碼不會“轉換”為 Java/Swift/whatever 。 Native Modules 將事件發送到 Javascript 線程，JS 線程將執行您捆綁的 React Native 代碼。