如何将react JSX文件转换为简单的JavaScript文件[离线转换]

How to convert react JSX files to simple JavaScript file [offline transformation]

本文关键字：文件 转换 JavaScript 离线 简单 react JSX      更新时间：2023-09-26

我是react.js的新手。刚刚开始学习。所以我的问题可能看起来很愚蠢，但请回答。

我创建了一个简单的.js文件，代码如下：

var Hello=React.createClass({
    render: function(){
        return (<h1>Hello World</h1>);
    }
});

它是JSX语法，为了将其转换为简单的JavaScript文件，我使用了以下命令：

babel --preset react JSX_Files --watch --out-dir public/javascripts

这里JSX_Files是我的源文件夹，public/javascripts则是我想要转换的.js文件的文件夹。

但我在转换时遇到了以下错误：

SyntaxError: JSX_Files/example.js: Unexpected token (3:16)
  1 | var Hello=React.createClass({
  2 |     render: function(){
> 3 |         return (<h1>Hello World</h1>);
    |                 ^
  4 |     }
  5 | });

但是当我使用Babel REPL时(http://babeljs.io/repl/)，它转换它没有任何错误。

现在请告诉我哪里做错了。为什么脱机转换时出现语法错误。

如果您使用babel cli，则需要使用插件将jsx语法转换为浏览器能够理解的js语法。请参阅以下链接：http://babeljs.io/docs/plugins/transform-react-jsx/您需要安装babel-plugin-transfer-jsx插件，并在.babelrc文件中使用它，如下所示：

{
  "plugins": ["transform-react-jsx"]
}

那么你的babel命令应该会起作用。

尝试babel --presets react JSX_Files --watch --out-dir public/javascripts（位于预设末尾）。

相关文章：