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