不使用Browserify、Webpack或Babel，加载Reactjs模块

Question

不使用Browserify、Webpack或Babel，加载Reactjs模块

javascriptreactjstypescriptcommonjs

8

我正在尝试在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”将不被接受为答案。

- Liero

3个回答

0

看一下这个项目

https://github.com/ORESoftware/hr4r2

它正在做你想要做的事情 - 它正在使用RequireJS + React + TypeScript。而且它正在进行服务器端渲染并且是一个SPA。

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

- Alexander Mills

0

这是 Redux 创造者 Dan Abramov 本人的一个示例，他在其中创建了一个 React 应用程序，而没有使用 webpack、babel 或 browserify。

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')
);

注意：请确保在代码顶部引入以下两个库

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

希望能有所帮助。

- Adeel Imran

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dan Prince · Accepted Answer

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将添加用于指定模块的脚本标签。然后，一旦这些脚本已加载，它将把它们导出的值传递到回调函数中供您使用。