需要无浏览器，Webpack或Babel的reactjs模块 [英] Require reactjs modules without Browserify, Webpack or Babel
问题描述
我正在尝试在Visual Studio中设置TypeScript HTML应用。我想使用reactjs v0.14.7
I'm trying to setup TypeScript HTML app in visual studio. I want to use reactjs v0.14.7
我想避免使用Browserify之类的工具。
I would like to avoid using tools like Browserify.
但是，那么如何使用 react-dom 模块？
However, how to use the react-dom module then?
让我们暂时忘记打字稿。我需要先启动纯ES5并运行它。
Let's forget about typescript for a while. I need to get pure ES5 up and running first.
当前，我有以下内容：
<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对象不存在。
however, browser complains, ReactDOM object does not exists.
我尝试过：
<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（[]）
however, it does not work with require.js: Module name "react" has not been loaded yet for context: _. Use require([])
请问有人可以给它多一点照明吗？在没有任何服务器端工具（例如捆绑，转换等）的情况下如何使用react。
Can someone bring a little more light into this, please? How to use react without any server side tools like bundling, transpiling etc.
use npm之类的答案将不被接受。
Answers like "use npm" won't be accepted as answer.
推荐答案
RequireJS 和 require 是非常不同的东西-稍后再介绍。
RequireJS and require are very different things - more on that later.
如果您想在没有Browserify或Webpack之类的工具的情况下使用React，那么您不一定需要模块加载器。 React和ReactDOM的托管版本将公开显示您可以立即使用的全局变量。
If you want to use React without a tool like Browserify or Webpack, then you don't necessarily need a module loader. The hosted versions of React and ReactDOM will expose global variables that you can use out of the box.
<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>
如果要在本地使用这些文件，只需下载这些文件即可。
Just download these files if you want to work with them locally.
所有这些都听起来像 SystemJS 和 JSPM 可能正是您想要的。
All of that out the way, it sounds like SystemJS and JSPM might be exactly what you're looking for.
首先使用 jspm 安装软件包。
jspm install systemjs react react-dom
然后链接并配置SystemJS。
Then link and configure SystemJS.
<script src='jspm_packages/system.js'></script>
<script>
System.import('app.js');
</script>
现在在 app.js 中，您可以编写
var React = require('react');
var ReactDOM = require('react-dom');
SystemJS将处理其余脚本的加载。如果您想进行生产构建，那么就像运行 jspm捆绑应用 c这样简单。
SystemJS will handle the loading of the rest of your scripts. If you want to make a production build, then it's as simple as running jspm bundle app.
在React教程和其他示例中看到的对 require 的调用是针对名为 CommonJS 。
The calls to require that you're seeing in the React tutorials and other examples are for a module format called CommonJS.
您使用 require （'react'）获取对React模块导出的值的引用（已通过npm安装到 node_modules 中）。这意味着您需要一个浏览器预构建步骤，例如Browserify或Webpack，可以将所需的所有模块装订在一起并输出一个大脚本文件。
You use require('react') to get a reference to the value exported by the React module (installed into node_modules with npm). This means you need a pre-browser build step like Browserify or Webpack, that can staple all of the modules you need together and output one big script file.
令人困惑的是，CommonJS和RequireJS使用具有相同名称的函数来指定依赖项。您正在尝试像使用CommonJS模块一样使用RequireJS require 函数。
Confusingly, CommonJS and RequireJS use a function with the same name to specify dependencies. You're trying to use the RequireJS require function as though you were working with CommonJS modules.
如果需要改为使用RequireJS导入React，那么您需要执行以下操作：
If you want to import React with RequireJS instead, then you need to something like this:
<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将关闭并为您指定的模块添加脚本标签。然后，一旦这些脚本加载完毕，它将把它们导出的值传递给回调函数供您使用。
When your code executes, RequireJS will go off and add script tags for the modules you've specified. Then once these scripts have loaded, it will pass the values that they export into the callback function for you to use.
这篇关于需要无浏览器，Webpack或Babel的reactjs模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
