babel 转译不完整？答案

【问题标题】：babel transpile incomplete?babel 转译不完整？
【发布时间】：2017-01-16 22:29:24
【问题描述】：

我的页面正在使用以下 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 和 react 相关模块后，为什么编译器仍然产生对浏览器没有意义的输出？我的 .babelrc 预设是 ["es2015","react"]。在我的 package.json 文件中是：

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

我错过了什么？

【问题讨论】：

你安装Node了吗？
@AndrewL。我有 node、babel-、pug、react-。这就是我的沮丧。有很多东西要安装，但它们都没有检测到并相互协作:-(
那么你从哪里得到的 html？
我有一个 index.pug。在其中，它有脚本标签来加载我的 babelfied .js 文件。节点应用程序很好，并且完全空白，因为反应组件不呈现。我在我的 .pug 文件中添加了来自 cdn 的 reactjs 和 reactdom js 文件，认为这会有所帮助。当应用启动时，它们在视图源中，但没有反应组件。
你使用的是 webpack 还是类似的东西？

标签： node.js reactjs babeljs

【解决方案1】：

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

【讨论】：

所以如果，作为一个新手，我“不在乎是服务器端还是客户端”，但我的心态是“我只想使用节点技术构建一个网站“，我必须使用 webpack 吗？我没有意识到这一点。（羞愧）。你能有一个服务器端的网络应用程序吗？如果是这样，我将如何进行这项工作，我想知道。打算试试 webpack，看看我能不能用它去任何地方......
@rstruck 还有其他选择：RequireJS、Browserify 等。
我明白了。天啊……网络技术曾经如此简单。好的。好吧，这很有启发性，我完全错过了关于节点是服务器端的观点（duh）。我会接受这个答案，不管我是否能让其他东西正常工作，因为这是我需要的思维转变..thx.