browserify-loader 引见

为何须要 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 微博:@寸志

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