异步html的效果,异步加载非核心CSS_html/css_WEB-ITnose

本文介绍了如何通过Gulp和Browserify工具优化React项目的组件拆分、jsx编译和模块打包,提升开发效率。步骤包括拆分组件、使用Reactify处理JSX、配置gulp任务,最后简化HTML引入。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

5268f80b9b1e01f982625ef6fac83ca1.png

在生产环境中如果依靠前端引用JSXTransformer.js文件来实现JSX向JavaScript的转换,那是绝对不靠谱的。所以,使用Reactjs的童鞋就需要使用更有逼格的方式来完成这项任务。作为现在最常用的前端构建工具gulp搭配上Browserify来搞定这个问题那真是拉风的不要不要的 :)

废话不多说,咱们来点直接的吧。

源代码

我们这次的任务就是让这段满目疮痍的源代码变得更优化,千里之行,这是开始。如果有童鞋看不懂这段代码是用来做神马的,那么我只能说,“妈妈叫你回家看基础了。” 回家之路 (看不懂代码的,请猛戳)。

优化

前面把两个组件都写到一块了,现在来分割成独立的文件。其中一个命名为js/components/Parent.jsx,内容如下: var Child = require('./Child.jsx');var Parent = React.createClass({ render: function(){ return (

Hello World ) }});module.exports = Parent;

Parent 的子元器件Child写到js/components/Child.jsx中,内容如下: var Child = React.createClass({ render: function(){ return (

The Child ) }});module.exports = Child;

写到这里,我们已经将两个组件做了初步的拆分,如果有童鞋对module.exports是神马还是一知半解或者根本不懂这是要搞什么飞机,那么请去百度自行谷歌CMD规范,相信度娘会很妩媚的帮你解惑。

如果要真正让元器件显示在页面上需要执行React.render函数,这个是写在js/app.js中的,内容如下: var Parent = require('./components/Parent.jsx');React.render(, document.getElementById('app'));

做到这里,我们还顺带了做了一件很有意义的事情,就是对文件文件目录做了优化,组件放置在/components文件夹中,启动放置在根目录/js下,清晰明了。

使用Browerify之后,html文件中只需要引入一个自定义script文件就好了 ,如下:

所有依赖的js内容未来都会被编译到bundle.js文件中。

安装 Browserify

首先要安装 Gulp 。这里我假设大家的系统上都安装好了 nodejs 并且也全局安装了 gulp ,也就是敲gulp -v

是可以看到输出的。

首先确认你的电脑已经成功安装了gulp,至于怎么安装,这我就不多说了。去谷歌百度一下会是一个好办法。

如果你在命令行敲击如下命令 gulp -v

输出结果大概如下面这个这样子的话,那就说明你已经成功安装了gulp。 CLI version 3.9.0Local version 3.9.0

在这个基础上,进入项目目录还需要来局部安装 gulp ,browserify 以及相关的辅助工具: npm install --save-dev gulp browserify vinyl-source-stream babelify

使用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 打开就可以看到运行效果了。

文章改编自 《当 React 遇见 Gulp 和 Browserify》原文 http://segmentfault.com/a/1190000004002631

1428d0e076c3959ab11d28a39bc84fab.png

5268f80b9b1e01f982625ef6fac83ca1.png

本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源:php中文网

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值