Skip to main content

Babel 喜爱 React

· 2 min read

令人惊讶的事情之一就是 Babel 支持开箱即用的 JSX。

我们会告诉你切换到支持 JSX 的环境是多么容易:

Note: There are tons of ways to use Babel, I'll only list a few of them here. If you'd like to see a more complete list check out our Using Babel page.

In the Browser (docs)

原先:

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

以后:

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

In Browserify (docs)

原先:

Shell
$ browserify -t reactify main.js

以后:

Shell
$ browserify -t babelify main.js

In Node (docs)

原先:

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

以后:

JavaScript
require('babel/register');

In Webpack (docs)

原先:

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

以后:

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

In Gulp (docs)

原先:

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

以后:

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

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.

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

— 来自 Babel 团队