为什么需要 browserify-loader
最近在写一个模块加载器,叫做 browserify-loader
。大名鼎鼎的 browserify
大家一定不陌生。 browserify-loader 的目标就是为在使用 browserify 开发是提供另外一种把 CommonJS 模块加载到浏览器端的选择。
有了 browserify-loader
,开发时,无需再使用 watchify
、browerify-middleware
这样的工具来自动打包模块,提供打包后的模块服务。
browserify-loader 与 requirejs 或者 seajs 类似,但是:
- 与 Node 一样,使用 Modules/1.1.1 规范
- 无需添加包裹函数
define()
- 兼容所有
npm
模块,所有支持CommonJS
的bower
模块,比如underscore
、backbone
和jQuery
等等。
快速入门
安装
使用 bower 或者 npm 安装 browserify-loader:
$ npm install browserify-loader
在页面中加入 browserify-loader.js
的引用,像下面这样:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript"
src="node_modules/browserify-loader/browserify-loader.js"></script>
</body>
</html>
就这么简单,接下来,browserify-loader 就会到当前的地址(location.origin
)去寻找 package.json
进而加载 main
所指定的模块,默认即 index.js
模块。
可选的参数
目前 browserify-loader 支持两个参数,main
和 package
:
<script type="text/javascript"
id="bl-script"
main="backbone/app.js"
package="backbone/"
src="node_modules/browserify-loader/browserify-loader.js"></script>
- main:入口模块,就像
node app.js
中的app.js
- package:指定 browserify-loader 查找 package.json 的位置
注意,main 的优先级高于 package 的;如果你要使用参数,
id="bl-script"
是必须的。
示例
todomvc-in-bl 这个项目现在包含一个 Backbone 版 Todo 应用,就是基于 todomvc 的。示例中的代码模块都是使用 CommonJS 规范编写的,然后直接通过 browserify-loader
加载到浏览器端执行。
欢迎意见和反馈,Github:@island205 微博:@寸志