如何導入從`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文件」這樣的解決方案，......種解決方案。

來源

2017-10-28 notalentgeek

好的，但從教程來看，直接從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因此您也可能有版本問題。

來源

2017-10-28 14:40:26 Hunter

簡短的回答，你不能。至少從ReactJS提供的即開即用功能。從當前軟件包管理器（Yarn或NPM）下載的ReactJS需要運行一個服務器。在最基本的簡單HTTP服務器，如python3 -m http.server工程。

沒有CDN，沒有簡單的方法讓ReactJS只用雙擊HTML文件就可以工作。

來源

2017-10-30 10:42:52 notalentgeek

如何導入從`npm`或`yarn`下載的JavaScript文件到客戶端（瀏覽器）？

回答

相關問題