Javascript react应用程序中js到jsx的自动脚本转换_Javascript_Node.js_Reactjs_Babeljs

Javascript react应用程序中js到jsx的自动脚本转换

javascript node.js reactjs

Javascript react应用程序中js到jsx的自动脚本转换,javascript,node.js,reactjs,babeljs,Javascript,Node.js,Reactjs,Babeljs,我是新手，所以如果我混淆了术语，请耐心等待以下html文档启动react应用程序： 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"><

我是新手，所以如果我混淆了术语，请耐心等待

以下html文档启动react应用程序：

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>

<!doctype html>
<head>
  <script src=src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.js"></script>  
</head>
<body>
  <h1>Browser in JSX Demo</h1>
  <div id="appRoot">If you're seeing this, it's not working.</div>
  <script type="text/babel" src="app.jsx"></script>
</body>
</html>

神奇的是，index.html文档仍然是app.jsx文件的来源。如果我看一下dev工具，

app.js

文件的输出以什么开始

'use strict';

var _createClass = function () { function definePr...

这不是实际app.jsx的内容。因此，需要进行一些服务器端编译

因此，我知道app.jsx文件需要预编译为js。我认为（经过一些调查）这个服务器端转换是由babeljs完成的，并且是动态完成的

问题如果我在本地运行index.html，它会在控制台中给我错误，当然，app.js找不到

问题: 如何使我的本地主机环境（WAMP）像服务器一样工作（它是在线编辑器平台plunkr.co）。我已经安装了npm。我希望它在飞行中，即使这是缓慢的，不建议生产

我发现的每件事至少都涉及到设置一个合适的脚本类型

<script type="text/babel" src="app.js"></script>

但我想重现服务器的完全相同的行为。基本上，我希望index.html（在我看来，它在服务器上运行时是一个合适的独立应用程序）在本地服务器上运行。我认为有一些babeljs设置需要，我似乎不明白

编辑顺便说一下。这个例子是在一次突然袭击中

编辑2

如果我将babel.min.js添加到标题中，并按照@Eric的建议添加一个.babelrc，它仍然找不到app.js。如果我使用source app.jsx，它会找到它，但会按原样使用它。此外，react应用程序不会启动。

在不知道项目设置的其余部分的情况下，我无法告诉您当前的app.js文件是如何创建的，但您是对的：您需要的是通过Babel传输代码。这可以通过两种方式在开发中完成：在dev服务器上（推荐），或者在dev浏览器中使用独立的Babel

在开发服务器上（推荐） React推荐的从React开始的方法是使用名为的工具。既然你说你是新的反应者，这将在幕后照顾Babel，并为你提供一个开发服务器（因此你不需要WAMP，只需要Node和NPM），以及一个构建过程来创建资产，如app.js，以交付到生产服务器

若你们并没有时间立即学习巴别塔和Webpack，我建议你们先使用CreateReact应用程序

在Dev浏览器中如果您不想引入新工具，而只想以最少的配置传输JSX，那么可以通过在浏览器中执行此操作。这在React.js教程中曾经演示过，直到他们转而推荐创建React应用程序。安装“在浏览器中”的说明需要两件事：将babel.min.js添加到

，以及将

type=“text/babel”

属性添加到.jsx文件（下面的工作代码示例）。然而，文件给出了以下建议：

在浏览器中编译有一个相当有限的用例，因此在生产站点上工作时，应该预编译脚本服务器端。有关详细信息，请参阅安装生成系统

您的HTML和JavaScript应该如下所示（为了简洁起见，我省略了很多代码）：

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>

<!doctype html>
<head>
  <script src=src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.js"></script>  
</head>
<body>
  <h1>Browser in JSX Demo</h1>
  <div id="appRoot">If you're seeing this, it's not working.</div>
  <script type="text/babel" src="app.jsx"></script>
</body>
</html>


JSX演示中的浏览器
如果你看到这个，它就不起作用了。

app.jsx

class Communicator extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {message: this.props.message};
  }

  resetComm() {
    this.setState({message: ''});
  }
(...)

class App extends React.Component {
  render() {
    return <div>It works!</div>;
  }
}

const el = document.getElementById('appRoot');
ReactDOM.render(<App />, el);

类应用程序扩展了React.Component{
render（）{
返回它的工作！；
}
}
const el=document.getElementById（'approt'）；
ReactDOM.render（，el）；

请注意，脚本

src

属性中使用的扩展名与JavaScript文件必须匹配。您可以使用

.jsx

或

.js

，但它们必须匹配。我不知道您的服务器是如何发挥其魔力的，但这超出了问题的范围，默认情况下不是预期的行为。

您可以使用它来实现您想要的

您可以像这样下载每个依赖项（如果安装了npm）：

npm安装--保存开发人员网页包

npm安装--保存开发人员网页包开发人员服务器

npm安装--保存开发加载程序utils html网页包插件提取文本网页包插件

npm安装--保存开发巴贝尔核心巴贝尔加载器巴贝尔寄存器

npm安装——保存dev babel-preset-es2015 babel-preset-react

然后，您可以在文件夹的根目录下创建文件

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',
              ],
            }
          }
        ]
      },
    ]
  },
});

在您的

包.json

中，添加以下行：

{
  ...
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
  }
  ...
}

现在，您可以运行

npm-run-dev

进行开发，并运行

npm-run-build

为生产服务器编译代码

如果项目中没有像这样初始化npm，那么可以在项目中初始化npm

您也可以按照以下指南操作：

Webpack基本上是一个工具，它接受每个.jsx文件并将其转换为.js文件。在上面的代码中，我使用index.jsx作为主文件。此文件中导入的每个react组件都将自动计算。

我很难准确理解您的要求。你能更清楚地说明你想要的结果是什么吗？谢谢你的支持。我更新了OP。这个“工作原理”就像我在localhost:3000上运行一个177MB的演示应用一样。但是，组合运行my index.html+app.js需要不同的文件结构。我很感激你的建议，但现在我正在寻找一个简单的解决方案来镜像给定的设置。我已经添加了我的另一个答案中的说明，现在删除了，关于如何在浏览器中实现这一点。