Question

我正在关注本教程：Headless Drupal with React。我打赌教程本身与我的问题无关。在本教程中，它显示了从.html文件直接从CDN导入两个React和ReactDOM。

我的问题是如何让软件包管理器（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

重新短语：如何从软件包管理器安装React和ReactDOM并将这些文件直接导入我的HTML文件？

我此刻并不关心最佳实践，我不会接受像“直接从CDN中保存.js文件”这样的解决方案，......解决方案。

Answer 1

"<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>"

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

Answer 2

答案简短，你不能。至少从ReactJS提供的开箱即用。从当前包管理器（Yarn或NPM）下载的ReactJS需要运行服务器。在最基本的简单HTTP服务器上，如python3 -m http.server可以工作。

没有CDN，没有简单的方法可以让ReactJS只需双击HTML文件即可。

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

2 个答案: