使用babel将JSX转换为JS [英] Transform JSX to JS using babel

问题描述

我是babel的新手，正在尝试将main.jsx文件转换为main.js.我安装了以下babel插件.

I'm new to babel and I'm trying to convert my main.jsx file to main.js. I installed the following babel plugin.

npm install --save-dev babel-plugin-transform-react-jsx

在应用程序根目录中创建了一个名为.babelrc的文件.

Created a file called .babelrc in the application root directory.

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

我的应用程序正在使用快递服务器，因此在运行节点app.js时，我期望babel将main.jsx转换为main.js，但没有任何反应. 谁能指出我做错了什么?

My app is using the express server, so on running node app.js I was expecting the babel to transform main.jsx to main.js but nothing happens. Can any one point out what I'm doing wrong ?

推荐答案

如果仅使用babel将jsx转换为js，这就是您需要的:

if you are only using babel to transform jsx to js, this is what you need :

安装

• 将babel-cli安装为全局(可选)sudo npm install -g babel-cli
• 安装babel-preset-es2015(可选.如果您的代码使用es6标准)npm install babel-preset-es2015
• 安装babel-preset-react(必需)

• install babel-cli as global (optional) sudo npm install -g babel-cli
• install babel-preset-es2015 (optional. if your code using es6 standard) npm install babel-preset-es2015
• install babel-preset-react (required)

配置

在项目的根目录中，添加此文件.babelrc并将其写入

in your root of project, add this file .babelrc and write this to it

{
  "presets": ["es2015", "react"]
}

或

{
  "presets": ["react"]
}

运行

babel source_dir -d target_dir

这篇关于使用babel将JSX转换为JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！