React+gulp+browserify模块化开发

  阅读本文需要有React的基础知识,可以在React 入门实例教程React中文官网进行基础学习。

  没有React基础也可以学习本文,本文主要不是学习React,而是gulp+browserify进行模块化开发。

1.创建项目和环境搭建

  我们可以先创建一个文件夹叫react_item,作为项目的根目录。

  打开命令行,cd到项目的根目录下,我们需要通过npm安装gulp,输入:

npm install gulp -g--save-dev

  Tip:没有安装node.js的朋友可以进入node.js中文网下载

  gulp是前端项目的自动化构建工具,可以让我们方便的管理自己的项目,节约了我们大量的时间,详情见gulp中文网

  接下来还需要安装browserify,和上面一样,通过npm去安装:

npm install browserify --save-dev

  因为项目使用React进行开发,需要要安装react.js和react-dom.js,正常情况下我们不会把JSX放在浏览器端用

  

  

时间: 2024-08-06 11:24:04

React+gulp+browserify模块化开发的相关文章

前端模块化开发学习之gulp&browserify篇

 随着web应用的发展,前端的比重占得越来越多,编写代码从而也越来越复杂.而通常我们需要将不同功能或者不同模块的代码分开写,最后在html中一起加载,这样做是可以的,但是当你需要进行维护或者是二次开发的时候,你会觉得十分费劲,因为你不知道文件之间复杂的关系,所以我们需要利用一些插件来配合进行模块化的开发. 所谓模块化的开发,写过nodejs的人都知道,文件之间的依赖可以用require()实现,但是浏览器端是不支持这样的依赖形式的,而browserify却可以解决这个问题,再加上gulp这个强大

前端-杂文-数据压缩&模块化开发

数据压缩 如何解决我们服务端的压力问题呢?除了后端服务器架构配置合理之外,如需要做lvs负载均衡.在前端而言,就是减少请求量.还有就是把数据进行压缩.下面就数据的压缩做下简单总结 1.编译化 为什么前端静态文件需要编译? 这里的编译意思是把一种语言翻译成另一种语言而不是像Java中的转成接近机器码的东西.像less转换成css一样并压缩. 2.打包前端打包工具:grant| gulp| webpack 模块化开发 前端中的后端语言 nodejs中的koa. express 后端中 python

使用gulp+Browserify构建React应用

<一>.使用gulp构建React应用 一.React项目结构 .gulpfile.js ./src .index.html /js .App.js .Child.js .Parent.js 二.代码 index.html 和 js目录下的三个jsx文件如下 //index.html <!DOCTYPE html> <html> <head></head> <body> <div id="app">&l

【转】使用gulp 进行ES6开发

原谅地址:https://segmentfault.com/a/1190000004394726 一说起ES6,总会顺带看到webpack.babel.browserify还有一些认都不认识的blabla名词,对于gulp才会一点点的我来说,内心简直是崩溃的,上网查了一些文章,探索着用gulp搭起一个ES6的开发模式,总之先一边学ES6一边写吧..然后再让这个流程更加..高级. 开始 ES6有很多新特性让人忍不住想去尝试,然而各种浏览器的支持程度还不足以让我们直接在浏览器上执行ES6的代码,好在

前端模块化开发篇之grunt&amp;webpack篇

几个月前写了一篇有关gulp和browserify来做前端构建的博客,因为browserify用来做js的打包时可能有些麻烦(特别是在写React的时候),所以这里再强烈推荐一款js打包工具-webpack.webpack很强大,不光可以模块化加载js,甚至还有jsx,css,图片等等.可以看看webpack托管到github的官网,相信你看一眼就能懂webpack的强大之处了.进入webpack官网>> = =说到此处,不免有些尴尬,由于博主的英文so 一般,对webpack的认识还不够深,

seajs进行模块化开发

seajs进行模块化开发 模块化前端开发入门指南(二) 2015-08-26 15:23 by paseo, 370 阅读, 0 评论, 收藏, 编辑 概览 使用seajs模块化加载器进行模块化开发,以及它的一些弊端. 使用seajs进行模块化开发 项目目录 新建新项目 引入sea.js,文件路径modules/sea.js 引入公共库jquery. 新建index.html,index.js 项目目录如下: 关于sea.js的公共模块路径sea.js加载时,会自动获取sea.js所在的路径,将

Electron + React + Node.js + ES6 开发本地 App

Electron + React + Node.js + ES6 开发本地 App 1.概述 近来工作上需要做一款 PC 上的软件,这款软件大体来讲是类似 PPT 的一款课件制作软件.由于我最近几年专注于移动 App 的开发,对 PC 端开发的了解有些滞后.所以我首先需要看看,在 PC 上采用什么框架能够顺利完成我的工作. 我的目标是,在完成这款软件的同时能够顺便学习一下比较流行的技术.在经过前期技术调研后,我明确了实现这款软件所需要的技术条件: 不采用 C++ 方面的类库,比如 MFC.Qt.

为什么要学习React,学习React在大数据开发上有什么好处

为什么要学习React,学习React在大数据开发上有什么好处 分享之前我还是要推荐下我自己创建的大数据学习资料分享群716581014,这是全国最大的大数据学习交流的地方,2000人聚集,不管你是小白还是大牛,小编我都挺欢迎,今天的源码已经上传到群文件,不定期分享干货,包括我自己整理的一份最新的适合2018年学习和零基础入门教程,欢迎初学和进阶中的小伙伴. 如何学习React 如果你是一个 React (或者前端) 新手, 出于以下的原因, 你可能会对这个生态圈感到困惑: React 的目标群

记一次使用模块化开发

GitHub项目地址:modules 使用模块化开发已成为当下一种趋势,之前没用过,近日得空对着某视频学习了下,主要运用webpack 当然原理不是很明白,之前看过文档,迷迷糊糊的.还是欠学习.现在勉强能用,随着前端的主流发展,node npm webpack vue react angular一个都不能少,无奈弱弱菜鸡的我现在也只是会vue的皮毛,那么就用皮毛来记录一下,了胜于无. 主体项目目录,通过webpack去做项目配置,原理就不是很明白啦,在写的过程中通过npm i 安装各种依赖包,然