javascript - 不使用 Browserify、Webpack 或 Babel 載入 reactjs 模組

我正在嘗試在 Visual Studio 中設置 TypeScript HTML 應用。我想使用 ReactJS v0.14.7

我想避免使用像 Browserify 這樣的工具。

然而，那麼要如何使用 react-dom 模組呢？

暫時先忘掉 TypeScript。我需要先讓純 ES5 運行起來。

目前，我有這個：

<script src="Scripts/react/react.js"></script>
<script src="Scripts/react/react-dom.js"></script>
<script>
    var Button = React.createClass({
        render: function () {
            return (React.createElement("div", { className: "btn btn-default" }, 'hello world'));
        }
    });
    ReactDOM.render(React.createElement('Button'), document.getElementById('container'));
</script>

然而，瀏覽器抱怨，ReactDOM 對象不存在。

我已經嘗試過：

<script src="Scripts/require.js"></script>
<script src="Scripts/react/react.js"></script>
<script src="Scripts/react/react-dom.js"></script>
<script>
   var React = require('react');
   var ReactDOM = require('react-dom');
   ....
</script>

但是，它不適用於 require.js：模組名稱「react」尚未為上下文加載：_。請使用 require([])

有人可以更清楚地說明一下嗎？如何在不使用任何伺服器端工具（如打包、轉譯等）的情況下使用 React。

像「使用 npm」這樣的答案不會被接受為答案。

答案＃1

RequireJS 和 require 是非常不同的東西——稍後會詳細說明。

如果你想在不使用像 Browserify 或 Webpack 這樣的工具的情況下使用 React，那麼你不一定需要模組加載器。React 和 ReactDOM 的託管版本將會提供全域變數，你可以直接使用這些變數。

<script src="https://fb.me/react-0.14.7.js"></script>
<script src="https://fb.me/react-dom-0.14.7.js"></script>
<script>
console.log(React, ReactDOM);
</script>

如果你想在本地操作它們，只需下載這些文件。

SystemJS

說完這些之後，看起來 SystemJS 和 JSPM 可能正是你所尋找的。

首先使用 jspm 安裝你的套件。

jspm install systemjs react react-dom

然後連結並配置 SystemJS。

<script src='jspm_packages/system.js'></script>
<script>
  System.import('app.js');
</script>

現在在 app.js 裡，你可以編寫 CommonJS 風格的程式碼。

var React = require('react');
var ReactDOM = require('react-dom');

SystemJS 會處理其餘腳本的載入。如果你想要製作生產版本，那麼只需執行 jspm bundle app 就可以了。

CommonJS

您在 React 教學和其他範例中看到的 require 調用是用於一種名為 CommonJS 的模組格式。

你使用 require('react') 來獲取 React 模組所導出的值的引用（使用 npm 安裝到 node_modules 中）。這意味著你需要一個像 Browserify 或 Webpack 這樣的瀏覽器前置建構步驟，可以將你需要的所有模組整合在一起，並輸出成一個大的腳本檔案。

RequireJS

令人困惑的是，CommonJS 和 RequireJS 都使用同名的函數來指定依賴項。你正在嘗試像使用 CommonJS 模塊一樣使用 RequireJS 的 require 函數。

如果你想用 RequireJS 來導入 React，那麼你需要像這樣做：

<script src="js/require.js"></script>
<script>
  require.config({
    'baseUrl' : 'Scripts/',
  });
  require(["react-0.14.7", "react-dom-0.14.7"],
  function(React, ReactDOM) {
    console.log(React, ReactDOM);
  });
</script>

當你的程式碼執行時，RequireJS 會去新增你所指定模組的 script 標籤。然後一旦這些腳本載入完畢，它會將它們匯出的值傳入回呼函數供你使用。