自动脚本转换js到jsx在反应的应用程序
我是REACT的新手，所以如果我混淆了术语，请耐心等待。
下面的html文件启动一个反应的应用程序：
的index.html
<html> <head> <script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.min.js"></script> <script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.min.js"></script> <script data-require="redux@*" data-semver="3.2.1" src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.2.1/redux.js"></script> <script data-require="react-redux@*" data-semver="4.4.5" src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js"></script> <title>Hello world</title> </head> <body> <h1>Share a sport activity</h1> <div id="appMount"></div> <script src="app.js"></script> </body> </html> 在服务器上的index.html文件夹中，有一个app.jsx文件，但没有app.js文件（参见脚本标签的src属性）。
app.jsx
class Communicator extends React.Component { constructor(props) { super(props); this.state = {message: this.props.message}; } resetComm() { this.setState({message: ''}); } (...)
神奇的是，index.html文档无论如何都来源于app.jsx文件。 如果我看一下开发工具app.js文件的输出开始
'use strict'; var _createClass = function () { function definePr...
这不是实际的app.jsx的内容。 所以，涉及到一些服务器端的编译。
所以，我明白，app.jsx文件需要预编译为js。 我认为（经过一些调查），这个服务器端的转换是由babeljs完成的，而且是在飞行中完成的。
问题
如果我在本地运行index.html，则会在控制台中发现错误（当然）找不到app.js。
题
我如何使我的本地主机环境（WAMP）的行为像服务器（这是在线编辑器平台plunkr.co）。 我有npm安装。 即使速度很慢，也不推荐用于生产，我希望能够即时运行。
我发现的一切至less涉及到一个正确的脚本types的设置
<script type="text/babel" src="app.js"></script>
但我想重现与服务器完全相同的行为。 基本上，我想要index.html（这似乎是一个适当的独立的应用程序，因为它在服务器上运行）在我的本地服务器上运行。 我觉得有一些babeljs设置需要我似乎不明白。
编辑
顺便一提。 这个例子是在http://plnkr.co/
编辑2
如果我将babel.min.js添加到标题中，并按照@Eric的build议添加.babelrc，那么它不会findapp.js。 如果我来源app.jsx它find它，但它是按原样。 此外，反应的应用程序不会启动。
你是对的：你需要的是通过Babel来传递代码。 这可以通过一个名为Create React App的工具完成。 既然你说你是React的新手，那么在幕后你会注意到Babel，并为你提供一个开发服务器（所以你不需要WAMP，只需要Node和NPM），以及一个构build过程来创build像app这样的资源.js发送到生产服务器。
不知道你的项目设置的其余部分，我不知道如何创build当前的app.js文件。
如果你没有时间立即学习Babel和Webpack，我build议先使用Create React App。
你可以使用Webpack来实现你想要的。
你可以像这样下载每个依赖项（如果你已经安装了npm）：
npm install --save-dev webpack
npm install --save-dev webpack-dev-server
npm install --save-dev loader-utils html-webpack-plugin extract-text-webpack-plugin
npm install --save-dev babel-core babel-loader babel-register
npm install --save-dev babel-preset-es2015 babel-preset-react
然后你可以在你的文件夹的根目录下用这个代码创build文件webpack.config.js ：
import path from 'path'; import HtmlWebpackPlugin from 'html-webpack-plugin'; export default () => ({ entry: [ path.join(__dirname, 'src/index.jsx'), ], output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js', }, plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: './src/index.html' }), ] module: { rules: [ { test: /.jsx?$/, exclude: /node_modules/, include: path.join(__dirname, 'src'), use: [ { loader: 'babel', options: { babelrc: false, presets: [ ['es2015', { modules: false }], 'react', ], } } ] }, ] }, });
在你的package.json ，添加这些行：
{ ... "scripts": { "dev": "webpack-dev-server", "build": "webpack" } ... }
您现在可以运行npm run dev进行开发， npm run build编译准备好生产服务器的代码。
你可以在你的项目中初始化npm，如果它还没有像npm init那样完成的话
您也可以按照这个指南： 使用Babel和Webpack设置React工作stream程2
Webpack基本上是一个工具，它将每个.jsx文件转换成一个.js文件。 在上面的代码中，我使用index.jsx作为主文件。 每个反应组件将被导入到这个文件将被自动计算。
如果您不想使用构build工具，只需在浏览器中使用Babel和JSX，请按照“ 使用Babel ”中的说明进行操作，并select“原型 – 在浏览器中”。 在文档头中包含babel，并添加一个可以从localhost/.babelrc提供的.babelrc文件。
现在你的头应该包括
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
你应该像这样获取文件
<script type="text/babel" src="app.js"></script>
.babelrc文件应该如下所示：
{ "presets": ["env", "react"] }
- 我可以使用Babel Require Hook生产ES6吗？
- Babel ES6：导入节点模块也需要在ES6中进行转换
- 如何在Heroku上启用ES2017function来运行Node.js应用程序？
- 错误：无法find预设“反应”安装时使用npm install –global babel-preset-react但工作没有全局标志
- 为什么babel-node-debug不能识别导入命令？
- Babelify和本地节点模块
- 在严格模式下的节点0.12.x const问题
- Webpack + React：Webpack从我的node_modules文件夹以正确的顺序在一个地方构build，并且在其他地方的顺序不正确
- 是否可以在生产中使用require（'babel / register）'