SystemJS

Question

我正在尝试在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：模块名称＆＃34;反应＆＃34;尚未加载上下文：_。使用require（[]）

有人可以为此带来更多的亮点吗？如何使用没有任何服务器端工具的反应，如捆绑，转换等。

像＆＃34;使用npm＆＃34;不会被接受为答案。

Answer 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使用具有相同名称的函数来指定依赖项。您正在尝试使用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将关闭并为您指定的模块添加脚本标记。然后，一旦加载了这些脚本，它就会将它们导出的值传递给回调函数供您使用。

Answer 2

以下是Dan Abramov本人的一个例子，他是Redux的创造者，他在不使用webpack，babel或browserify的情况下制作了一个反应应用程序。

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

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

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

并在您的脚本标记中键入此

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

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

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

希望它有所帮助。

Answer 3

看看这个项目

https://github.com/ORESoftware/hr4r2

它正在做你想做的事 - 它正在使用RequireJS + React + TypeScript。它正在进行服务器端渲染，而是SPA。

此项目未使用Webpack或Babel。

需要不带Browserify，Webpack或Babel的reactjs模块

3 个答案:

SystemJS

CommonJS的

RequireJS