browserify-loader 引见

2024年3月31日 188次阅读 来源: 寸志

为何须要 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞