1

为什么需要 browserify-loader

最近在写一个模块加载器,叫做 browserify-loader。大名鼎鼎的 browserify 大家一定不陌生。 browserify-loader 的目标就是为在使用 browserify 开发是提供另外一种把 CommonJS 模块加载到浏览器端的选择。

有了 browserify-loader,开发时,无需再使用 watchifybrowerify-middleware 这样的工具来自动打包模块,提供打包后的模块服务。

browserify-loader 与 requirejs 或者 seajs 类似,但是:

  • 与 Node 一样,使用 Modules/1.1.1 规范
  • 无需添加包裹函数 define()
  • 兼容所有 npm 模块,所有支持 CommonJSbower 模块,比如 underscorebackbonejQuery 等等。

快速入门

安装

使用 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 支持两个参数,mainpackage

    <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 微博:@寸志


寸志
68 声望37 粉丝

前端开发工程师,《深入浅出CoffeeScript》译者,《Node.js实战》作者之一。