在生产环境中如果依靠前端引用JSXTransformer.js
文件来实现JSX
向JavaScript
的转换,那是绝对不靠谱的。所以,使用Reactjs
的童鞋就需要使用更有逼格的方式来完成这项任务。作为现在最常用的前端构建工具gulp
搭配上Browserify
来搞定这个问题那真是拉风的不要不要的 :)
废话不多说,咱们来点直接的吧。
源代码
我们这次的任务就是让这段满目疮痍的源代码变得更优化,千里之行,这是开始。如果有童鞋看不懂这段代码是用来做神马的,那么我只能说,“妈妈叫你回家看基础了。”回家之路(看不懂代码的,请猛戳)。
<div id="app"></div>
<script type="text/jsx">
var HelloWorld = React.createClass({
render: function() {
return (
<div> Hello World </div>
);
}
});
React.render(<HelloWorld />, document.getElementById('app'));
</script>
<script type="text/jsx">
var Child = React.createClass({
render: function() {
return (
<div> The Child </div>
);
}
});
var Parent = React.createClass({
render: function() {
return (
<div> Hello World </div>
<Child/>
);
}
});
React.render(<Parent />, document.getElementById('app'));
</script>
优化
前面把两个组件都写到一块了,现在来分割成独立的文件。其中一个命名为js/components/Parent.jsx
,内容如下:
var Child = require('./Child.jsx');
var Parent = React.createClass({
render: function(){
return (
<div>
<div> Hello World </div>
<Child/>
</div>
)
}
});
module.exports = Parent;
Parent 的子元器件Child
写到js/components/Child.jsx
中,内容如下:
var Child = React.createClass({
render: function(){
return (
<div> The Child </div>
)
}
});
module.exports = Child;
写到这里,我们已经将两个组件做了初步的拆分,如果有童鞋对module.exports
是神马还是一知半解或者根本不懂这是要搞什么飞机,那么请去百度自行谷歌commonjs
,相信度娘会很妩媚的帮你解惑。
如果要真正让元器件显示在页面上需要执行React.render
函数,这个是写在js/app.js
中的,内容如下:
var Parent = require('./components/Parent.jsx');
React.render(<Parent />, document.getElementById('app'));
做到这里,我们还顺带了做了一件很有意义的事情,就是对文件文件目录做了优化,组件放置在/components
文件夹中,启动放置在根目录/js
下,清晰明了。
使用Browerify
之后,html
文件中只需要引入一个自定义script
文件就好了 ,如下:
<script src='js/bundle.js'></script>
所有依赖的js
内容未来都会被编译到bundle.js
文件中。
安装 Browserify
工欲善其事,必先利其器。如果还没有安装gulp的童鞋可以参考我曾经写的《这年头,不用点道具(gulp),你都不好意思说你是做前端的》来安装一下(名字略长略长,但有没有很贴心,服务就是要做全套嘛)。
如果你在命令行敲击如下命令
gulp -v
输出结果大概如下面这个这样子的话,那就说明你已经成功安装了gulp。
CLI version 3.9.0
Local version 3.9.0
在这个基础上,进入项目目录还需要来局部安装 gulp ,browserify 以及相关的辅助工具:
npm install --save-dev gulp browserify vinyl-source-stream reactify
使用Mac的童鞋不要忘记加sudo哟。
说一下上面四个包的各自作用:
gulp 是任务运行环境,用来进行任务调度
browserify 用来 require js 的模块
vinyl-source-stream 把 browserify 输出的数据进行准换,使之流符合 gulp 的标准
reactify 使用它来实现 JSX 编译功能
然后到 gulpfile.js 中,填写如下内容:
var gulp = require("gulp"),
browserify = require('browserify'),
reactify = require('reactify'),
source = require('vinyl-source-stream');
gulp.task('jsx', function() {
browserify('./js/app.js')
.transform(reactify)
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('js'));
});
来解释一下上面的脚本流程。首先就是把入口文件 app.js 交给 browserify 进行处理,对于 jsx 的编译,官方推荐使用的就是reactify。下一步,运行 bundle()来把所有依赖都打包成 bundle.js ,但是注意,browserify 不是一个专门为 gulp 写的包,所有它输出的数据流并不能直接 pipe 给 gulp 使用,所以,需要用到 source()接口,也就是 vinyl-source-stream 这个工具来处理一下,然后 pipe 给 gulp ,gulp.dest 会把输出的 bundle.js 文件保存到 js 文件夹中。
任务写好了,在命令行执行:
gulp jsx
这样就生成了 js/bundle.js 文件了。由于这个文件的标签已经添加到 index.html 中了,所以直接用 chrome 打开就可以看到运行效果了。