babel transpile incomplete？

Question

我的页面使用以下javascript进行渲染：

<script src="/static/js/index.js" type="text/javascript">
'use strict';
//modules/index.js
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
React.createElement(
'div',
null,
'hello world!'
), document.getElementById('content'));
//# sourceMappingURL=index.js.map
</script>

我的浏览器无法理解，因为它不知道React是什么...因为没有包括任何地方。即使我包含react js文件（例如来自cdn），我的浏览器js控制台报告

'ReferenceError:require is not defined'.

安装了大量的babel并对相关模块做出反应之后，为什么转换器仍会产生对浏览器毫无意义的输出？我的.babelrc预设是[“es2015”，“反应”]。在我的package.json文件中是：

  "scripts": {
    "compile": "babel -w modules/ -d public/js --source-maps && exit code 0",
    "start": "node app.js"
  },

我错过了什么？

Answer 1

使用NodeJS之类的东西，它们是服务器端，而不是客户端。意思是，它们并不意味着在浏览器中运行。当你在本地运行你的应用程序时，它在本地使用Node，所以一切都很好，但在浏览器中环境是不同的。要在浏览器中使用Node，请参阅Webpack或类似的模块加载器。