使用Gulp转换React的JSX

《在React中使用JSX》中使用了JSX。借助一个javascript,动态将JSX语法脚本转换为javascript。这在开发阶段是可行的,但是在正式使用时,需要事先转换好,而不是增加用户浏览器的负担。如果这样做了,会在浏览器控制台看到类似这样的提示:

1
You are using the in-browser JSX transformer. Be sure to precompile your JSX for production - http://facebook.github.io/react/docs/tooling-integration.html#jsx

下面,使用gulp,自动化这个过程,gulp也能很好的自动化其他事情,比如browserify(见《使用Browserify》)。

源代码见:https://github.com/MarshalW/ReactDemos/tree/comment-m2

《使用Browserify》中的不同之处是,在gulpfile.js中:

1
2
3
4
5
6
7
8
9
...
var reactify = require('reactify');
...
gulp.task('default', function () {
var b = browserify({
entries: './js/comments.js',
debug: true,
transform: [reactify]
...

需要:

  1. var reactify = require('reactify');,需要的包
  2. transform: [reactify],在browserify执行中,要先用reactify做转换