客户端是否需要下载react库,或者他们如何访问react或react-dom等模块?

Is client need to download react library, or how do they access module like react or react-dom?

提问人:Boyce Cecil 提问时间:1/1/2022 最后编辑:Boyce Cecil 更新时间:1/2/2022 访问量:538

问:

一个简单的问题: 当我在开发时,我总是在我的项目文件夹中放置名为“node_modules”的库,并且我不时使用从“react”导入 React,但我的客户在他们的机器中没有这个库。

那么,客户是如何在库中访问这些代码的,我认为他们不会下载整个库来访问网站。

node.js reactjs 客户端

评论


答:

3赞 CertainPerformance 1/1/2022 #1

对于玩具片段以外的任何内容,通常的方法是让开发人员运行类似 的东西,这将运行构建过程 - 要么创建 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 的框架——你有一个构建过程,它接受框架代码和开发人员的代码,并将它们全部转换为一个捆绑包,然后该捆绑包包含运行应用程序所需的所有代码。

评论

0赞 Boyce Cecil 1/2/2022
谢谢,这是非常清楚的解释!
0赞 Boyce Cecil 1/3/2022
顺便说一句,我也对package.json文件中的denpendencies和devdependencies感到有些困惑,我猜这与网站的部署无关,只与包的开发有关(例如github拉取请求),对吗?非常感谢您的回答!
1赞 CertainPerformance 1/3/2022
对于 Web 应用程序,是的,通常。依赖项通常运行有助于或将代码包含在最终捆绑包中的代码,或者它们以其他方式(如转译或 linting)帮助构建过程。