webpack，browserify简介

webpack和browserify是两个用于编译打包前端资源的工具。于此相同的还包括有百度的fis和支付宝的spm。主要的工作都是完成前端工程化工作中的一环。

##Browserify

Browserify是由substack开发的，用于实现在浏览器环境中运行npm上的commonjs模块的编译工具，本质上这并不是一个专门为打包合并前端资源所开发的工具，根据其官网的介绍上，其初衷就是为了让npm中的commonjs模块可以运行在浏览器中。

使用Browserify可以在浏览器所运行的js中，使用同nodejs中一样的require语法，将npm中的commonjs模块引入，编译并打包到浏览器运行的js中。

使用Browserify的引入特性，就可以实现自动加载依赖，并且打包合并js文件的功能。

但是比较局限的是，Browserify只能支持js文件，对于css文件的依赖还没有支持。

###transforms

Browserify用于处理文件的模块都统称为transforms，例如将.coffee格式的文件转换为.js文件等。

nodejs社区贡献了很多transforms模块，可以在这里看到：transforms list。

• 项目地址：browserify
• 用法介绍：handbook
• 浏览器支持情况：

###配置

Browserify的配置都写在package.json中，其基本格式如下：

{
	"name": "mypkg",
	"version": "1.0.0",
	"main": "main.js",
	"browser": "browser.js"
}

当在node环境中运行时，执行require(mypkg)，将从main.js中获取对外接口；在浏览器环境中运行时，执行require(mypkg)，将从browser.js中获取对外接口。

#####给本地模块命名

除此之外，在browser参数中，还可以给本地模块命名，如下所示：

{
	"browser" : {
		"foo": "./js/foo.js"
	}
}

在其他的模块中，直接通过以下方式就可以调用重命名的模块了：

var foo = require('foo');

#####browser.ingnore

在browser配置中，还可以将某一模块的忽略，使其对外接口为一个空的对象，设置方法如下：

{
	"browser" : {
		"foo": false
	}
}

这时在其他模块中使用foo时，将返回一个空对象：

var foo = require('foo');
console.log(foo);	// object{}

#####browserify.transform

在browserify中，可以配置transforms，例如：

{
	"name": "mypkg",
	"version": "1.0.0",
	"main": "main.js",
	"browserify": {
		"transform": ["coffeeify"]
	}
}

#####配置对外全局变量

使用browserify命令，会自动将模块引入到一个package中，内部定义的方法在window作用域下不可用，如果需要想要在页面中可用的话，可以通过--standalone命令来指定对外的变量：

$ browserify foo.js --standalone pageInit > page.js

关于Browserify的简介就先到这里，日后有时间的话，可以再来说一下Browserify的API和插件开发。

##webpack

与Browserify类似（甚至在webpack的文档中也多出列出了与Browserify的对比），webpack也是一个用于解决模块依赖、合并的工具。

与Browserify不同的是，webpack更接近于前端的使用方式，在Browserify中，require方法同步并且执行模块，在webpack中提供了一种require.ensure的方法，只加载模块，而不执行模块；与之类似的，在webpack中还提供了一个require.include方法，用于在函数内容加载模块，而不执行。

###loader

在webpack中loader的概念类似于Browserify中的transforms，也是完成解析编、编译代码工作的部分。

loader可以在require和配置文件webpeck.config.js中设置。

在require中设置：

require("jade!./template/index.jade");

在webpect.config.js中设置：

{
	module: {
		loaders: [
			{
				test: /\.jade$/gi,
				loader: "jade"
			}
		]
	}
}

在loader中比较牛逼的一点（当然也可以说是比较奇特的一点），就是你可以在loader后加入query。所谓query就像我们经常在url中看到的这种格式：

http://example.url.com?type=image

其中的type=image就是query，在loader中，也可以通过这种方法配置一些定向条件，以require为例：

require("url-loader?mimetype=image/png!./expample.png")

在webpack.config.js中，还可以通过query字段定义，如下：

{
	module: {
		loaders: [
			{
				test: /\.jade$/gi,
				loader: "jade",
				query: {
					mimetype: "image/png"
				}
			}
		]
	}
}

###plugins

与loader不同的是，plugins的主要职责并不是编译文件。plugins提供了各种配置，可用于在webpack一些task。（虽然个人感觉这个功能和grunt和gulp的plugins有很大重合吧）

如果只是将webpack作为grunt或者gulp中的一个task的话，其实绝大部分plugins都是没有必要使用的，因为这些脚手架工具中也会集成这些task

Tweet Share