如何导入从`npm`或`yarn`下载的JavaScript文件到客户端（浏览器）？

问题描述：

我正在学习本教程：Headless Drupal with React。我敢打赌，教程本身与我的问题没有关系。在教程中，它显示了直接在.html文件中直接从CDN导入两个React和ReactDOM。如何导入从`npm`或`yarn`下载的JavaScript文件到客户端（浏览器）？

我的问题是如何让包管理器（npm或yarn）将这些要导入的文件（带有RequireJS）下载到浏览器，就像直接从CDN获取？我安装了这个命令yarn add react react-dom。

我的第一个猜测是，我需要进口的两个文件，react.js 和react-dom.js与RequireJS。所以，我现在所拥有的在我的index.html是这样的：

<!doctype html> 
<html> 
<head> 
    <script data-main="js/main" src="node_modules/requirejs/require.js"></script> 
</head> 
<body> 
</body> 
</html>

而且在我的js/main.js我有这些简单的代码：

require(["node_modules/react-dom/cjs/react-dom.development.js"]); 
require(["node_modules/react/cjs/react.development.js"]);

但它返回一个奇怪的错误：

Uncaught ReferenceError: process is not defined 
    at react.development.js:12 
(anonymous) @ react.development.js:12 
react-dom.development.js:12 Uncaught ReferenceError: process is not defined 
    at react-dom.development.js:12

重新那句：我怎么能安装从包经理反应，ReactDOM和这些文件导入直入我的HTML文件？

我现在不打扰最佳实践，我不会接受像“从CDN直接保存.js文件”这样的解决方案，......种解决方案。

好的，但从教程来看，直接从CDN __works__导入React JavaScript文件。我想这样做，但是从CDN开始，我希望JS文件通过包管理器下载到本地。 – notalentgeek

我不知道那是什么....我没有使用NodeJS作为服务器。 React将用作Drupal主题。 – notalentgeek

你在服务器上使用什么？ – Hunter

答

"<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script> 
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>"

可以使用实际的CDN，并在本地下载到服务器，然后将其包含在您的网页上。或者，您可以使用软件包捆绑软件“捆绑软件，如webpack或Browserify，它可以让您编写模块化代码，并将其捆绑在一起，形成小包装以优化加载时间。” https://webpack.js.org/http://browserify.org/ npm模块文件与CDN不同，并且未配置为用作CDN。这是我的正式答案，从我做的研究来看，我完全支持它。您提供的映像的链接也显示了较旧版本的反应，15因此您也可能有版本问题。

答

简短的回答，你不能。至少从ReactJS提供的即开即用功能。从当前软件包管理器（Yarn或NPM）下载的ReactJS需要运行一个服务器。在最基本的简单HTTP服务器，如python3 -m http.server工程。

没有CDN，没有简单的方法让ReactJS只用双击HTML文件就可以工作。

如何导入从`npm`或`yarn`下载的JavaScript文件到客户端（浏览器）？

相关推荐