【问题标题】：Require reactjs modules without Browserify, Webpack or Babel需要没有 Browserify、Webpack 或 Babel 的 reactjs 模块
【发布时间】：2016-06-21 01:18:24
【问题描述】：

我正在尝试在 Visual Studio 中设置 TypeScript HTML 应用程序。我想用 reactjs v0.14.7

我想避免使用 Browserify 之类的工具。

那么，react-dom 模块如何使用呢？

让我们暂时忘记打字稿。我需要先启动并运行纯 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”之类的答案不会被接受为答案。

【问题讨论】：

标签： javascript reactjs typescript commonjs

【解决方案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>

如果您想在本地使用这些文件，只需下载它们即可。

系统JS

所有这些，听起来SystemJS 和JSPM 可能正是您正在寻找的。p>

首先使用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 使用同名函数来指定依赖项。您正在尝试使用 RequireJS require 函数，就好像您在使用 CommonJS 模块一样。

如果你想用 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 将启动并为您指定的模块添加脚本标签。然后，一旦这些脚本加载完毕，它会将它们导出的值传递给回调函数供您使用。

【讨论】：

好吧，我认为 CommonJS 模块是一种模式，而 RequireJS 是一个实现模式的库。但是 RequireJS 只允许使用 CommonJS 模块，但模式不同。对吗？
RequireJS 实现了另一种称为 AMD 的格式。 CommonJS -> (Webpack | Browserify) -> 浏览器，AMD -> RequireJS -> 浏览器。
好的，现在可以使用 typescript 加载 commonjs 模块并将其编译为 ES5，这样它就可以在浏览器中运行而无需任何其他预处理器？
没有预处理器就无法编译代码，但可以使用in-browser pre-processor。
好吧，打字稿是我的预处理器

【解决方案2】：

看看这个项目

https://github.com/ORESoftware/hr4r2

它正在做你想做的事——它正在使用 RequireJS + React + TypeScript。它正在做服务器端渲染并且是一个SPA。

这个项目没有使用 Webpack 或 Babel。

【讨论】：

【解决方案3】：

这是 Redux 的创建者 Dan Abramov 本人的一个示例，他在其中不使用 webpack、babel 或 browserify 就制作了一个 react 应用程序。

http://codepen.io/gaearon/pen/ZpvBNJ?editors=0010

在你的 HTML 文件中你的 body 标签内写

<div id="root">
   <!-- This div's content will be managed by React. -->
</div>

然后在你的脚本标签中输入这个

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

PS确保您在顶部包含这 2 个库

https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js
https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js

希望对你有帮助。

【讨论】：