小编典典

需要无浏览器，Webpack或Babel的reactjs模块

reactjs

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

阅读 280

2020-07-22

共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可能正是您想要的。

首次用于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。

普通JS

require在React教程和其他示例中看到的调用是针对称为CommonJS的模块格式的。

您用于require('react')获取对React模块（node_modules与npm一起安装）导出的值的引用。这意味着您需要预浏览器构建步骤，例如Browserify或Webpack，可以将所需的所有模块装订在一起并输出一个大脚本文件。

需求JS

令人困惑的是，CommonJS和RequireJS使用具有相同名称的函数来指定依赖项。您试图require像使用CommonJS模块一样使用RequireJS
函数。

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

2020-07-22