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

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:模块名称"react"尚未加载上下文:_.使用require([])

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

像"使用npm"这样的答案将不被接受为答案.

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的

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

您require('react')用来获取React模块导出的值的引用(node_modules使用npm 安装).这意味着您需要像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将关闭并为您指定的模块添加脚本标记.然后,一旦加载了这些脚本,它就会将它们导出的值传递给回调函数供您使用.