客戶是否需要下載 react 庫，或者他們如何訪問 react 或 react-dom 等模塊？

Question

一個簡單的問題：當我開發時，我的項目文件夾中總是有我的庫，名為“node_modules”，我不時使用 import React from 'react'，但我的客戶在他們的機器中沒有這個庫。

我知道 react 是一個客戶端框架，所以......它不應該是服務器將 css 和 html 和 js 結合在一起並渲染出所有最終的 HTML 並將其發送為。

那么，這是如何工作的呢？ 反應是否將必要的 js 和原始 HTML 模板和 css 文件發送到客戶端和客戶端將 css 和 ZFC35FDC70D5FC69DE3 和 9838A2 結合在一起？ 這是客戶端框架的工作方式嗎？

Answer 1

除了玩具片段之外，通常的方法是讓開發人員運行npm run build之類的東西，這將運行構建過程 - Create React App's或來自 Webpack 之類的模塊捆綁器或其他一些設置。 然后，這將創建一個 JavaScript “捆綁包”，這是一個包含所有必要代碼的單個文件——它將包含來自 React、React DOM 的代碼以及所有您使用的文件，放在一個文件中。

當你在你的機器上運行你的 React 應用程序時，或者當你在其他地方托管應用程序時，你或其他客戶端將只下載該捆綁文件，並且該應用程序將能夠僅使用該文件運行（當然還有一個 HTML 文件）。 無需下載其他任何內容。

可以改為強制客戶端下載 React 和 React DOM，並讓客戶端編譯和運行代碼——這就是 Stack Snippets 在 Stack Overflow 上的工作方式：

 const App = () => { return <div>foo</div>; }; ReactDOM.render(<App />, document.querySelector('.react'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>

它非常適合快速演示和玩具片段。 但這對於真正的應用程序來說不是一個好方法，因為它會使客戶端不必要地做大量工作（在帶寬和 CPU 方面） - 所以通常您希望通過 NPM 腳本創建捆綁包。

這就是現在有多少框架工作，而不僅僅是 React 的——你有一個構建過程，它獲取框架代碼和開發人員的代碼，並將它們全部變成一個包，然后這個包包含運行應用程序所需的所有代碼。