阅读本文需要有React的基础知识,可以在React 入门实例教程和React中文官网进行基础学习. 没有React基础也可以学习本文,本文主要不是学习React,而是gulp+browserify进行模块化开发. 1.创建项目和环境搭建 我们可以先创建一个文件夹叫react_item,作为项目的根目录. 打开命令行,cd到项目的根目录下,我们需要通过npm安装gulp,输入: npm install gulp -g--save-dev Tip:没有安装node.js的朋友可以进入node.js…

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

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

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

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所在的路径,将…

随着React.Angular2.Redux等前沿的前端框架越来越流行,使用webpack.gulp等工具构建前端自动化项目也随之变得越来越重要.鉴于目前业界普遍更流行使用webpack来构建es6(ECMAScript 2015)前端项目,网上的相关教程也比较多:相对来说使用gulp来构建es6项目的中文教程就比较少. 经过一段时间的摸索,我觉得其实使用gulp也可以很方便地构建es6项目.以下是我感觉gulp和webpack主要的不同之处: gulp的任务机制和流式管道函数和webpack的…

目录 一:前端模块化概要 1.1.模块化概要 1.2.函数封装 1.3.对象封装 1.4.立即执行函数表达式(IIFE) 1.5.模块化规范 1.5.1.CommonJS 1.5.2.AMD((Asynchromous Module Definition) 异步模块定义 1.5.3.CMD(Common Module Definition)通用模块定义 1.5.4.UMD 1.5.5.原生JS模块化(Native JS) 1.5.6.小结 二.CommonJS 2.1.NodeJS中使用Comm…

早期的javascript版本没有块级作用域.没有类.没有包.也没有模块,这样会带来一些问题,如复用.依赖.冲突.代码组织混乱等,随着前端的膨胀,模块化显得非常迫切. 前端模块化规范如下: 一.前端模块化概要 1.1.模块概要 JavaScript在早期的设计中就没有模块.包.类的概念,开发者需要模拟出类似的功能,来隔离.组织复杂的JavaScript代码,我们称为模块化. 模块就是一个实现特定功能的文件,有了模块我们就可以更方便的使用别人的代码,要用什么功能就加载什么模块. 模块化开发的四点好…

使用gulp 进行ES6开发 一.新建项目 项目结构如下: /app -- /js -- /css /dist -- /js -- /css -- index.html gulpfile.js 我们的代码在 /app 目录下开发,转码.合并.压缩完之后保存在 /dist 下. 二.配置环境 1) 初始化 npm 首先进入根目录,初始化项目 $ npm init 2) 安装 gulp $ npm install gulp --save-dev 3) 安装 gulp-babel Babel是一个广泛…

原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 star 数达 42000 +,超过了 jquery 的 39000+,也即将超过前几年比较火的angular 1 的 49000+:redux 的 star 数也要接近 20000,可见大家对其的热情程度,究竟是什么魔力让大家为之疯狂呢?让我们上车,亲自体验一波试试~~本文章偏向于讲解redux流程…