Babel ❤️ React

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

人们常常感到惊讶的一点是，Babel 原生支持 JSX。

让我来展示一下切换是多么简单：

注意： 使用 Babel 的方法_非常多_，这里我只列出其中几种。如果你想查看更完整的列表，请访问我们的 使用 Babel 页面。

在浏览器中 (文档)

之前：

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

之后：

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

在 Browserify 中 (文档)

之前：

Shell

$ browserify -t reactify main.js

之后：

Shell

$ browserify -t babelify main.js

在 Node 中 (文档)

之前：

JavaScript

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

之后：

JavaScript

require('babel/register');

在 Webpack 中 (文档)

之前：

JavaScript

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

之后：

JavaScript

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

在 Gulp 中 (文档)

之前：

JavaScript

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

之后：

JavaScript

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

---

这样的例子还有很多，不过现在你应该已经明白这有多简单了。如果你没有找到你正在使用的工具，别担心，我们在 使用 Babel 页面提供了完整的列表。

如果你需要更多关于设置的帮助，请务必阅读我们的 JSX 文档，或者来我们的 支持聊天室 向其他 Babel 用户提问。

— The Babel team