资讯专栏INFORMATION COLUMN

马上开始写 react & ES6 --- 基于gulp 和 Babel 的脚手架

Lemon_95 / 2817人阅读

摘要:我对很有兴趣,但是我发现想写不容易。于是我马上动手,有了这个,本意是自己用,现在也推荐给大家,也希望大家积极指出不足,提出建议,当然如果有更好的方案,也可以推荐给我。特点使用了,这样可以用来书写代码。

我对 react 很有兴趣,但是我发现想写 react 不容易。

我需要在开始写代码之前做很多准备工作,我需要编译jsx文件,引入react等等,而最新的react示例,有鼓励ES6来书写代码,可以用上ES6的一些闪亮的新特性,所以与其每次写代码配置工具花很多时间,不如写成一个github repo,每次只需要 clone下来,会方便很多。

于是我马上动手,有了这个react-babel-gulp-boilerplate,本意是自己用,现在也推荐给大家,也希望大家积极指出不足,提出建议,当然如果有更好的方案,也可以推荐给我。

特点

使用了Babel,这样可以用ES6来书写react代码。

使用了Gulp和browserify,可以使用CommonJS规范来写代码,当然更推荐使用ES6 module。

使用了watchify,在gulp watch之后浏览器会自动打开网页,同时在修改代码之后会自动刷新代码,方便开发和调试。

如何使用

首先,你需要安装node和npm(我相信你一定已经安装了),然后你可以按照下面的命令来clone这个repo,同时安装依赖:

$ git clone git@github.com:mrdream24/react-babel-gulp-boilerplate.git 
$ cd 
$ npm install

然后你可以“启动”它,来进行开发和调试:

$ gulp watch

这时候会自动打开浏览器新窗口http://localhost:3000,然后你会看到Hello World

最后如果你想打包代码,可以:

$ gulp build
最后

希望大家多多支持,多多指出不足,提出建议。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78654.html

相关文章

  • 前端团队 Gulp & Webpack 工作流 迁移记

    摘要:那时候所配置的任务监听匹配文件的变化自动刷新浏览器自动编译自动补全前缀多雪碧图合并拼图等等基于编译图片的任务,已经是完全满足我们的需求了。直至到后来在雪碧图的合并,多倍图的输出上,在上苦苦找寻不了比较完美的解决方案等等。 折腾 从 2015 到现在,短短的三年内,几乎每年折腾一下工作流的 更新换代 。从最早开始使用 Grunt 到 Gulp 再到 Webpack,再到 Rollup,...

    Baaaan 评论0 收藏0
  • 从0开始使用webpack搭建react工作流

    摘要:另外一方面,即使不是想搭建自己的工作流,而是使用现成的脚手架,大家都会用。显然,彻底掌握如何从零开始搭建一个能够贴近实际项目的工作流,是一个想要满足工作最基本要求的人必备的技能。 很多人想搭建一套属于自己的前端工作流,最开始的时候我们的工作流萌芽是从写一个项目的时候,拷贝以前写过的一个项目文件夹改完直接使用开始的,后来使用了grunt和gulp,再到webpack,每一个前端人员想掌握...

    bingchen 评论0 收藏0
  • Javascript 打包工具

    摘要:所以,打包工具就出现了,它可以帮助做这些繁琐的工作。打包工具介绍仅介绍款主流的打包工具,,,,以发布时间为顺序。它定位是模块打包器,而属于构建工具。而且在其他的打包工具在处理非网页文件比如等基本还是需要借助它来实现。 本文当时写在本地,发现换电脑很不是方便,在这里记录下。 前端的打包工具 打包工具可以更好的管理html,css,javascript,使用可以锦上添花,不使用也没关系...

    Sleepy 评论0 收藏0
  • 做一个合格前端,gulp资源大集合

    摘要:承接前一篇做一个合格的前端,自动化构建工具入门教程故而整理了如下插件资源大全。接下来我会逐一开源观点网开发过程中的前后端技术,如全文索引自定义富文本编辑器图片上传压缩水印等等。 承接前一篇《做一个合格的前端,gulp自动化构建工具入门教程》故而整理了如下gulp插件资源大全。**【我的新作观点网:http://www.guandn.com (观点网是一个猎获新奇、收获知识、重在独立思考...

    Baoyuan 评论0 收藏0

发表评论

0条评论

Lemon_95

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<