Babel <3 React

让人经常感到惊讶的一件事是，Babel 开箱即支持 JSX。

🌐 One of the things that surprises people quite often is that Babel supports JSX out of the box.

让我给你看看切换起来有多简单：

🌐 Let me show you just how easy it is to switch:

注意： 使用 Babel 的方法有 很多，我这里只会列出其中的一部分。如果你想看更完整的列表，可以查看我们的 使用 Babel 页面。

在浏览器中 (文档)

之前：

🌐 Before:

<script type='text/jsx'></script>

之后：

🌐 After:

<script type='text/babel'></script>

在 Browserify 中 (文档)

之前：

🌐 Before:

Shell

$ browserify -t reactify main.js

之后：

🌐 After:

Shell

$ browserify -t babelify main.js

在 Node 中 (文档)

之前：

🌐 Before:

JavaScript

require('node-jsx').install();

之后：

🌐 After:

JavaScript

require('babel/register');

在 Webpack 中 (文档)

之前：

🌐 Before:

JavaScript

loaders: [
  { test: /\.js$/, exclude: /node_modules/, loader: 'jsx-loader'}
]

之后：

🌐 After:

JavaScript

loaders: [
  { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}
]

在 Gulp 中 (文档)

之前：

🌐 Before:

JavaScript

gulp.src('views/**/*.js')
    .pipe(jsx())
    .pipe(gulp.dest('dist'));

之后：

🌐 After:

JavaScript

gulp.src('views/**/*.js')
    .pipe(babel())
    .pipe(gulp.dest('dist'));

---

这个列表还在继续，但你现在大概已经明白它有多简单了。如果你没有找到你正在寻找的工具，别担心，我们在我们的使用 Babel页面上有完整的工具列表。

🌐 The list goes on, but you probably get how simple it is by now. If you didn't see the tool you are looking for don't worry we have a full list of them on our Using Babel page.

如果你在设置过程中需要更多帮助，记得阅读我们的 JSX 文档，或者来我们的 支持聊天 问问其他 Babel 用户。

🌐 If you need more help getting setup be sure to read our JSX docs or come ask other Babel users in our support chat.

—— 巴别团队