browserify-loader 介绍

2024年1月21日 181次阅读 来源: 寸志

为什么需要 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 微博：@寸志

    原文作者：寸志
    原文地址: https://segmentfault.com/a/1190000000640242
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞