browserify-loader 介绍

时间 2019-11-09

标签 browserify loader 介绍繁體版

原文原文链接

为何须要 browserify-loader

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

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

browserify-loader 与 requirejs 或者 seajs 相似，可是：java

与 Node 同样，使用 Modules/1.1.1 规范
无需添加包裹函数 define()
兼容全部 npm 模块，全部支持 CommonJS 的 bower 模块，好比 underscore、backbone和 jQuery 等等。

快速入门

安装

使用 bower 或者 npm 安装 browserify-loader：node

$ npm install browserify-loader

在页面中加入 browserify-loader.js 的引用，像下面这样：git

<!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 模块。github

可选的参数

目前 browserify-loader 支持两个参数，main 和 package：chrome

<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" 是必须的。npm

示例

todomvc-in-bl 这个项目如今包含一个 Backbone 版 Todo 应用，就是基于 todomvc 的。示例中的代码模块都是使用 CommonJS 规范编写的，而后直接经过 browserify-loader 加载到浏览器端执行。json

欢迎意见和反馈，Github：@island205 微博：@寸志浏览器