提问人:Boyce Cecil 提问时间:1/1/2022 最后编辑:Boyce Cecil 更新时间:1/2/2022 访问量:538
客户端是否需要下载react库,或者他们如何访问react或react-dom等模块?
Is client need to download react library, or how do they access module like react or react-dom?
问:
一个简单的问题: 当我在开发时,我总是在我的项目文件夹中放置名为“node_modules”的库,并且我不时使用从“react”导入 React,但我的客户在他们的机器中没有这个库。
那么,客户是如何在库中访问这些代码的,我认为他们不会下载整个库来访问网站。
答:
对于玩具片段以外的任何内容,通常的方法是让开发人员运行类似 的东西,这将运行构建过程 - 要么创建 React App,要么从 Webpack 等模块打包器或其他一些设置。然后,这将创建一个 JavaScript“捆绑包”,一个包含所有必要代码的文件 - 它将包含来自 React、React DOM 和所有使用过的文件的代码,放在一个文件中。npm run build
当你在你的机器上运行你的 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 的框架——你有一个构建过程,它接受框架代码和开发人员的代码,并将它们全部转换为一个捆绑包,然后该捆绑包包含运行应用程序所需的所有代码。
评论