A CommonJS Loader for browserify workflow [ES6 support].
browserify-loader is another CommonJS loader for browserify workflow. With BL, You don’t need any tools like watchify, browserify-middleware to auto build and serve bundle *js in development env.
browserify-loader is similar with requirejs, but:
- follow Modules/1.1.1 like Node
- get rid of wrapper code like
define() - be compatible all
npmpackage and allbowercomponents which supportCommonJS. likeunderscore,backbone,jQueryand so on.
Download browserify-loader with npm or bower:
$ npm install browserify-loaderPut browserify-loader.js in your page:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript"
src="node_modules/browserify-loader/browserify-loader.js"></script>
</body>
</html>Then, browserify-loader will start to run for main file in your package.json file.
browserify-loader has two options to specify the main script or package location. and browserify-loader supports coffee-script.
<script type="text/javascript"
id="bl-script"
main="backbone/app.js"
package="backbone/"
extensions="js json 6.js jsx"
src="node_modules/browserify-loader/browserify-loader.js"></script>- main: the main entrance script like
app.jsinnode app.js - package: the location where
browserify-loaderto loadpackage.json， then get the main entrance frommainproperty. - extensions: the enable extensions you want basing on your source code.
browserify-loadernow supports.js，.6.js(ES6),jsonandjsx(for react fans).
main 's priority is higher the package 's.
Look into todomvc-in-bl , which is a demo project based on todomvc to show how to use browserify-loader.
The internal wrapper API.
Register extension to browserify-loader, like:
var to5Transform = require('6to5/lib/6to5/transformation/transform')
define.registerExtension('jsx', function(script) {
return to5Transform(script, {modules: "common"}).code
})
browserify-loader's performance is important, and it is not ideal now yet!
browserify-loader provide a method to get its performance: define.performance()
Just think if there is no browserify-loader, where performance cost come from:
- script load time
and then thinking cost in browserify-loader:
-
xhr loading time, roughly equals script load time
-
define time, concat code, insert script tag and so on
-
analysis module's dependences
-
resolve dependences' uri, include get package.json recursively
- hotfix
- rewrite in es6
- support ES6!
- remove support
coffee-script
- improve for friendly debuging.
- add
registerExtensionAPI - support
jsxandjson
- use ES6's Promise instead of rsvp and eventemitter
- support
coffee-script